Shadow Box
Avec CSS3, vous pouvez créer des effets d'ombre!
CSS3 Effets d'ombre
Avec CSS3, vous pouvez ajouter des ombres au texte et aux éléments.
Dans ce chapitre, vous allez en apprendre davantage sur les propriétés suivantes:
-
text-shadow -
box-shadow
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- ou -moz- spécifie la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 Ombre texte
Le CSS3 text-shadow propriété applique ombre au texte.
Dans son utilisation la plus simple, vous indiquez que l'ombre horizontale (2px) et l'ombre verticale (2px):
ombre texte effet!
Ensuite, ajoutez une couleur à l'ombre:
ombre texte effet!
Ensuite, ajouter un effet de flou à l'ombre:
ombre texte effet!
L'exemple suivant montre un texte blanc avec une ombre noire:
ombre texte effet!
L'exemple suivant montre une lueur au néon rouge ombre:
ombre texte effet!
Ombres multiples
Pour ajouter plus d'une ombre au texte, vous pouvez ajouter une liste d'ombres séparées par des virgules.
L'exemple suivant montre une lueur au néon ombre rouge et bleu:
ombre texte effet!
L'exemple suivant montre un texte blanc avec du noir, bleu et bleu foncé ombre:
ombre texte effet!
Exemple
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Essayez - le vous - même » CSS3 box-shadow propriété
Le CSS3 box-shadow propriété applique l' ombre à des éléments.
Dans son utilisation la plus simple, vous indiquez que l'ombre horizontale et verticale de l'ombre:
Ensuite, ajoutez une couleur à l'ombre:
Ensuite, ajouter un effet de flou à l'ombre:
Vous pouvez également ajouter des ombres à l'avant et :: :: après les pseudo-classes, pour créer un effet intéressant:
Exemple
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} Essayez - le vous - même » Cartes
Un exemple d'utilisation du box-shadow propriété pour créer des cartes de type papier:
1
1 janvier 2016
Hardanger, Norvège
Exemple
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Essayez - le (Carte de texte) » Essayez (carte d'image)» Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
CSS3 Ombre Propriétés
Le tableau suivant présente les propriétés CSS3 d'ombre:
| Propriété | La description |
|---|---|
| box-shadow | Ajoute un ou plusieurs ombres à un élément |
| text-shadow | Ajoute un ou plusieurs ombres à un texte |