Ombres

Leçon 6 sur 8 du cours Projet CSS - Bouton stylisé de Coddy.

C'est une pratique courante d'ajouter des effets d'ombre aux boutons afin de leur donner un aspect surélevé et cliquable.

Pour ajouter une ombre en CSS, nous utilisons la propriété box-shadow,

#with-shadow {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25)
}

Défi

Facile

Ajoutez des ombres à votre bouton !

Conseil : c'est une bonne pratique d'utiliser la couleur rgba(0, 0, 0, 0.25) comme couleur d'ombre (vous pouvez jouer avec l'opacité - 0.25)

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
    </body>
</html>

Toutes les leçons de Projet CSS - Bouton stylisé

1Introduction

Introduction Partie HTML

2Le projet CSS

Ombres