Description

Ajoute une ombre à un élément. Il est possible d'utiliser plusieurs ombres, en indiquant leurs paramètres séparés par des virgules ; lors de l'application des ombres, la première ombre de la liste sera plus haute, la dernière plus basse. Si un rayon d'arrondi est spécifié pour un élément via la propriété border-radius, alors l'ombre aura également des coins arrondis. L'ajout d'une ombre augmente la largeur de l'élément, il peut donc apparaître bande horizontale défilement dans le navigateur.

Syntaxe

box-shadow : aucun |<тень> [,<тень>]*
Où<тень>:
encart<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Valeurs

none Annule l'ajout d'une ombre. encart L'ombre est dessinée à l'intérieur de l'élément. Paramètre facultatif. x offset Le décalage horizontal de l'ombre par rapport à l'élément. Une valeur positive de ce paramètre décale l'ombre vers la droite, une valeur négative la décale vers la gauche. Paramètre obligatoire. y offset Le décalage vertical de l'ombre par rapport à l'élément. Une valeur positive déplace l'ombre vers le bas, une valeur négative la déplace vers le haut. Paramètre obligatoire. flou Définit le rayon de flou de l'ombre. Plus cette valeur est élevée, plus l’ombre est lissée, devenant plus large et plus claire. Si ce paramètre n'est pas spécifié, la valeur par défaut est définie sur 0, ce qui rendra l'ombre nette plutôt que floue. stretch Une valeur positive étire l'ombre, une valeur négative, au contraire, la comprime. Si ce paramètre n'est pas spécifié, la valeur par défaut est 0, ce qui fera que l'ombre aura la même taille que l'élément. color La couleur de l'ombre dans n'importe quel format CSS disponible, l'ombre par défaut est noire. Paramètre facultatif.

Il est possible de spécifier plusieurs ombres en séparant leurs paramètres par une virgule. L'ordre suivant est pris en compte : la première ombre de la liste est placée tout en haut, la dernière de la liste est tout en bas.

HTML5 CSS3 IE Cr Op Sa Fx

Le résultat de l'exemple est présenté sur la Fig. 1.

Riz. 1. Vue Ombre dans le navigateur Safari

Navigateurs

Safari jusqu'à la version 5.1, Chrome jusqu'à la version 10.0, Android jusqu'à la version 4.0 et iOSSafari jusqu'à la version 5.0, prend en charge la propriété -webkit-box-shadow.

Firefox avant la version 4.0 prend en charge la propriété -moz-box-shadow.

Internet Explorer antérieur à la version 9.0 ne prend pas en charge la propriété box-shadow ; à la place, vous pouvez utiliser la propriété de filtre non standard :

Filtre : progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000) ;

Ici : offX - décalage horizontal de l'ombre ; offY — décalage vertical de l'ombre ; couleur – couleur de l’ombre.

L'application du filtre ombre portée produit une ombre claire et nette, vous pouvez donc utiliser le filtre ombre pour un effet de flou.

Filtre : progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, force=10) ;

Ici : direction — angle de direction de l'ombre de 0 à 360° ; couleur — couleur de l'ombre ; force - décalage de l'ombre en pixels.

Les ombres régulières sont faciles à mettre en œuvre en utilisant box-shadow ou text-shadow. Mais que se passe-t-il si vous avez besoin de créer des ombres internes ? Cet article décrit comment créer ces ombres avec seulement quelques lignes de code.

Syntaxe

Tout d'abord, examinons les deux principales manières d'implémenter les ombres en CSS.

boîte ombre

Conception boîte ombre contient plusieurs significations différentes :

Décalage horizontal Et décalage vertical- déplacement horizontal et vertical, respectivement. Ces valeurs indiquent dans quelle direction l'objet projettera son ombre :

Rayon de flou Et rayon de propagation un peu plus compliqué. Quelle est la différence? Regardons un exemple avec deux éléments, où les valeurs rayon de flou différer:

