Diseño creativo de carteles con texturas de madera

Introducción

En este proyecto, aprenderás a crear un diseño de cartel creativo que combine la historia de "Valle Fantástico" y la prosperidad de "Bahía del Sueño". Aprenderás a dar estilo al cartel con un fondo con textura de madera y un letrero superior inclinado, creando una experiencia artística cautivadora para los transeúntes.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo establecer el radio de borde y la imagen de fondo del elemento del cartel
• Cómo redondear las esquinas superiores y inclinar el elemento del letrero superior

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Utilizar propiedades CSS como border-radius y transform para crear elementos de diseño únicos
• Incorporar imágenes de fondo para mejorar la estética general de un diseño web
• Combinar elementos de diseño para crear una disposición coherente y visualmente atractiva

Configura la estructura del proyecto

Para comenzar, abre el entorno de experimentación y la estructura de directorios es la siguiente:

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

Entre ellos:

• index.html es la página principal.
• images es la carpeta para almacenar las imágenes del proyecto.
• css/style.css es el archivo CSS donde necesitas complementar el código.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualiza manualmente la página para ver el siguiente efecto en tu navegador:

Establece el fondo del cartel

En este paso, aprenderás a establecer el fondo del elemento del cartel y a redondear sus esquinas.

1. Abre el archivo css/style.css.

2. Localiza la clase .billboard.

3. Agrega el siguiente código para establecer el radio de borde y la imagen de fondo:

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

   • La propiedad border-radius establece el radio de borde del elemento .billboard en 10 píxeles, creando esquinas redondeadas.
   • La propiedad background-image establece la imagen de fondo del elemento .billboard en woodiness.jpg ubicado en la carpeta images.

Inclina el letrero superior

En este paso, aprenderás a redondear las esquinas superiores del elemento del letrero superior e inclinarlo.

1. Localiza la clase .top-sign en el archivo css/style.css.

2. Agrega el siguiente código para redondear las esquinas superiores e inclinar el elemento:

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

   • Las propiedades border-top-left-radius y border-top-right-radius establecen que las esquinas superiores izquierda y derecha del elemento .top-sign tengan un radio de 15 píxeles, creando esquinas redondeadas.
   • La propiedad transform: skewX(-20deg) inclina el elemento .top-sign en -20 grados en el eje x.

Después de completar estos tres pasos, el cartel debería tener un fondo con textura de madera y redondeado, y el letrero superior debería estar inclinado con las esquinas superiores redondeadas, como se muestra en la imagen del efecto completado.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.