Творческий дизайн вывески с деревянными текстурами

CSSCSSBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом проекте вы научитесь создавать креативный дизайн вывески, который сочетает историю "Чудесной Долины" и процветание "Мечты-Бухты". Вы научитесь стилизовать вывеску с деревянно-текстурованным фоном и наклонным верхним табличным знаком, создавая захватывающий художественный опыт для прохожих.

👀 Предпросмотр

предпросмотр готового дизайна вывески

🎯 Задачи

В этом проекте вы научитесь:

  • настраивать радиус скругления границ и изображение фона элемента вывески;
  • округлять верхние углы и наклонять верхний табличный элемент.

🏆 Достижения

После завершения этого проекта вы сможете:

  • использовать CSS-свойства, такие как border-radius и transform, для создания уникальных элементов дизайна;
  • использовать изображения фона для улучшения общего эстетического вида веб-дизайна;
  • комбинировать элементы дизайна для создания целостного и визуально привлекательного макета.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") css/BasicConceptsGroup -.-> css/values("Values") css/CoreLayoutGroup -.-> css/borders("Borders") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-300046{{"Творческий дизайн вывески с деревянными текстурами"}} css/properties -.-> lab-300046{{"Творческий дизайн вывески с деревянными текстурами"}} css/values -.-> lab-300046{{"Творческий дизайн вывески с деревянными текстурами"}} css/borders -.-> lab-300046{{"Творческий дизайн вывески с деревянными текстурами"}} css/backgrounds -.-> lab-300046{{"Творческий дизайн вывески с деревянными текстурами"}} css/transformations -.-> lab-300046{{"Творческий дизайн вывески с деревянными текстурами"}} end

Настройка структуры проекта

Для начала откройте экспериментальную среду, и структура каталогов будет выглядеть следующим образом:

├── css
│   └── style.css
├── images
│   └── woodiness.jpg
└── index.html

В этом списке:

  • index.html - главная страница.
  • images - папка для хранения изображений проекта.
  • css/style.css - CSS-файл, в котором необходимо дополнить код.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и вручную обновите страницу, чтобы увидеть следующее в вашем браузере:

Описание изображения

Установка фона вывески

В этом шаге вы научитесь настраивать фон элемента вывески и округлять его углы.

  1. Откройте файл css/style.css.

  2. Найдите класс .billboard.

  3. Добавьте следующий код, чтобы установить радиус скругления границ и изображение фона:

    border-radius: 10px;
    background-image: url(../images/woodiness.jpg);
    • Свойство border-radius устанавливает радиус скругления границ элемента .billboard в 10 пикселей, создавая округленные углы.
    • Свойство background-image устанавливает изображение фона элемента .billboard в woodiness.jpg, расположенное в папке images.

Наклон верхнего табличного знака

В этом шаге вы научитесь округлять верхние углы элемента верхнего табличного знака и наклонять его.

  1. Найдите класс .top-sign в файле css/style.css.

  2. Добавьте следующий код, чтобы округлить верхние углы и наклонить элемент:

    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transform: skewX(-20deg);
    • Свойства border-top-left-radius и border-top-right-radius устанавливают радиус верхних левого и верхнего правого углов элемента .top-sign в 15 пикселей, создавая округленные углы.
    • Свойство transform: skewX(-20deg) наклоняет элемент .top-sign на -20 градусов по оси x.

После завершения этих трех шагов вывеска должна иметь округленный деревянно-текстурованный фон, а верхнее табличное знако должно быть наклоненным с округленными верхними углами, как показано на изображении с готовым результатом.

пример наклоненного верхнего табличного знака
✨ Проверить решение и практиковаться

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.