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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

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

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

├── 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, чтобы улучшить свои навыки.