Remplissage, Bordures et Ombres

Le remplissage, les bordures et les ombres sont des éléments essentiels pour apporter du style et de la profondeur à la mise en page d'une page web. Les propriétés CSS associées à ces aspects permettent un contrôle précis sur l'apparence visuelle des éléments.

Remplissage (background)

La propriété background permet de définir le remplissage des éléments.

div.highlight {
    background-color: #ffcc00; /* Définit une couleur de fond jaune pour les éléments avec la classe "highlight" */
}
 
button {
    background-image: url('bouton-background.png'); /* Utilise une image comme fond pour les boutons */
}

• Explication : La première règle définit une couleur de fond jaune pour les éléments avec la classe "highlight". La deuxième règle utilise une image comme fond pour les boutons.

Bordures (border)

La propriété border permet de définir des bordures autour des éléments.

div.box {
    border: 2px solid #333; /* Ajoute une bordure solide de 2 pixels avec une couleur grise aux boîtes avec la classe "box" */
}
 
img {
    border-radius: 50%; /* Arrondit les coins des images, créant une bordure circulaire */
}

• Explication : La première règle ajoute une bordure solide de 2 pixels avec une couleur grise aux boîtes avec la classe "box". La deuxième règle arrondit les coins des images, créant une bordure circulaire.

Ombres (box-shadow)

La propriété box-shadow permet de créer des ombres autour des éléments.

div.card {
    box-shadow: 5px 5px 10px #888888; /* Ajoute une ombre de 5 pixels vers la droite, 5 pixels vers le bas, avec une étendue de 10 pixels et une couleur grise */
}
 
h3 {
    text-shadow: 2px 2px 4px #666666; /* Ajoute une ombre de texte de 2 pixels vers la droite, 2 pixels vers le bas, avec une étendue de 4 pixels et une couleur grise */
}

• Explication : La première règle ajoute une ombre à la boîte avec une décalage de 5 pixels vers la droite, 5 pixels vers le bas, une étendue de 10 pixels et une couleur grise. La deuxième règle ajoute une ombre au texte avec une décalage de 2 pixels vers la droite, 2 pixels vers le bas, une étendue de 4 pixels et une couleur grise.

Conclusion

En combinant ces propriétés, vous pouvez améliorer significativement l'apparence visuelle des éléments sur votre page web. Expérimentez avec différentes valeurs pour obtenir le style visuel souhaité et créer une mise en page esthétiquement attrayante.