Conception créative de panneau publicitaire avec des textures de bois

Introduction

Dans ce projet, vous allez apprendre à créer une conception de panneau publicitaire créative qui combine l'histoire de "La Vallée Fantaisiste" et la prospérité de "La Baie des Rêves". Vous allez apprendre à styliser le panneau publicitaire avec un fond de texture de bois et un panneau d'enseigne incliné en haut, créant une expérience artistique captivante pour les passants.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment définir le rayon de bordure et l'image d'arrière-plan de l'élément panneau publicitaire
• Comment arrondir les coins supérieurs et incliner l'élément panneau d'enseigne en haut

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser des propriétés CSS telles que border-radius et transform pour créer des éléments de conception uniques
• Intégrer des images d'arrière-plan pour améliorer l'esthétique globale d'une conception web
• Combiner des éléments de conception pour créer une mise en page cohérente et visuellement attrayante

Configurer la structure du projet

Pour commencer, ouvrez l'environnement d'expérience et la structure de répertoires est la suivante :

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

Dans lequel :

• index.html est la page principale.
• images est le dossier pour stocker les images du projet.
• css/style.css est le fichier CSS où vous devez compléter le code.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour voir l'effet suivant dans votre navigateur :

Définir l'arrière-plan du panneau publicitaire

Dans cette étape, vous allez apprendre à définir l'arrière-plan de l'élément panneau publicitaire et à arrondir ses coins.

1. Ouvrez le fichier css/style.css.

2. Localisez la classe .billboard.

3. Ajoutez le code suivant pour définir le rayon de bordure et l'image d'arrière-plan :

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

   • La propriété border-radius définit le rayon de bordure de l'élément .billboard à 10 pixels, créant des coins arrondis.
   • La propriété background-image définit l'image d'arrière-plan de l'élément .billboard à woodiness.jpg situé dans le dossier images.

Incliner le panneau d'enseigne supérieur

Dans cette étape, vous allez apprendre à arrondir les coins supérieurs de l'élément panneau d'enseigne supérieur et à l'incliner.

1. Localisez la classe .top-sign dans le fichier css/style.css.

2. Ajoutez le code suivant pour arrondir les coins supérieurs et incliner l'élément :

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

   • Les propriétés border-top-left-radius et border-top-right-radius définissent les coins supérieurs gauche et droit de l'élément .top-sign pour avoir un rayon de 15 pixels, créant des coins arrondis.
   • La propriété transform: skewX(-20deg) incline l'élément .top-sign de -20 degrés sur l'axe x.

Après avoir effectué ces trois étapes, le panneau publicitaire devrait avoir un arrière-plan arrondi et de texture de bois, et le panneau d'enseigne supérieur devrait être incliné avec des coins supérieurs arrondis, comme montré dans l'image d'effet terminé.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.