Les textes et les boîtes peuvent être munies d'une ou plusieurs
ombres. Le bac à sable vous permettra
d'en créer facilement.
text-shadow
Dans l'exemple ci-dessous, l'ombre du texte de l'élément d'identifiant
id="texte" a pour couleur #03B8CF, elle
est décalée horizontalement vers la droite de 4 pixels par rapport
au texte, verticalement vers le bas de 5 pixels et un
« adoucissement » (ou floutage) de 3 pixels
est déclaré :
Un texte peut être muni de plusieurs ombres, séparées dans la
déclaration par une virgule. Dans ce cas, la première
ombre déclarée est au-dessus de la seconde, qui est au-dessus
de la troisième...(cf exercice n°1)
box-shadow
Dans l'exemple ci-après :
-
10px est le décalage horizontal de l'ombre
(vers la droite en positif, vers la gauche en négatif)
-
8px est le décalage vertical de l'ombre
(vers le bas en positif, vers le haut en négatif)
-
5px et 4px sont, respectivement,
l'adoucissement (floutage) et un renfort de l'ombre.
-
#044106 est la couleur de l'ombre.
Comme pour les textes, on peut indiquer plusieurs ombres, séparées par
des virgules.
On peut obtenir de beaux effets avec des ombres, mais la
définition des effets réussis demande du travail. Par exemple :
une boîte pour des titres.
Dans ce bac à sable, on peut attribuer une ombre au texte ou
bien au conteneur du texte (ici le paragraphe).
L'homme qui tire plus vite que son ombre !
Code Css :
p { /* Mise en forme des paragraphes */
text-shadow: 6px -6px 2px #000000; /* Ombre du texte */
line-height: 1.5; /* Hauteur de ligne */
box-shadow: -4px 7px 5px #0000FF; /* Ombre du conteneur */
}
- Pour le premier texte (
class="bosse"),
déclarer deux ombres sans adouci :
- la première avec des décalages de
-1px et
-1px et de couleur blanche,
- la seconde avec des décalages de
1px et
1px et de couleur gris #333.
- Pour le second texte, déclarer deux ombres sans adouci :
- la première avec des décalages de
1px et
1px et de couleur blanche,
- la seconde avec des décalages de
-1px et
-1px et de couleur gris #444.
Essayez ensuite quelques variantes...
- Affichage à obtenir ?
- Une solution ?
Essayez d'obtenir un effet tel que le suivant :
- Une piste ?
- Affichage à obtenir ?
- Une solution ?
Les deux couleurs nécessaires :
#fff et #ff2d95.
En ajoutant à un box-shadow, une utilisation de
transform: rotate(-8deg);, obtenir :
- Affichage à obtenir ?
- Une solution ?
Effet à obtenir :
- Une piste ?
- Affichage à obtenir ?
- Une solution ?
Liste des nuances de gris qui peuvent être nécessaires :
#767676 - #737272 - #767474 - #787777 - #7b7a7a
#7f7d7d - #828181 - #868585 - #8b8a89 - #8f8e8d
#949392 - #999897 - #9e9c9c - #a3a1a1 - #a8a6a6
#adabab - #b2b1b0 - #b7b6b5 - #bcbbba - #c1bfbf
#c6c4c4 - #cbc9c8 - #cfcdcd - #d4d2d1 - #d8d6d5
#dbdad9 - #dfdddc - #e2e0df - #e4e3e2