Design Criativo de Outdoor com Texturas de Madeira

Introdução

Neste projeto, você aprenderá a criar um design criativo para um outdoor que combina a história de "Fanciful Valley" e a prosperidade de "Dream Bay". Você aprenderá a estilizar o outdoor com um fundo texturizado de madeira e uma placa superior inclinada, criando uma experiência artística cativante para os transeuntes.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como definir o raio da borda (border radius) e a imagem de fundo do elemento do outdoor
• Como arredondar os cantos superiores e inclinar o elemento da placa superior

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar propriedades CSS como border-radius e transform para criar elementos de design únicos
• Incorporar imagens de fundo para aprimorar a estética geral de um design web
• Combinar elementos de design para criar um layout coeso e visualmente atraente

Configurar a Estrutura do Projeto

Para começar, abra o ambiente de experimento, e a estrutura do diretório é a seguinte:

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

Dentre eles:

• index.html é a página principal.
• images é a pasta para armazenar as imagens do projeto.
• css/style.css é o arquivo CSS onde você precisa complementar o código.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra o "Web 8080" no topo da VM e atualize manualmente a página para ver o seguinte efeito no seu navegador:

Definir o Fundo do Outdoor

Nesta etapa, você aprenderá como definir o fundo do elemento do outdoor e arredondar seus cantos.

1. Abra o arquivo css/style.css.

2. Localize a classe .billboard.

3. Adicione o seguinte código para definir o raio da borda (border radius) e a imagem de fundo:

   border-radius: 10px;
   background-image: url(../images/woodiness.jpg);
   

   • A propriedade border-radius define o raio da borda do elemento .billboard para 10 pixels, criando cantos arredondados.
   • A propriedade background-image define a imagem de fundo do elemento .billboard para woodiness.jpg, localizada na pasta images.

Inclinar o Sinal Superior

Nesta etapa, você aprenderá como arredondar os cantos superiores do elemento do sinal superior e incliná-lo.

1. Localize a classe .top-sign no arquivo css/style.css.

2. Adicione o seguinte código para arredondar os cantos superiores e inclinar o elemento:

   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   transform: skewX(-20deg);
   

   • As propriedades border-top-left-radius e border-top-right-radius definem os cantos superior esquerdo e superior direito do elemento .top-sign para terem um raio de 15 pixels, criando cantos arredondados.
   • A propriedade transform: skewX(-20deg) inclina o elemento .top-sign em -20 graus no eixo x.

Após concluir estas três etapas, o outdoor deve ter um fundo arredondado com textura de madeira, e o sinal superior deve ser inclinado com cantos superiores arredondados, como mostrado na imagem do efeito concluído.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.