La typographie est mon jouet préféré en matière de conception de sites Web. Bien sûr, avec son aide, vous pouvez attirer l’attention d’une personne en modifiant légèrement le style ou la taille de la police. Très simple et très efficace ; de nombreux livres ont été écrits sur ce sujet et de nombreux exemplaires ont été brisés lors de disputes. Aujourd'hui, je ne donnerai pas de conseils sur la typographie en général - je n'ai pas assez de qualifications, mais comment concevoir le texte de votre site Web est toujours la bienvenue. Aujourd'hui, je vais vous montrer quelques façons d'utiliser la propriété CSS3. ombre de texte, très simple, mais entre de bonnes mains, cela peut faire des merveilles.

Syntaxe de base texte-ombre

Cette propriété CSS3 Fonctionne dans tous les derniers navigateurs, sans préfixes de fournisseur tels que -moz et -webkit. Même IE peut apprendre à comprendre cette propriété ; vous devez utiliser Modernizr ou des analogues.

Text-shadow : couleur de flou de décalage x et y ;

C'est toute la syntaxe de base. La première valeur est le décalage horizontal, la seconde est le décalage vertical, le flou de l'ombre et la couleur de l'ombre. Regardons un exemple :

Ombre du texte : 2px 4px 3px rgba(0,0,0,0.3);

Nous avons déplacé l'ombre, l'avons floutée de 3 pixels et attribué la couleur noire avec une transparence de 30 %. Pourquoi utiliser le canal alpha ou la transparence ? Cela vous donne plus de liberté dans vos actions ; vous pouvez le rendre un peu plus clair ou plus foncé simplement en changeant la valeur de transparence, sans avoir à vous soucier du choix d'une couleur. Cela s'avère assez rapide, je le recommande.

Lettres déprimées

corps ( arrière-plan : #222 ; ) #text h1 ( couleur : rgba(0,0,0,0.6); ombre du texte : 2px 2px 3px rgba(255,255,255,0.1); )

Le principe de fonctionnement ici est le suivant : le fond est légèrement plus clair que les lettres, une ombre légère avec une légère transparence. Le résultat est dans l'image, essayez-le.

Ombre dure

texte-ombre : 6px 6px 0px rgba(0,0,0,0.2);

De nos jours, le style rétro est à la mode et ils utilisent l'ombre sans flou. Eh bien, nous sommes prêts pour ça

Double ombre

texte-ombre : 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Et ici, une autre fonctionnalité délicate de la propriété est utilisée ombre de texte, les sélecteurs peuvent être répertoriés séparés par des virgules, créant ainsi autant d'ombres que nécessaire. La première ombre peut se voir attribuer une couleur similaire à celle de l'arrière-plan, l'effet sera alors celui de l'image.

Vers le bas et loin

texte-ombre : 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );

Le texte est volumineux et semble suspendu au-dessus de l’arrière-plan, n’est-ce pas ? Ici, nous utilisons 4 ombres avec différents niveaux de flou et d'emplacement. En général, plus on utilise d'ombres, plus l'effet est réaliste ; tenez-en compte dans vos projets.

Petit texte 3D

texte-ombre : 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Semblable à l'exemple précédent, trois ombres, mais situées plus près, d'où l'effet de tridimensionnalité et de poids du texte.

Texte 3D de Mark Dotto

texte-ombre : 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Je suis tombé sur le travail de ce designer en ligne et je ne pouvais pas le laisser passer. Un réalisme impressionnant.

Texte en retrait de Gordon Hall

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

Un autre exemple de travail impressionnant avec la propriété ombre de texte. Mais le principe est le même que celui que j'ai dit plus haut. Fond légèrement plus clair, ombre claire en dessous des lettres et sombre au dessus. Fait simplement, mais très cool.

Texte brillant

texte-ombre : 0px 0px 6px rgba(255 255 255,0,7);

Ici aussi, tout est simple : on ne déplace pas l'ombre, on la floute plus fortement et on la rend blanche. C'est tout l'éclat.

Style rétro

texte-ombre : -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd ;

