Comment appliquer deux effets CSS3 d'ombre

CSS comprend deux effets d'ombre, qui tous deux nécessitent au moins deux propriétés: dimensions d'ombre horizontales et verticales. Effets CSS3 sont rapidement intégrés dans la conception de page Web, et les concepteurs sont à venir avec quelques façons passionnantes et créatives de les appliquer.

Les effets d'ombre de CSS3 sont les suivantes:

• Box-shadow est appliqué à des bordures autour des sélecteurs.

• Text-shadow applique des ombres au texte.

Utilisation box-shadow comme un exemple de syntaxe ressemble à ceci:

box-shadow: h-ombre v-shadow-

Positif h-ombre valeurs génèrent une ombre à la droite du texte, alors que négative h-ombre générer des valeurs d'une ombre à gauche du texte. Positif v-ombre valeurs génèrent une ombre en dessous du texte, tandis que les valeurs négatives créent une ombre au-dessus du texte. Les valeurs sont normalement définis en pixels.

Ombres également souvent tache propriété. La tache valeur définit l'épaisseur de la tache élément du gradient - essentiellement de savoir comment largement à l'espace le gradient dans l'ombre. Un supérieur tache valeur crée un bien, effet floue, alors qu'une plus faible tache crée une valeur nettes, plus lumineuses ombre portée. La tache valeur apparaît après la h-ombre et v-ombre valeurs dans la définition du style, comme ceci:

box-shadow: h-ombre v-ombre Blur-

Vous pouvez également définir une couleur d'ombre (si aucune couleur est spécifié, une couleur navigateur par défaut apparaît).

Ainsi, par exemple, dans l'exemple de code suivant, le box-shadow est défini avec une ombre horizontale étendant 3 pixels vers la droite, 6 pixels vers le bas, avec un effet de flou moyen, celui qui applique pour créer un flou de gradient-like qui se prolonge 3 pixels dans l'ombre portée. Et une couleur a été attribué à la boîte ombre (argent).

box-shadow: 3px 6px 3px argenté

Étendre définit la taille de l'ombre. Par défaut, l'ombre est la même taille que l'élément sur lequel il est appliqué mais vous pouvez faire cette ombre plus grande (ou plus petit) en ajoutant un propagation la valeur à la définition du style.

Ajout de la valeur d'insertion pour une définition de l'ombre inverse l'ombre, plaçant à l'intérieur au lieu de l'extérieur de la boîte.

Voici un exemple d'un box-shadow définition qui crée une ombre qui se prolonge de 12 pixels vers la droite et 18 pixels vers le bas, est de 25 pixels plus grand que l'élément d'origine à laquelle il est appliqué, et est de couleur argent:

box-shadow: 12px 18px 12px 25px argenté

Appliqué à une boîte, les valeurs dans l'exemple précédent ressemblent à ce qui suit:

Enfin ombres peuvent être insérer - autrement dit, placé à l'intérieur de l'élément à laquelle elles sont appliquées. La figure suivante montre comment les impacts encart même box-shadow indiqué précédemment.

Créer un effet box-shadow

Effets box-shadow sont définis par deux paramètres essentiels: décalage horizontal et vertical.

Par exemple, pour créer un style de classe qui génère un box-shadow avec 6 pixels de décalage horizontal et 12 pixels de décalage vertical, vous devriez utiliser ce code:

box-shadow: 6px 12px;

Si vous voulez définir la longueur du flou, vous souhaitez ajouter une troisième valeur. Et si vous vouliez pour définir la couleur de l'ombre, vous souhaitez ajouter cette valeur de couleur:

box-shadow: 12px 9px 6px gris-

Vous avez besoin de faire plus de travail si le box-shadow va travailler dans tous les navigateurs modernes. Chrome, Opera, installations actuelles de Firefox, et IE9 soutiennent l'effet box-shadow sans préfixe. Mais vous avez encore besoin de créer des versions préfixées du code pour les anciennes versions de Firefox et, à cette écriture, toutes les versions de Safari.

Le code suivant définit un sélecteur de classe nommée box_shadow qui fonctionne dans tous les navigateurs de la génération actuelle et a quelques valeurs de remplissage et de marge:

.box_shadow {
box-shadow: 12px 9px 6px gris-
-webkit-box-shadow: 12px 6px 9px gris-
-moz-box-shadow: 12px 6px 9px gris-
padding: 9px;
margin: 24px; }

Et rappelez-vous, vous avez défini un style de classe. Pour appliquer ce style de classe, il doit encore être fixé à un élément HTML. Par exemple, vous pouvez appliquer le style de classe définie dans le lot précédent de code pour une balise de paragraphe avec le HTML suivant:

contenu va ici

La figure suivante montre ce box-shadow appliqué à un paragraphe dans le navigateur Safari.

Appliquer des ombres à taper

L'effet text-shadow, curieusement, est pris en charge dans les navigateurs (sauf pour IE) sans préfixe requis.

La syntaxe de base essentiel pour créer un text-shadow est

ext-ombre: h v couleur

Dans cette syntaxe, h est l'offset horizontal v est l'offset vertical et couleur est la valeur de couleur.

L'exemple suivant crée un sélecteur de classe (.text_shadow) Qui applique un text-shadow avec une horizontale 4-pixel de décalage, un décalage de 1 pixel verticale, la couleur gris foncé:

.text_shadow {
text-shadow: 1px 4px gris-
}

Text-ombres sont parfois appliquées type blanc pour un effet invitant propre. La figure suivante illustre la text_shadow style de classe définie dans le code précédent type blanc.