Le bord de l’ombre est simplement flou. Avec des valeurs différentes rayon de propagation nous voyons ce qui suit :

Dans ce cas, on voit que l’ombre est dispersée sur une grande surface. Si vous ne spécifiez pas de valeur rayon de flou Et rayon de propagation, alors ils seront égaux à 0.

ombre de texte

La syntaxe est très similaire à boîte ombre:

Les significations sont similaires, mais pas ombre étendue. Exemple d'utilisation :

Encart dans l'ombre de la boîte

Pour « retourner » l'ombre à l'intérieur de l'objet, vous devez ajouter encart en CSS :

Une fois que vous avez compris la syntaxe de base de l'ombre de la boîte, il est très facile de comprendre comment implémenter les ombres internes. Les valeurs sont toujours les mêmes, vous pouvez ajouter de la couleur (RVB en hexadécimal) :

Colorier Format RVB, la valeur alpha est responsable de la transparence de l'ombre :

Images avec des ombres

Ajouter une ombre intérieure à une image est un peu plus difficile que d'ajouter une ombre ordinaire div. Pour commencer, voici code régulier Des photos:

Il est logique de supposer que vous pouvez ajouter une ombre comme ceci :

Img ( box-shadow: encart 0px 0px 10px rgba(0,0,0,0.5); )

Mais l'ombre n'est pas visible :

Il existe plusieurs façons de résoudre ce problème, chacune ayant ses avantages et ses inconvénients. Examinons-en deux. La première consiste à envelopper l'image dans un format régulier div:

Div ( hauteur : 200px ; largeur : 400px ; box-shadow : encart 0px 0px 10px rgba(0,0,0,0.9); ) img ( hauteur : 200px ; largeur : 400px ; position : relative ; z-index : -2 ; )

Tout fonctionne, mais il faut rajouter un petit plus Balisage HTML et CSS. La deuxième façon consiste à définir l'image comme arrière-plan le bloc souhaité:

