En-tete Astuces divers html et css
Classic Moderne

Les ombrages avancé:

Ombre interne

Ombre interne

Cette ombre va permettre de voir une utilisation de la valeur inset. Voici la ligne de code nécessaire à sa réalisation.


box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;

Les informations nécessaires sont donc identiques à une ombre portée externe, il suffit de rajouter la valeur inset pour passer à une ombre interne.

Ombre portée et interne

Ombre portée et interne

Il est possible, comme beaucoup de propriétés en CSS3, de déclarer plusieurs ombres en une seule fois :


box-shadow: -2px 2px 10px 1px rgba(0, 0, 0, 0.7),
-1px 2px 20px rgba(255, 255, 255, 0.6) inset;

Celles-ci sont simplement déclarées les unes à la suite des autres, séparées par une virgule.
Il est ainsi possible de créer des effets d’ombres extrêmement riches et fins en superposant et cumulant plusieurs ombres portées et internes.
Comme vous le montre cette exemple, l’ombre peut pendre la couleur que vous souhaitez, elle peut donc parfaitement servir à la création d’une zone lumineuse, un reflet, ou un halo.

Détournement en bordure

Détournement en bordure

Il est possible de pousser l'utilisation des ombres bien plus loin et de créer des effets de bordures spécifiques. En n'ayant pas la main sur le code HTML, ou bien en se contentant d'un simple conteneur, CSS prend le relais efficacement.


div
{
padding: 26px;
border: 1px solid #bbb;
background: black;
color: #777;
box-shadow: 0 0 0 16px blue inset,
0 0 0 17px red inset;
}








Haut-de-Page