J'ai parlé plus haut du style rétro, cela vient du même opéra. C'est tellement à la mode maintenant, plusieurs ombres claires. Utilisez à votre propre discrétion

Plusieurs sources de lumière

texte-ombre : 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Voici l'effet de plusieurs sources lumineuses qui donnent des ombres dans toutes les directions.

Texte en relief

couleur : rgba(0,0,0,0,6) ; texte-ombre : 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3) ;

Le texte déprimé était déjà là, mais maintenant il est relevé. Un effet assez simple, mais qui fait la une des journaux par exemple. Utilisez-le, essayez-le

En conclusion, je veux dire - Propriété CSS3 text-shadow très simple, comme vous pouvez déjà le voir. Mais son utilisation appropriée, et avec un peu d’imagination, peut faire des merveilles.
Expérimentez, passez une bonne journée

Même le designer le plus vert sait comment créer des ombres dans Photoshop. Les ombres ajoutent de la dimension au design et sont désormais très populaires. Les ombres des textes, des éléments de menu et des titres ne font pas exception. Il suffit de rappeler le design des interfaces d'Apple

Il sera utile d'avoir des compétences pour travailler avec les ombres de texte dans votre arsenal de techniques.

Tâche

Créez une ombre pour le texte en utilisant CSS, sans utiliser d'images. Qu’allons-nous réaliser avec cela ?

• flexibilité - aucune image requise, le texte est facile à modifier
• vitesse - moins d'images - moins de poids de page, moins d'appels au serveur
• SEO - le texte est mieux optimisé que les images et est plus fiable que l'utilisation de la technique de remplacement du texte par une image

Ombres de texte pour les navigateurs normaux

Les navigateurs normaux incluent tous les navigateurs modernes qui suivent plus ou moins les recommandations du W3C. Dans ce cas, ces navigateurs comprennent la propriété CSS3 text-shadow, recommandée en 2003.

Voici donc une liste de navigateurs prenant en charge la propriété text-shadow :

• Safari 3.1 (Mac/Win) - prend en charge, ne prend pas en charge plusieurs ombres
• Safari 4 (Mac/Win) - entièrement pris en charge
• Opera 9.5+ (Mac/Win/Lin) - prend entièrement en charge
• Firefox 3.1/3.5 (Mac/Win/Lin) - prend entièrement en charge
• Google Chrome 2 (Win) - entièrement pris en charge
• Shiira (Mac) - prend en charge, ne prend pas en charge plusieurs ombres
• Konqueror (Lin/Mac/Win) - prend entièrement en charge
• iCab (Mac) - prend en charge, ne prend pas en charge plusieurs ombres
• Safari sur iPhone - pris en charge, plusieurs ombres non prises en charge
• Smartphones Nokia Symbian (série 60) - prend en charge
• Opera Mini 4.1 - prend en charge, ne prend pas en charge le flou d'ombre

Pour ces navigateurs, une seule ligne de CSS suffit pour masquer le texte :