Div ( hauteur : 200 px ; largeur : 400 px ; arrière-plan : url(http://lorempixum.com/400/200/transport/2) ; box-shadow : encart 0px 0px 10px rgba(0,0,0,0.9) ; )

Voici ce qui peut arriver lors de l’utilisation d’ombres intérieures :

Encart dans l'ombre du texte

Pour implémenter une ombre de texte interne, ajoutez simplement au code encart ne marche pas:

Pour résoudre, appliquez d'abord à l'en-tête h1 installer fond sombre et une ombre légère :

H1 ( couleur d'arrière-plan : #565656 ; couleur : transparent ; ombre du texte : 0px 2px 3px rgba(255,255,255,0.5); )

Voici ce qui se passe :

Ajouter un ingrédient secret clip d'arrière-plan qui coupe tout ce qui dépasse du texte (sur fond sombre) :

H1 ( couleur d'arrière-plan : #565656 ; couleur : transparent ; ombre de texte : 0px 2px 3px rgba(255,255,255,0.5) ; -webkit-background-clip : texte ; -moz-background-clip : texte ; background-clip : texte ; )

Il s’est avéré presque exactement ce dont nous avions besoin. Maintenant, nous assombrissons juste un peu le texte (alpha), et le résultat est :

Les ombres en CSS peuvent être implémentées assez rapidement et facilement, qu'il s'agisse d'une ombre de boîte ou d'une ombre de texte. Mais est-ce vraiment si simple de mettre en œuvre une ombre intérieure ? Pouvez-vous créer une ombre de boîte incrustée ? Et qu’en est-il de la même tâche lors de l’utilisation de texte ?

Aujourd'hui, nous voulons vous parler d'un très d'une manière simple Implémentation d'une ombre intérieure qui ne comprend que quelques lignes de code. Nous vous parlerons des ombres de zone et de texte, et de la manière dont vous pouvez les modifier pour créer une ombre incrustée.

Aimez-vous cet article? N'oubliez pas de vous abonner à notre.

Syntaxe de l'ombre

Avant d'aborder les ombres incorporées, examinons la syntaxe de base pour créer deux différents types Ombres CSS. Même si vous avez déjà fait cela, rafraîchissons simplement votre mémoire.

boîte ombre

Les ombres de boîte ou ombres de boîte sont probablement l'une des ombres les plus populaires en CSS. Les implémentations potentielles varient considérablement ici et les développeurs utilisent souvent leurs propres approches et applications. La syntaxe de l'ombre de la boîte dans son ensemble est assez complexe et implique 6 valeurs distinctes. Nous commencerons par examiner les 5 exemples de mise en œuvre les plus courants.

Comme vous pouvez le voir, la liste ci-dessus est une liste de valeurs pour le décalage horizontal, le décalage vertical, le rayon de flou, le niveau de propagation des ombres et la couleur. Les deux premières valeurs – décalage horizontal et vertical – sont très claires. Les valeurs positives déplaceront l'ombre vers la droite et vers le bas, respectivement, tandis que les valeurs négatives déplaceront l'ombre vers la gauche et le haut. Regardons un exemple des deux significations :

Les deux dernières valeurs, responsables du rayon de flou et du rayon de propagation, sont un peu plus compliquées. Vous vous demandez probablement quelle est la différence ? Pour répondre à cette question, examinons d'abord celui que vous connaissez probablement déjà : le rayon de flou.

Comme vous pouvez le voir, si nous n'utilisons pas le rayon de flou, nous pourrons créer une ombre avec des bords nets, et grande importance donne des bords très flous. C'est simple, n'est-ce pas ? Alors qu’en est-il du paramètre du rayon de propagation ? Quelle est la différence ici ? Dessin mieux que mille des mots vous expliqueront la situation :

Comme vous pouvez le constater, le rayon de propagation nous permet d'augmenter ou de diminuer la zone d'ombre sans affecter son niveau de flou. Si l'on considère ce paramètre Quant à la taille de l’ombre, vous pouvez dire que vous ne pouvez pas vous tromper.

Si vous n'utilisez pas de flou et de propagation, ces valeurs par défaut resteront à 0. Si vous faites une petite recherche sur les exemples en ligne, vous remarquerez que la plupart des fichiers de démonstration n'utilisent pas l'option de propagation. Notez également qu'une version de box-shadow est généralement ajoutée avec le préfixe –webkit pour éviter les problèmes entre navigateurs.

ombre de texte

Maintenant que nous savons exactement ce que fait une ombre de boîte et ce que c'est, il est temps de passer à l'apprentissage de la syntaxe d'un autre type d'ombre CSS : text-shadow. Heureusement, la syntaxe ici est beaucoup plus simple qu'avec les ombres de boîte.

Comme vous pouvez le constater, la plupart des significations sont les mêmes, donc si vous comprenez l’une, vous comprendrez l’autre. Bien que ce qui est intéressant, c'est qu'ici, vous ne pourrez pas modifier le rayon de l'ombre. Ce serait cool si nous avions cette opportunité, mais ce n'est tout simplement pas le cas.

Ombres de bloc intégrées

Nous avons maintenant couvert les bases et vous comprenez désormais la syntaxe des ombres CSS. Il est temps d'apprendre à créer des ombres intérieures et incrustées. Afin de convertir l'ombre en une ombre en médaillon, il suffit d'ajouter le mot encart.

C'est pourquoi nous avons commencé avec une syntaxe simple. Dans l’ensemble, l’extrait de code box-shadow peut être un peu déroutant, mais une fois que vous l’aurez compris, cela semblera simple.

Ici, toutes les valeurs fonctionnent fondamentalement de la même manière, seule l'ombre est placée à l'intérieur du bloc. Dans cette image, nous pouvons voir à quel point le rayon de propagation d'une ombre peut affecter l'apparence de l'ombre :

Notez que cette fois nous avons utilisé une couleur RGBa au lieu d'une valeur HEX. C’est idéal pour les ombres car la valeur d’opacité permet d’assombrir ou d’éclaircir rapidement et facilement l’ombre.

Images

Il est assez facile d'appliquer box-shadow à un élément div vide, mais que se passe-t-il si vous souhaitez projeter une ombre sur une image ? Cela semble simple, mais c'est en réalité assez compliqué. Regardons le code et voyons le résultat qu'il produira. Commençons par une vieille balise img.

Nous allons maintenant le spécifier dans notre CSS et ajouter box-shadow. Vous pourriez penser que quelque chose comme ceci fonctionnerait :

Image (
box-shadow : encart 0px 0px 10px rgba(0,0,0,0.5);
}
Malheureusement, cela nous mènera au résultat suivant. L'image fonctionnera, mais l'ombre sera invisible !

Alors, comment appliquer une ombre intérieure à une image ? Il existe plusieurs méthodes de mise en œuvre, et elles présentent toutes leurs avantages et leurs inconvénients. Examinons les deux approches les plus populaires.

La première solution consiste à envelopper l'image dans un div de la même taille que l'image, puis à projeter une ombre sur ce div, en utilisant également positionnement relatif et z-index à l'image. Notre code ressemblera à ceci :

div(
hauteur : 200px ;
largeur : 400 px ;
}

img(
hauteur : 200px ;
largeur : 400 px ;
position : relative ;
indice z : -2 ;
}

Cette approche fonctionne, mais nécessite code supplémentaire, et beaucoup CSS supplémentaire. Alternativement, vous pouvez utiliser une image HTML et coller image de fondà Aide CSS. En utilisant cette approche, vous pouvez vous assurer que l'image ne couvrira pas l'ombre et sera placée en dessous par défaut.

div(
hauteur : 200px ;
largeur : 400 px ;
arrière-plan : url(http://lorempixum.com/400/200/transport/2) ;
box-shadow : encart 0px 0px 10px rgba(0,0,0,0.9);
}

Si nous combinons ces techniques avec une propagation assez forte, nous pouvons obtenir un vignettage d'image assez fort en utilisant uniquement CSS.

Ombre de texte intégrée

Même si la mise en œuvre des ombres de blocs intégrées est complexe, elles sont assez simples à comprendre. Entrez le mot en médaillon et votre ombre deviendra interne. C'est simple.

Malheureusement, les choses sont beaucoup plus compliquées avec les ombres de texte. La valeur d'encart est incompatible avec l'ombre du texte, donc rien ne fonctionnera ici :

Au lieu de cela, nous devons les combiner un peu. La mise en œuvre est inhabituelle, nous diviserons donc le travail en deux étapes pour mieux comprendre ce qui se passe ici. Tout d’abord, nous devons saisir le titre h1 et appliquer les styles suivants :

H1 (
couleur d'arrière-plan : #565656 ;
couleur : transparent ;
}
Et maintenant, nous nous trouvons déjà dans une situation étrange. Nous avons exposé couleur sombre arrière-plan, ombre de texte blanc et Couleur transparente remplit. Si cela vous semble étrange, regardez le résultat :

Ce n’est pas du tout ce dont nous avions besoin. Ce qui est intéressant, c'est que nous revenons au tout début. L'ingrédient secret qui fait que tout fonctionne est le paramètre background-clip défini sur text.

H1 (
couleur d'arrière-plan : #565656 ;
couleur : transparent ;
texte-ombre : 0px 2px 3px rgba(255 255 255,0,5);
-webkit-background-clip:texte;
-moz-background-clip : texte ;
clip d'arrière-plan : texte ;
}
En définissant le paramètre background-clip sur text, nous pouvons exprimer efficacement tout ce qui se passe en arrière-plan (images, dégradés, couleurs, etc.) le long du contour du texte. Lorsque nous faisons cela en utilisant le code que nous avons déjà créé, le résultat est le suivant :

Comme vous pouvez le constater, nous avons obtenu un très bel effet. Bords flous ont été découpés et créent maintenant la sensation d'une ombre incrustée. Pendant ce temps, text-shadow nous donne la possibilité de définir le niveau de luminosité de l'arrière-plan et crée également un léger effet de relief à l'extérieur du texte. Si nous modifions la valeur de l'ombre de 0,5 à 0,3, le texte deviendra plus sombre.

Prise en charge du navigateur

Si vous souhaitez utiliser des approches avec différents paramètres étranges comme background-clip, vous devez alors savoir où cela fonctionnera et où cela ne fonctionnera pas. Comme toujours, en ce qui concerne la prise en charge des navigateurs, nous nous tournons vers .

D'après ce tableau, le paramètre background-clip fonctionne plutôt bien dans la plupart des navigateurs. Même IE9 le prend en charge ! Vous pourriez rencontrer des problèmes avec certains navigateurs obsolètes.

Conclusion

Vous savez maintenant ce que vous devez savoir sur les ombres incrustées en CSS. C'est un domaine très intéressant à explorer. Il est peu probable que toutes les approches soient intuitives et leur maîtrise prendra un certain temps. Dites-nous ce que vous pensez des solutions proposées et laquelle utilisez-vous ?

La propriété CSS box-shadow vous permet de définir une ombre élément HTML. Il est assez souvent utilisé par les concepteurs de sites Web pour décorer et mettre en valeur des cadres avec du texte, des images et rendre le contenu plus lisible.

Syntaxe CSS box-shadow

... box-shadow : X Y R1 R2 couleur ; ...

• X - décalage le long de l'axe X (horizontal)
• Y - décalage le long de l'axe Y (vertical)
• R1 - flou (que plus de valeur, plus la transition est douce)
• R2 - rayon d'extension (si positif, il s'étire, négatif, il se comprime)
• couleur - couleur (peut être spécifiée dans n'importe quel format : #RGB, nom de la couleur)
• encart - si cette valeur est présente, l'ombre sera située à l'intérieur du bloc (élément)

Exemple 1. Cadre HTML avec box-shadow sans décalage

Vous trouverez ci-dessous la manière la plus simple d'utiliser une ombre avec la propriété CSS box-shadow sur page HTML lorsqu'il s'écoule uniformément sur tout le cadre sans déplacement.

Exemple n°1. Cadre avec ombre

Exemple n°1. Cadre avec ombre

Exemple 2. Cadre HTML avec décalage shadow box-shadow

Presque le même exemple que le premier, mais uniquement avec le cadre décalé.

Exemple n°2. Cadre avec ombre décalée

La page se convertit comme suit

Exemple n°2. Cadre avec ombre décalée

Exemple n°3. Cadre lumineux HTML

Implémenter une ombre comme une lueur

Exemple n°3. Briller

La page se convertit comme suit

Exemple n°3. Briller

Exemple 4. Lueur intérieure de la bordure HTML

Une lueur qui est dirigée à l’intérieur du bloc et ne dépasse pas ses limites. L'effet est créé à l'aide de l'attribut inset.

Exemple n°4. Lueur intérieure

La page se convertit comme suit

Exemple n°4. Lueur intérieure

Exemple 5. Combiner des ombres en HTML

L'effet d'ombre peut être combiné en les séparant par des virgules. Dans ce cas, des résultats très intéressants se forment. Par exemple, vous pouvez créer un cadre multicolore en style 3D.

Exemple n°5. Combiner les ombres

La page se convertit comme suit

Exemple n°5. Combiner les ombres

Remarque : anciens navigateurs

Les versions d'IE antérieures à 9 ne prennent pas en charge box-shadow. Préfixes de navigateur pour box-shadow

• -webkit-box-shadow - pour Chrome jusqu'à 10, Safari jusqu'à 5.1, Android jusqu'à 4 et iOS jusqu'à 5
• -moz-box-shadow - pour Firefox jusqu'à la version 4.0

Les ombres régulières sont faciles à mettre en œuvre en utilisant box-shadow ou text-shadow. Mais que se passe-t-il si vous avez besoin de créer des ombres internes ? Cet article décrit comment créer ces ombres avec seulement quelques lignes de code.

Syntaxe

Tout d'abord, examinons les deux principales manières d'implémenter les ombres en CSS.

boîte ombre

Conception boîte ombre contient plusieurs significations différentes :

Décalage horizontal Et décalage vertical- déplacement horizontal et vertical, respectivement. Ces valeurs indiquent dans quelle direction l'objet projettera son ombre :

Rayon de flou Et rayon de propagation un peu plus compliqué. Quelle est la différence? Regardons un exemple avec deux éléments, où les valeurs rayon de flou différer:

Le bord de l’ombre est simplement flou. Avec des valeurs différentes rayon de propagation nous voyons ce qui suit :

Dans ce cas, on voit que l’ombre est dispersée sur une grande surface. Si vous ne spécifiez pas de valeur rayon de flou Et rayon de propagation, alors ils seront égaux à 0.

ombre de texte

La syntaxe est très similaire à boîte ombre:

Les significations sont similaires, mais pas ombre étendue. Exemple d'utilisation :

Encart dans l'ombre de la boîte

Pour « retourner » l'ombre à l'intérieur de l'objet, vous devez ajouter encart en CSS :

Une fois que vous avez compris la syntaxe de base de l'ombre de la boîte, il est très facile de comprendre comment implémenter les ombres internes. Les valeurs sont toujours les mêmes, vous pouvez ajouter de la couleur (RVB en hexadécimal) :

La couleur est au format RVB, la valeur alpha est responsable de la transparence de l'ombre :

Images avec des ombres

Ajouter une ombre intérieure à une image est un peu plus difficile que d'ajouter une ombre ordinaire div. Pour commencer, voici le code image habituel :

Il est logique de supposer que vous pouvez ajouter une ombre comme ceci :

Img ( box-shadow: encart 0px 0px 10px rgba(0,0,0,0.5); )

Mais l'ombre n'est pas visible :

Il existe plusieurs façons de résoudre ce problème, chacune ayant ses avantages et ses inconvénients. Examinons-en deux. La première consiste à envelopper l'image dans un format régulier div:

Div ( hauteur : 200px ; largeur : 400px ; box-shadow : encart 0px 0px 10px rgba(0,0,0,0.9); ) img ( hauteur : 200px ; largeur : 400px ; position : relative ; z-index : -2 ; )

Tout fonctionne, mais nous devons ajouter un peu de balisage HTML et CSS supplémentaire. La deuxième façon consiste à définir l'image comme arrière-plan du bloc souhaité :

Div ( hauteur : 200 px ; largeur : 400 px ; arrière-plan : url(http://lorempixum.com/400/200/transport/2) ; box-shadow : encart 0px 0px 10px rgba(0,0,0,0.9) ; )

Voici ce qui peut arriver lors de l’utilisation d’ombres intérieures :

Encart dans l'ombre du texte

Pour implémenter une ombre de texte interne, ajoutez simplement au code encart ne marche pas:

Pour résoudre, appliquez d'abord à l'en-tête h1 Définissez un arrière-plan sombre et une ombre claire :

H1 ( couleur d'arrière-plan : #565656 ; couleur : transparent ; ombre du texte : 0px 2px 3px rgba(255,255,255,0.5); )

Voici ce qui se passe :

Ajouter un ingrédient secret clip d'arrière-plan qui coupe tout ce qui dépasse du texte (sur fond sombre) :

H1 ( couleur d'arrière-plan : #565656 ; couleur : transparent ; ombre de texte : 0px 2px 3px rgba(255,255,255,0.5) ; -webkit-background-clip : texte ; -moz-background-clip : texte ; background-clip : texte ; )

Il s’est avéré presque exactement ce dont nous avions besoin. Maintenant, nous assombrissons juste un peu le texte (alpha), et le résultat est :