Diseño creativo de carteles | Valle Imaginario | Bahía del Sueño

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

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{{"Diseño creativo de carteles con texturas de madera"}} css/properties -.-> lab-300046{{"Diseño creativo de carteles con texturas de madera"}} css/values -.-> lab-300046{{"Diseño creativo de carteles con texturas de madera"}} css/borders -.-> lab-300046{{"Diseño creativo de carteles con texturas de madera"}} css/backgrounds -.-> lab-300046{{"Diseño creativo de carteles con texturas de madera"}} css/transformations -.-> lab-300046{{"Diseño creativo de carteles con texturas de madera"}} end

Establece 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.

Abre el archivo css/style.css.
Localiza la clase .billboard.
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.

Localiza la clase .top-sign en el archivo css/style.css.
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.

✨ Revisar Solución y Practicar

Resumen

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