H1 (texte-ombre : 0px 1px 3px #000; )

Nous obtenons ce titre fantaisiste :

Vous pouvez obtenir une variété d’effets intéressants avec text-shadow.

Texte flou

H1 ( couleur : #fff ; arrière-plan : #666 ; ombre du texte : 0px 0px 3px #fff; )

Texte en double

H1 (texte-ombre : 0px 20px #000; )

Plusieurs ombres vous permettent d'obtenir plusieurs effets supplémentaires :

Texte en retrait

H1 (arrière-plan : #ccc ; couleur : #ccc ; ombre du texte : -1px -1px #666, 1px 1px #FFF ; famille de polices : serif ; )

Texte en relief

H1 (arrière-plan : #999 ; couleur : #999 ; ombre du texte : 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF ; famille de polices : serif ; )

(IE ne vous permettra pas de profiter de la beauté ici, car il ne prend pas en charge text-shadow). Vous pouvez créer de nombreux effets différents en utilisant Text-Shadow, la seule limite pratique est votre imagination.

Maintenant, ce qui est triste : que faire de l'IE « préféré » de tout le monde ?

Ombres de texte dans IE

Bien qu'IE jusqu'à la version 8 ne comprenne pas text-shadow, il possède de nombreuses fonctionnalités propres. Il existe notamment un filtre dropShadow() pour créer des ombres. Pour que les ombres apparaissent, l'élément doit avoir un jeu de mise en page. Vous pouvez installer de plusieurs manières :

• en définissant les propriétés de l'élément : block + height() ou width())
• donnant l'élément : absolu
• en précisant : gauche/droite
• réglage du zoom : 1

H1 ( filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); zoom : 1; )

Il semblait qu’on pouvait crier « Hourra !!! » et profitez de la vie, mais regardez comment ce filtre fonctionne en réalité :

Voici comment le texte apparaîtra si vous lui appliquez le filtre dropShadow

Pour ceux qui ne comprendraient pas, voici les inconvénients de ce filtre :

• l'ombre a l'air terrible : angulaire, pas de transition douce vers l'arrière-plan avec translucidité
• le style de police est déformé
• l'ombre est pratiquement impossible à ajuster (vous ne pouvez contrôler que la position de l'ombre) - cela peut être partiellement contourné en utilisant le filtre d'ombre au lieu de dropShadow, mais les deux premiers inconvénients critiques demeurent
• la présence obligatoire d'une mise en page limite quelque peu le développeur

Ce résultat n'est pas acceptable dans des projets réels. On ne sait pas qui et comment a repris ce travail des développeurs.

Kilian Valkhof a suggéré d'utiliser l'émulation fantôme :

1. ne pas appliquer le filtre directement sur le texte
2. utilisez une combinaison de filtres de lueur et de flou au lieu de dropShadow et d'ombre

Cela évitera la distorsion du texte et rendra l'ombre plus flexible.

En-tête de testТестовый заголовок

H1 (text-shadow : 3px 3px 3px #cccccc ; position : relative ; zoom : 1 ; couleur : #000 ; ) h1 span ( position : absolue ; gauche : -3px ; haut : -3px ; z-index : -1 ; filtre : progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, activé="true") ; zoom : 1; )

Mais même avec cette approche, il existe encore un certain nombre d'inconvénients :

• le code non sémantique est un élément supplémentaire, et même avec la duplication de texte, il n'aura pas le meilleur effet sur la structure logique du contenu et l'optimisation du référencement. Ce problème peut être résolu en utilisant javascript, qui insérera un élément supplémentaire pour IE lors du chargement de la page.
• ne correspond pas à l'affichage dans les autres navigateurs (qui comprennent text-shadow) - les filtres vous permettent d'émuler une ombre avec des paramètres minimaux. Il n'est pas toujours possible d'obtenir une similitude d'ombre avec d'autres navigateurs
• moins de flexibilité - les filtres ne fourniront pas toutes les capacités de text-shadow, par exemple, il ne sera pas possible d'implémenter plusieurs ombres

Pour créer des ombres pour IE, vous pouvez utiliser javascript (ce n'est pas la première fois que javascript sauve la situation)

Ombres de texte en utilisant javascript

Parmi les scripts que j'ai testés, j'ai choisi le plugin jquery "Drop Shadow". Ses avantages :

• émule les ombres en insérant plusieurs conteneurs, c'est-à-dire sans utiliser de filtres pour IE. Cela permet de rendre les ombres dans IE aussi similaires que possible à celles des autres navigateurs + pas besoin de s'inquiéter de la mise en page pour IE
• crée des ombres non seulement pour IE, ce qui peut parfois être utile
• le script est léger - 4 Ko (si vous supprimez les commentaires du code), et si vous appliquez une compression, ce sera encore moins. Il y a des exigences lors de l'écriture d'un script - la présence du script jquery.dimensions.js, mais je ne comprends toujours pas pourquoi il est nécessaire. Les ombres sont créées, supprimées, définies par identifiant et sans celui-ci.
• simple et clair à utiliser
• Vous pouvez émuler plusieurs ombres avec un certain succès

Défauts:

• vous ne pouvez pas initialiser un script par identifiant d'élément
• si l'élément reçoit un arrière-plan, l'ombre sera créée non pas pour le texte, mais pour l'élément dans son ensemble
• Inclusion obligatoire de la bibliothèque jquery (qui fait plus de 50 Ko). Mais la popularité de jquery élimine pratiquement cet inconvénient
• Selon la description du script, la connexion de jquery.dimensions.js (2 Ko supplémentaires) est également requise. Mais je ne comprends pas pourquoi cette bibliothèque est nécessaire, tout semble bien fonctionner sans elle

Utiliser le plugin Drop Shadow

Syntaxe:

JQuery(sélecteur).dropShadow(options); // création d'une ombre sur l'élément jQuery(selector).redrawShadow(); // redessiner l'ombre jQuery(selector).removeShadow(); // suppression de l'ombre jQuery(selector).shadowId(); // renvoie l'identifiant de l'ombre de l'élément

Gauche : [entier] (par défaut = 4) haut : [entier] (par défaut = 4) flou : [entier] (par défaut = 2) opacité : [nombre fractionnaire] (par défaut = 0,5) couleur : [chaîne] (par défaut = " black") swap : [booléen] (par défaut = faux)

Les paramètres gauche et haut sont les coordonnées du début de l'ombre par rapport au coin supérieur gauche de l'étiquette (ou de l'objet). Les valeurs positives déplacent l'ombre vers la droite et vers le bas, les valeurs négatives déplacent l'ombre vers la gauche et vers le haut.

Vlad Merjevitch

À une certaine époque, il y avait une certaine mode pour le texte avec des ombres et un effet similaire pouvait être trouvé sur presque tous les sites Web. Dans un éditeur graphique, ajouter une ombre est simple, ça a fière allure, voici le texte avec une ombre et poussé sur les pages web, quel que soit le style du site et le sens des proportions du concepteur. Lorsque la plupart des navigateurs ont commencé à prendre en charge la propriété de style text-shadow, la mode était déjà passée et désormais, le texte avec une ombre est assez rare. Cependant, text-shadow a un certain nombre d'autres utilisations implicites que peu de gens soupçonnent. En utilisant cette propriété, vous pouvez créer du texte de contour, « l’extruder », créer une lueur, un flou et bien plus encore.

Utiliser l'ombre du texte

Quatre paramètres sont écrits sous forme de valeurs : la couleur de l'ombre, le déplacement horizontal et vertical et le rayon de flou de l'ombre (Fig. 1).

Riz. 1. Paramètres d'ombre de texte

La couleur peut être écrite au début ou à la fin de tous les paramètres dans n'importe quel format CSS approprié. Vous pouvez donc réaliser une ombre translucide en utilisant le format rgba. Les valeurs de décalage positives projettent l'ombre vers la droite et vers le bas, tandis que les valeurs de décalage négatives projettent l'ombre vers la gauche et vers le haut, respectivement. Pour avoir une ombre autour du texte, il suffit de mettre les valeurs de décalage à zéro. Le rayon de flou définit la netteté de l'ombre. Plus le rayon de flou est grand, plus l’ombre paraît douce.

Un gros avantage de text-shadow est la possibilité d'ajouter plusieurs ombres différentes à la fois, en répertoriant leurs paramètres séparés par des virgules. Cette fonctionnalité vous permet essentiellement de créer différents effets.

Malheureusement, IE avant la version 10.0 ne prend pas en charge text-shadow , nous ne verrons donc aucune beauté dans ce navigateur.

Le texte de plan se caractérise par le fait que chaque lettre est entourée d'une ligne dont la couleur diffère de la couleur du texte (Fig. 2). Cet effet est optimal avec des polices de grande taille, telles que des titres. Pour le corps du texte, l’utilisation d’un plan ne fait que nuire à la lisibilité.

Riz. 2. Texte de plan

Un contour peut être créé en utilisant deux méthodes. Dans la première méthode, nous définissons un décalage d'ombre nul et un petit rayon de flou, littéralement 1 à 2 pixels (exemple 1). L'augmentation de la valeur de flou transforme le contour en une lueur autour du texte, ce qui constitue un effet différent.

Exemple 1 : texte de plan

Texte de plan

Le contour réalisé par cette méthode est montré sur la Fig. 1. Le contour s'avère légèrement flou, donc pour ceux qui souhaitent obtenir une ligne claire, la deuxième méthode est destinée. Il consiste à utiliser quatre ombres nettes de la même couleur, elles sont décalées sous des angles différents d'un pixel (exemple 2).

Exemple 2. Quatre ombres pour le contour

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Texte de plan

L’apparence d’un tel contour est montrée sur la Fig. 3. On remarque que le contour est plus expressif.

Riz. 3. Contour avec quatre ombres

Pour ajouter l'effet de texte 3D illustré à la Fig. 4, plusieurs ombres sont appliquées simultanément, qui sont décalées les unes par rapport aux autres d'un pixel horizontalement et verticalement.

Riz. 4. Texte 3D

Personnellement, ce type de texte me rappelle le lettrage de style rétro et, encore une fois, il convient mieux aux titres qu'au corps d'une page Web.

Le nombre d'ombres dépend de la mesure dans laquelle vous souhaitez « tirer » le texte vers l'avant. Un nombre plus grand augmente la « profondeur » des lettres, un nombre plus petit, au contraire, réduit la tridimensionnalité. L'exemple 3 utilise cinq ombres de la même couleur.

Exemple 3 : Ombre pour ajouter de la tridimensionnalité

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Réfrigérateur à dix chambres

Pour toutes les ombres, nous définissons le rayon de flou sur zéro et la même couleur. Les ombres diffèrent uniquement par leurs valeurs de décalage.

Gaufrage de texte

Pour créer un effet de gaufrage de texte ou, en d'autres termes, de relief, la couleur du texte doit correspondre à la couleur de fond. Une partie des lettres « dépassant » de la surface semble éclairée, tandis que l’autre partie est dans l’ombre (Fig. 5).

Riz. 5. Texte en relief

Pour ajouter un effet similaire, nous avons besoin de deux ombres - nous déplaçons l'ombre blanche d'un pixel vers la gauche et l'ombre gris foncé vers la droite (exemple 4).

Exemple 4 : Texte en relief

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Texte en relief

Le relief est plus beau sur un fond gris, l'effet ne convient donc pas à toutes les palettes de couleurs du site. À propos, il est plus facile d’appuyer sur du texte que d’extruder ; il suffit d’échanger les couleurs des ombres.

Texte-ombre : #333 -1px -1px 0, #fff 1px 1px 0 ;

Briller

La lueur autour du texte est la même ombre, mais elle est lumineuse et contrastée. Ainsi, pour créer un effet lumineux, changez simplement la couleur de l'ombre et définissez le rayon de flou souhaité. Étant donné que la lueur autour du texte doit être uniforme, le décalage de l'ombre doit être défini sur zéro. En figue. La figure 6 montre un exemple de lueur de différentes couleurs.

Riz. 6. Texte lumineux

Exemple 5. Lueur

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Côté lumineux

Côté obscur

Se brouiller

L'ombre elle-même est floue, donc si nous laissons uniquement l'ombre et masquons le texte lui-même, nous obtiendrons des lettres floues (Fig. 7) et le degré de flou peut être facilement ajusté à l'aide du paramètre text-shadow.

Riz. 7. Texte flou

Pour masquer le texte original, définissez simplement la couleur sur transparent (exemple 6). La couleur de l'ombre fait alors office de couleur du texte et le rayon de flou définit le degré de flou des lettres.

Exemple 6 : texte flou

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Texte flou

Ombre et pseudo-classes

L'ombre n'a pas besoin d'être ajoutée directement au texte ; la propriété text-shadow joue bien avec les pseudo-classes :hover et :first-letter. De ce fait, des effets intéressants sont obtenus avec le texte, tels que la première lettre profilée d'un paragraphe ou la lueur d'un lien lorsque vous passez le curseur de la souris dessus. L'exemple 7 montre de telles techniques.

Exemple 7 : Utilisation de pseudo-classes

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Un projet de niche ralentit le canal traditionnel, quels que soient les coûts. La structure du marché, en ignorant les détails, stabilise le service marketing et commercial, en utilisant l'expérience des campagnes précédentes. Bien entendu, la construction d’une marque repousse spontanément les relations publiques convergentes et conquiert un segment de marché. L'investissement synchronise le statut social, augmentant la concurrence. La marque détermine naturellement le plan de placement, en s'appuyant sur l'expérience des campagnes précédentes.

Une autre façon de décorer une page Web consiste à créer du texte avec une ombre en CSS. En utilisant correctement ce style, vous pouvez réussir à mettre en évidence un titre, un paragraphe ou une partie du texte. Vous pouvez ajuster la couleur de l'ombre, le décalage et le flou.

Vous pouvez définir une ombre de texte en CSS à l'aide de la propriété text-shadow, qui est prise en charge par tous les navigateurs à l'exception d'Internet Explorer version 9 et antérieure. Il existe également des problèmes avec Opera Mini - ce navigateur ne prend en charge que partiellement la propriété. Vous trouverez ci-dessous un exemple de style d'écriture et de valeurs de propriété :

H1 (texte-ombre : 3px 5px 6px #6C9; )

Comme vous pouvez le constater, nous avons spécifié jusqu'à quatre valeurs séparées par un espace. Passons-le dans l'ordre :

• 3px – la première valeur est responsable du décalage de l'ombre le long de l'axe X (droite, gauche). Une valeur positive déplace l'ombre vers la droite et une valeur négative la déplace vers la gauche.
• 5px – la deuxième valeur est responsable du décalage de l'ombre le long de l'axe Y (bas, haut). Une valeur positive déplace l’ombre vers le bas et une valeur négative la déplace vers le haut.
• 6px – la troisième valeur est responsable du rayon de flou de l’ombre. Ce paramètre est facultatif. Par défaut, le flou est de 0 pixel, ce qui rend l'ombre claire et non floue.
• #6c9 – la quatrième valeur est responsable de la couleur de l'ombre. Ce paramètre est facultatif. Par défaut, la couleur de l'ombre est définie sur la même couleur que le texte auquel le style est appliqué.

À quoi ressemble l'ombre dans le navigateur (capture d'écran) :

Capture d'écran : texte avec ombre, CSS

Plusieurs ombres CSS pour le texte

Il est également possible d'utiliser plusieurs groupes de valeurs pour la propriété text-shadow. Cela signifie que vous pouvez définir plusieurs ombres pour un même texte. Pour ce faire, vous devez écrire des groupes de valeurs séparés par des virgules.

H1 ( texte-ombre : 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Le résultat de l'application de ce style est visible dans la capture d'écran :

Capture d'écran : Plusieurs ombres pour le texte CSS

Vous pouvez créer de très belles choses avec la propriété CSS text-shadow. Vous pouvez expérimenter : définir un grand nombre d'ombres différentes, définir la couleur non seulement au format hexadécimal, mais également au format RGBA, en utilisant le canal alpha pour ajuster la transparence. Voici ce qui peut arriver si vous prêtez suffisamment d’attention à cette propriété :

Capture d'écran : ombre de texte 3D en CSS

La typographie est le jouet préféré des webdesigners. CSS a un outil très intéressant - ombre de texte(ombre de texte), qui à première vue semble assez simple, mais avec son aide, vous pouvez créer des effets mémorables si vous faites preuve d'ingéniosité et d'imagination.

Bases de l'ombre

Propriété ombre de texte très facile à utiliser. Il est pris en charge par tous les navigateurs modernes et même sans utilisation de préfixes. Mais il n'y a pas de support dans IE (même dans IE9). Vous pouvez utiliser des outils comme Modernizr pour vous aider à extraire les effets CSS3, même sur les anciennes versions d'IE.

Syntaxe

Pour créer une ombre de texte, utilisez la syntaxe de propriété ombre de texte qui est donné ci-dessous. Il y a quatre paramètres à définir : les deux premiers définissent la position de l'ombre, le troisième définit le niveau de flou et le quatrième détermine la couleur de l'ombre.

Text-shadow : horizontal_offset vertical_offset couleur de flou ;

Vous trouverez ci-dessous un exemple d'ombre de texte décalée de deux pixels vers le bas et de quatre pixels vers la droite, floue de trois pixels et définie sur noir avec une opacité de 30 %.

Ombre du texte : 2px 4px 3px rgba(0,0,0,0.3);

Le résultat de l’utilisation de cette propriété ressemblera à ceci :

Pourquoi le rgba est-il utilisé ?

Vous n'avez pas besoin d'utiliser rgba pour spécifier la couleur de l'ombre lors de la définition d'une propriété. Cependant, rgba ajoute une autre dimension lors de la définition d'une ombre : le niveau de transparence.

Cette méthode est beaucoup plus simple que les autres méthodes de détermination de la couleur. Vous n'avez pas besoin de vous concentrer sur la détermination de la nuance de la couleur de l'ombre, qui peut être légèrement plus foncée ou plus claire que la couleur d'arrière-plan. Avec le rgba, vous pouvez simplement utiliser du blanc ou du noir et augmenter leur opacité pour obtenir la couleur de fond souhaitée lors du mélange des couleurs.

Utiliser la propriété ombre de texte Vous pouvez créer divers effets pour le texte, sans se limiter à de simples ombres portées. Par exemple, voici le code pour créer l’illusion d’un texte déprimé.

Vous devez d’abord définir la couleur du texte un peu plus foncée que la couleur d’arrière-plan. Et puis vous devez utiliser la propriété ombre de texte avec une couleur blanche et une transparence accrue.

La couleur d'arrière-plan est #222 et la couleur du texte est définie sur une opacité de 60 %. L'ombre blanche est positionnée légèrement vers le bas et vers la droite avec un niveau d'opacité de 10 %.

Corps ( arrière-plan : #222 ; ) #text h1 ( couleur : rgba(0,0,0,0.6); ombre du texte : 2px 2px 3px rgba(255,255,255,0.1); )

Il n’est pas du tout nécessaire de brouiller l’ombre. Une ombre claire peut bien se marier avec la conception d’un site Web.

Ombre du texte : 6px 6px 0px rgba(0,0,0,0.2);

Le vrai plaisir commence lorsque vous supprimez la limitation d’avoir une seule ombre. En utilisant une virgule pour séparer les définitions, vous pouvez utiliser autant d’ombres que nécessaire !

Texte-ombre : shadow1, shadow2, shadow3 ;

Voici un exemple d'utilisation de deux ombres. Le premier a la même couleur que le fond.

Ombre de texte : 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Décalage vers le bas longue distance

Une fois que vous aurez pris l’habitude d’utiliser plusieurs ombres, les résultats deviendront de plus en plus spectaculaires. Il est très simple de créer un effet 3D pour du texte.

L'exemple utilise quatre ombres, toutes décalées vers le bas à des distances différentes et floues.

Ombre de texte : 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );

Descendez sur une petite distance et floutez fortement

Voici une autre incarnation de la même idée. Les trois ombres sont décalées sur une distance plus petite et sont plus floues.

Ombre de texte : 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1) ;

Texte 3D de Mark Dotto

L'effet est utilisé sur le site MarkDotto.com. Il utilise 12 ombres différentes pour créer un superbe effet 3D.

Ombre de texte : 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Texte en retrait de Gordon Hall

Remarquez que dans l'exemple ci-dessus, j'ai appelé ma technique l'effet typographique « rapide et sale ». C’est parce qu’il existe une manière beaucoup plus complexe de créer un texte sérieusement incrusté et beaucoup plus crédible.

Gordon utilise du vaudou CSS sérieux pour créer non seulement une ombre extérieure, mais également une véritable ombre intérieure. Consultez son article de blog pour une explication complète de la technique.

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

Briller

Ombre de texte : 0px 0px 6px rgba(255 255 255,0,7) ;

Ombre de texte : -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd ;

Plusieurs sources de lumière

Ombre de texte : 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Couleur : rgba (0,0,0,0,6) ; texte-ombre : 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3) ;

Conclusion

Comme la plupart des effets CSS, les ombres sont très simples à mettre en œuvre. Mais une combinaison d’actions simples peut produire des effets étonnants.