Vlad merzehevich

À une fois, le texte avec l'ombre était une mode définie et un tel effet pourrait être trouvé presque sur n'importe quel site. DANS éditeur graphique Shadow est ajouté simplement, il a fière allure, voici le texte avec une ombre et cueillie sur la page Web, quel que soit le style du site et le sentiment d'une mesure de concepteur. Lorsque la plupart des navigateurs sont devenus amicaux de maintenir la propriété de style du Text-Shadow, la mode est déjà passée et le texte avec l'ombre est assez rare. Cependant, Text-Shadow a un certain nombre d'autres moyens d'application implicites que peu de gens soupçonnent. Avec cette propriété, vous pouvez faire un texte de contour, le "presser", créer une lueur, une flou et bien plus encore.

Utilisation de Text-Shadow

Quatre paramètres sont écrits comme des valeurs: la couleur de l'ombre, le décalage horizontalement et la verticale et le rayon de l'ombre de l'ombre (Fig. 1).

Figure. 1. Paramètres SMS-Shadow

La couleur est autorisée à écrire au début ou à la fin de tous les paramètres de tout format CSS approprié. Vous pouvez donc faire une ombre translucide à travers le format RGBA. Valeurs de déplacement positives "Jeter" l'ombre à droite et à la baisse, et négative, respectivement, gauche et en hausse. Pour faire de l'ombre autour du texte, il suffit de définir des valeurs de déplacement zéro. Le rayon de flou établit combien l'ombre est tranchante. Plus le rayon de flou est grand, le plus doux ressemble à une ombre.

Une textuelle de grande taille est la possibilité d'ajouter plusieurs ombres différentes à la fois en levant leurs paramètres à travers la virgule. Cette fonctionnalité est principalement et vous permet de faire des effets différents.

Malheureusement, c'est-à-dire à la version 10.0 ne prend pas en charge SMS-Shadow, de sorte que dans ce navigateur, nous ne verrons aucune belle-beauté.

Le texte du contour est caractérisé par le fait que chaque lettre entourera une ligne, dont la couleur est différente de la couleur du texte (fig. 2). Il est préférable que cet effet ressemble à une police hachée de grande taille, par exemple des titres. Pour le texte principal, l'application du circuit n'investit que la lisibilité.

Figure. 2. Texte de coupe

Le contour peut être créé en deux méthodes. Dans la première méthode, nous établissons le changement zéro de l'ombre et un petit rayon de son flou, littéralement, 1-2 pixels (exemple 1). L'augmentation de la valeur de flou transforme le contour dans la lueur autour du texte et c'est un autre effet.

Exemple 1. Texte de contour

Texte de coupe

Le contour fait par cette méthode est montré à la Fig. 1. Le contour est légèrement flou, donc pour ceux qui veulent avoir une ligne claire, la deuxième méthode est destinée. C'est B. utiliser quatre Des ombres pointues de la même couleur, elles sont décalées vers différents angles par pixel (exemple 2).

Exemple 2. Quatre ombres pour le contour

HTML5 CSS3 IE 9 IE 10+ CR OP SA FX

Texte de coupe

Le type de ce contour est montré à la Fig. 3. Il est à noter que le contour est plus expressif.

Figure. 3. Contour avec quatre ombres

Pour ajouter l'effet de texte tridimensionnel illustré à la Fig. 4 est utilisé en même temps plusieurs ombres qui sont déplacées par rapport à l'autre pour un pixel horizontalement et verticalement.

Figure. 4. Texte tridimensionnel

Personnellement, ce texte ressemble à l'étiquette dans le style rétro et il convient encore mieux aux en-têtes, et non pour le texte de base de la page Web.

Le nombre d'ombres dépend de combien vous voulez "pousser" le texte en avant. Une quantité plus importante augmente la "profondeur" des lettres, moins au contraire, diminue trois dimensions. Dans l'exemple 3, cinq ombres d'une couleur sont utilisées.

Exemple 3. Shadow pour ajouter trois dimensions

HTML5 CSS3 IE 9 IE 10+ CR OP SA FX

Réfrigérateur dimensionnel de Tattern

Pour toutes les ombres, nous mettons le rayon zéro flou et la même couleur. Les ombres ne diffèrent que par les valeurs de déplacement.

Texte de gaufrage

Pour créer un effet de gaufrage du texte ou, différemment, un relief, la couleur du texte doit correspondre à la couleur de l'arrière-plan. Une partie de la "saillie" au-dessus de la surface des lettres comme s'ils sont illuminées, l'autre partie est à l'ombre (Fig. 5).

Figure. 5. Texte de secours

Pour ajouter un tel effet, nous avons besoin de deux ombres - une ombre blanche que nous passons à gauche sur un pixel, et le gris foncé à droite (exemple 4).

Exemple 4. Texte de soulagement

HTML5 CSS3 IE 9 IE 10+ CR OP SA FX

Texte de soulagement

Le relief de l'avantage de tous looks précisément sur un fond gris, l'effet ne convient pas à chaque palette de couleurs du site. Au fait, il est facile d'obtenir le texte ajouté et non pressé, il suffit de changer les couleurs de l'ombre dans des endroits.

Text-ombre: # 333 -1px -1px 0, #ffff 1px 1px 0;

Briller

La lueur autour du texte est la même ombre, seule elle est brillante et contraste. Ainsi, pour créer l'effet de la lueur, il suffit de changer la couleur de l'ombre et de placer le rayon de flou souhaité. Étant donné que la lueur autour du texte doit être uniforme, le décalage de l'ombre doit être réglé sur zéro. En figue. 6 montre un exemple de lueur de couleurs différentes.

Figure. 6. lueur de texte

Exemple 5. Glow

HTML5 CSS3 IE 9 IE 10+ CR OP SA FX

Le bon côté

Côté obscur

Se brouiller

L'ombre elle-même est floue, donc si vous ne laissez qu'une ombre et que le texte est de se cacher, nous obtiendrons des lettres floues (Fig. 7) et le degré de flou est facilement ajusté via le paramètre Text-Shadow.

Figure. 7. Texte avec flou

Pour masquer le texte d'origine, il suffit de définir la couleur comme transparent (exemple 6). La couleur de l'ombre après cela effectue la couleur du texte et le radium flou définit le degré de flou des lettres.

Exemple 6. Texte flou

HTML5 CSS3 IE 9 IE 10+ CR OP SA FX

Texte non poids

Ombre et pseudoclasse

L'ombre n'a pas à ajouter directement au texte, la propriété SMS-Shadow est parfaitement associée à des pseudo-classes: Hover et: première lettre. En raison de cela, il s'avère effets intéressants Avec le texte comme la première lettre du paragraphe de contour ou la luminescence du lien lorsque vous survolez sur son curseur de la souris. L'exemple 7 montre de telles techniques.

Exemple 7. Utilisation de la pseudoclasse

HTML5 CSS3 IE 9 IE 10+ CR OP SA FX

Le projet de niche ralentit le canal traditionnel, non considéré avec le coût. Structure du marché, élimination des détails, stabilise le service de marketing et de vente en utilisant l'expérience des campagnes précédentes. Construire une marque, bien sûr, repousse spontanément le PR convergent, réavant le segment du marché. L'investissement synchronise le jeu de rôle statut social, augmentation de la concurrence. La marque provoque naturellement le plan de placement à l'aide de l'expérience des campagnes précédentes.

Une propriété frontalière universelle est utilisée pour contrôler la limite des éléments. Cette propriété vous permet de définir l'épaisseur, le style et la couleur de l'élément dans une déclaration.

Ces trois propriétés (épaisseur, style et couleur de la bordure) peuvent être installées en une seule annonce. Voici un exemple:

Vous pouvez spécifier le style de la bordure uniquement sur un côté de l'élément. Pour ce faire, utilisez les propriétés de la bordure (limite supérieure), la frontière (bordure droite), le bas de la bordure (bordure), bordure-gauche (bordure gauche).

Dans cet exemple, pour chaque côté du bloc, l'épaisseur de la bordure est donnée, style et couleur.

Pensez comment avec CSS, vous pouvez créer une telle figure:

Valeurs de la bordure - Épaisseur, Style et Couleur - Vous pouvez spécifier séparément à l'aide de propriétés spéciales.

• style frontière - style frontière.
• largeur de la bordure - Largeur de la frontière.
• couleur frontalière - couleur bordure.

Considérez chacune des valeurs séparément.

Style de bordure de la propriété. Style de bordure.

La propriété de style frontière définit le style de cadre. En CSS, contrairement à HTML, la limite de l'élément peut non seulement être solide. Les valeurs suivantes pour le style frontière sont autorisées:

1. aucun - La bordure est manquante (par défaut).
2. solide est une bordure solide.
3. double - double bordure.
4. frontière en pointillé.
5. pointillé - frontière à partir d'un certain nombre de points.
6. ridge - Border "peigne".
7. groove - frontière "Romor".
8. l'inset est une frontière émise.
9. dès lieu - frontière extrudée.

Exemples de la façon dont ils ont l'air.

la frontière est manquante (aucune)

bordure solide (solide)

double frontière

bordure hors d'une série de points (pointillés)

frontière détestée (pointillé)

frontière "romor" (groove)

border "peigne" (crête)

frontière déprimée (inset)

départ (départ)

Au fait, si pour le cadre de crête définit la couleur de la bordure est noir, c'est le résultat.

Div blocage avec le cadre de style noir et de la crête.

Le cadre ressemble à un solide, mais c'est parce que le style de crête est créé en ajoutant l'effet noir de la nuance et l'effet noir sur le cadre noir n'est pas visible.

En utilisant la propriété de style frontière, le style de bordure peut être spécifié non seulement pour tous les côtés du bloc. Il est possible de définir plusieurs valeurs sur une propriété de style frontière, en fonction du nombre de valeurs, le style de bordure sera attribué à un autre nombre de parties de l'unité. Vous pouvez définir une, deux, trois et quatre valeurs. Considérons des exemples pour chaque cas.

Une valeur (solide) - le style de bordure est défini pour tous les côtés du bloc.

Deux valeurs (double solide) - la première valeur réglée le style pour les côtés supérieurs et inférieurs, la seconde sur le côté.

Trois valeurs (pointillées solides) - la première valeur pour la partie supérieure, la seconde pour le côté, une jambe de force pour le fond.

Quatre valeurs (pointillés en pointillés solides) - chaque valeur d'un côté dans le sens des aiguilles d'une montre à partir du haut.

Propriété de la largeur de la frontière. Épaisseur de la frontière.

Pour installer l'épaisseur de la limite de l'élément, la propriété de la largeur de la bordure est utilisée. L'épaisseur des limites peut être définie dans toutes les unités de mesure absolues, par exemple en pixels.

Quant aux propriétés de style frontière, il est également possible de définir de une à quatre valeurs. Considérons des exemples pour chaque cas.

Exemple de code:

Aussi pour les propriétés de la largeur de la bordure existent sous la forme mots clés. Total trois d'entre eux:

• bordure mince - mince;
• moyenne - épaisseur moyenne;
• frontière épaisse - graisse;

Épaisseur de la frontière: mince.

Épaisseur de la frontière: moyenne.

Épaisseur de la frontière: épaisse.

Propriété de couleur frontalière. Couleur de la bordure.

Pour contrôler la couleur de la bordure, utilisez l'outil de couleur de bordure. Couleurs de cette propriété, vous pouvez définir l'utilisation de n'importe quelle méthode décrite dans l'article "Couleurs de CSS", à savoir:

• Enregistrement Sanental (# FF00AA) couleurs.
• Format RVB - RVB (255,12,110). Format RGBA pour CSS3.
• Formats HSL Et HSLA pour CSS3.
• Nom de couleur, tel que noir (noir). Liste complète Les noms de couleur sont affichés dans la table de noms de couleur CSS.

La propriété de la bordure peut également avoir de une à quatre valeurs et les traite de la même manière aux propriétés précédentes.

Une valeur (rouge).

Deux valeurs (noir rouge).

Trois valeurs (jaune noir rouge).

Quatre valeurs (bleu jaune noir rouge).

Revenons maintenant à la tâche exprimée ci-dessus et dessinez une figure:

Voici un code qui dessine une telle figure, seule une taille plus grande:

Régler des valeurs pour les côtés séparément

Ci-dessus mentionné que vous pouvez spécifier les valeurs des propriétés frontalières uniquement pour un côté de l'appareil. À ces fins, il existe des propriétés:

• haut de la frontière (bordure supérieure)
• frontière-droite (bordure droite)
• fond frontière (bordure inférieure)
• frontière à gauche (bordure gauche)

Permettez-moi de vous rappeler, pour toutes les propriétés, trois valeurs sont indiquées (épaisseur, style et couleur) dans n'importe quel ordre. Mais il existe des propriétés qui vous permettent de définir l'épaisseur, la couleur et le style de chaque côté séparément. Écrire ces propriétés dérivées de ce qui précède.

Paramètres de bordure supérieurs (haut de la frontière).

• border-Top-Color - Spécifie la couleur de la limite supérieure de l'élément.
• frontière-largeur - Définit l'épaisseur de la limite supérieure de l'élément.
• style de bordure - Spécifie le style de la limite supérieure de l'élément.

Paramètres de la bordure droite (frontière droite).

• couleur à droite - Spécifie la couleur du bord droit de l'élément.
• border-droite-largeur - Définit l'épaisseur de la limite droite de l'élément.
• style de frontière - Spécifie le style du bord droit de l'élément.

Paramètres de bordure inférieure (fond de bordure).

• couleur de bordure - Définit la couleur de la limite inférieure de l'élément.
• largeur de bordure - Largeur - Définit l'épaisseur de la limite inférieure de l'élément.
• style de bordure - Spécifie le style de la limite inférieure de l'élément.

Paramètres de bordure gauche (bordure à gauche).

• frontière-Gauche-Couleur - Définit la couleur de la bordure gauche de l'élément.
• frontière-Gauche-Largeur - Définit l'épaisseur de la bordure gauche de l'élément.
• frontière-Gauche-Style - Définit le style de la bordure gauche de l'élément.

Un exemple d'utilisation de ces propriétés:

Propriété frontière-rayon. Arrondir les coins de la frontière.

La propriété Border-Radius est conçue pour arrondir les coins des limites des éléments. Cette propriété est apparue à CSS3 et fonctionne correctement dans tous les navigateurs modernes, sauf Internet Explorer. 8 (et anciennes versions).

Les valeurs peuvent être utilisées dans CSS.

Propriété frontière-rayon: 15px.

Si le cadre de bloc n'est pas spécifié, l'arrondi se produit avec l'arrière-plan. Voici un exemple d'arrondissement d'un bloc sans cadre, mais avec couleur de fond:

Propriété frontière-rayon: 15px.

Il existe des propriétés pour arrondir chaque angle de l'élément. Dans cet exemple, ils sont utilisés:

Frontière-top-radius: 15px; Frontière-top-droite-rythme: 0; Frontière-bas-droite-rythme: 15px; Frontière-bas-gauche-rayon: 0;

Propriété frontière-rayon: 15px.

Bien que ce code puisse être enregistré par une annonce: frontière-rayon: 15px 0 15px 0. Le fait est que la propriété frontière-rayon peut être définie de une à quatre valeurs. Le tableau ci-dessous montre les règles qui définissent de telles annonces.

En examinant soigneusement ce tableau, on peut comprendre que l'entrée la plus courte du style souhaité sera comme ceci: Border-rayon: 15px 0. Juste deux valeurs.

Une petite pratique

Nous dessinons des outils de citron CSS.

Voici le code d'un tel bloc:

Marge: 0 auto; / * Placez l'appareil au centre * / Largeur: 200px; Hauteur: 200px; Contexte: # F5f240; Frontière: 1px solide # f0d900; Frontière-rayon: 10px 150px 30px 150px;

Nous avons déjà peint la figure:

Laissez maintenant un triangle de celui-ci:

Le code triangle est:

Marge: 0 auto; / * Placez l'appareil au centre * / Rembourrage: 0PX; largeur: 0px; Hauteur: 0; Frontière: 30px solide blanc; Couleur inférieure de la frontière: rouge;

3.5 sur 5.

Que pensez-vous qu'il est possible de faire un triangle évolutif en utilisant une paire de tags et de pure CSS? Et Pentagone? Mais quelle étoile? Je pense que beaucoup croient qu'il n'y a pas. En fait, vous pouvez.

Donc, aujourd'hui, nous avons une experience post-expérience. Nous jouerons avec la propriété bien connue CSS - Border (et tout ce qui y est raconté). Au cours de l'expérience, nous verrons comment faire plusieurs polygones simples, une étoile et considérer un cas où ces techniques peuvent être utilisées dans la pratique. Va!

Figurines géométriques simples

Alors, commençons par exemples simples. Savez-vous comment dessiner un triangle uniquement avec HTML et CSS? C'est comme ça:

Html

CSS.

Trapézoïde,
.polygon (Affichage: -Moz-Inline-Block;)

Polygone
.trapzoïde (marge: 0; rembourrage: 0; arrière-plan: aucun;)

Polygone (largeur: 10em; Hauteur: 10em; frontière: Aucun; Affichage: Inline-Block; Text-Align: Centre;)
.trapzoïde (
Affichage: Inline-Block; largeur: 1px; Hauteur: 0; Marge: 0 auto;
Frontière-gauche: 5em solide transparent; Frontière-droite: 5-Solide transparent;
}

Polygone .aa (fond de frontière: 10em solide; bordure-tête: aucun;)

Polygone.r2 (hauteur: 0em;)

Polygone.r3 (hauteur: 8.66ème;)
.polygon.r3 .trapzoïde (largeur de la bordure: 8.66ème 5em;)

div.eg (largeur: 10em; arrière-plan: #fff; marge: 0 0; rembourrage: 1em;)
div.eg .polygon (Affichage: Bloc; Marge: 0 Auto;)

R3 (couleur: rouge; taille de la police: 0.5em;)

Star

Html

CSS.

#star span,
#Star (
Bloc de visualisation;
}

#Haut (
largeur: 0;
Hauteur: 0;
Marge: Auto;
Frontière Droite: 4.64ème Solide transparent;
Frontière-gauche: 4.64em Solide transparent;
Frontière-fond: 14.27em solide;
}

#Centre (
Largeur: 5.7em;
DROITE DROITE: 4.65EM Transparent solide;
Frontière-gauche: 4.65em Solide transparent;
Border-top: 3.36ème solide;
Hauteur: 0;
Position: absolu;
TOP: 5.46EM;
à gauche: 0;
z-index: 100;
Texte-Aligner: Centre;
}

#Bas (
Position: absolu;
Bas: 0;
À gauche: 2.852EM;
Frontière-droite: 4.635EM Solide transparent;
Border-gauche: 4.635EM Solide transparent;
Frontière-fond: 3.4em solide #fff;
largeur: 0;
Hauteur: 0;
}

# Centre (
Marge-top: -2em;
Couleur: # 000;
Poids de la police: audacieux;
}

a # Star: Hover #Center Span (
Couleur: #fff;
Couleur de fond: transparent;
}

une étoile (
Couleur: # f90;
Couleur de fond: transparent;
}
une étoile #: planer (
Couleur: # FC3;
Couleur de fond: transparent;
}

Quelques exemples supplémentaires

• Arbre de Noël et mise en page inhabituelle d'Eric Meyer;
• Tuile et menu de la technochrathie principale technologiste;

Bien sûr, dans Photoshop ", on peut causer de la beauté, mais que faire si vous avez besoin de conserver le texte et de ne pas l'insérer une belle image?

Par exemple, le titre d'indexation forestière souhaitait faire du texte dans des balises

Donc, nous faisons du texte avec une ombre à l'aide de CSS:

Le niveau de 3 CSS a la propriété "Text-Shadow" pour ajouter la nuance à chaque lettre de tout texte.

1. Forme la plus simple: H3 (Text-Shadow: 0.1em 0.1em # 333)
2. Ombres de texte lubrifiés: H3.b (Text-Shadow: 0.1EM 0.1em 0.2em Noir)
3. Texte blanc lisible: H3.A (Couleur: Blanc; Text-Shadow: Noir 0.1em 0.1em 0.1em 0.2em)
4. Ombres multicouches: H3 (Text-Shadow: 0.2EM 0.5EM 0.1em # 600, -0.3em 0.1em 0.1em # 060, 0.4EM -0.3EM 0.1em # 006)
5. Dessin de lettres et de contours: H3 (text-ombre: -1px 0 noir, 0 1px noir, 1px 0 noir, 0 -1px noir)
6. NEON GLOW: H3.a (Text-Shadow: 0 0 0.2EM # 8F7) H3.B (Text-Shadow: 0 0 0.2EM # F87, 0 0 0.2EM # F87) H3.C (Text-Shadow: 0 0 0.2EM # 87F, 0 0 0.2EM # 87F, 0 0 0.2EM # 87F)

Un autre exemple intéressant est:

Coup de texte avec CSS

La course de texte utilisant CSS sans recourir aux scripts est possible. Cet effet peut être créé à l'aide de la propriété Text-Shadow. Bien que cette propriété, c'est-à-dire ne percevante dans aucune de ses versions - dans le reste browserakh populaire La recette décrite fonctionnera bien.

Considérez le code ci-dessous:

Exemple №1

H1 (text-ombre: rouge 1px 0px, rouge 1px 1px, rouge 0px 1px, rouge -1px 1px, rouge -1px 0px, rouge -1px -1px, rouge 0px -1px, rouge 1px -1px;)

Le premier paramètre de la propriété Text-Shadow définit la couleur de la nuance, le deuxième décalage horaire horizontalement par rapport au texte, le troisième décalage verticalement. Lorsque vous spécifiez le décalage de l'ombre dans toutes les directions du texte sur 1 pixel à tour de rôle et que l'effet de la course est obtenu.

Exemple d'accident vasculaire cérébral1

Pour rendre l'accident vasculaire cérébral plus saturé, vous pouvez appliquer le quatrième paramètre Text-Shadow, responsable du rayon de l'ombre:

Exemple numéro 2.

H1 (text-ombre: rouge 1px 0px, rouge 1px 1px, rouge 0px 1px, rouge -1px 1px, rouge -1px 0px, rouge -1px -1px, rouge 0px -1px -1px, rouge 1px -1px, rouge 0 0 3px , Rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px;)

Exemple d'accident vasculaire cérébral №2.

Si vous remarquez, la propriété «rouge 0 3PX» est répétée plusieurs fois. C'est dans ce que l'effet de la saturation se cache. Pour obtenir un affichage plus clair de la course, la propriété peut être ajoutée avec d'autres paramètres un grand nombre de fois. Le seul inconvénient est qu'il peut beaucoup ralentir le navigateur sur des ordinateurs faibles.

Aujourd'hui, je vais vous dire comment faire un coup de texte dans CSS. Nous allons effectuer toutes les manipulations exclusivement avec la propriété Text-Shadow.

Coup clair

En tant que texte sur lequel nous ferons l'expérience de toutes nos idées, je propose d'utiliser ceci:

Il montre que le bloc avec le texte a une classe Text-déc. C'est sur le fait que nous ferons référence à notre élément en CSS, en appliquant les propriétés nécessaires. Alors, voici comment se fait le trait minant:

Texte-Dec (Taille de la police: 50px; Couleur: Jaune; Text-Shadow: 1Px 1PX 0 Noir, -1Px -1px 0 Noir)

Demandons tout de suite grande taille La police de sorte que tout soit très clairement visible et la couleur du texte est jaune, disons. La troisième ligne dans notre cas et met en œuvre que la plupart des traites.

La propriété Text-Shadow vous permet d'ajouter une ombre au texte, les ombres peuvent être ajoutées autant que vous le souhaitez, à travers la virgule. Propriétés de la syntaxe telles:

text-Shadow: Offset horizontal | vertical | Flou | Couleur

Dans notre cas, nous avons d'abord défini une légère compensation et laissée, puis vers le haut et la droite. En conséquence, le texte autour de sa boucle a reçu un circuit.

Si l'ajout à chaque ombre est également floue dans 10 pixels, cela ressemblera à ceci:

Course floue

Une autre approche est de ne pas spécifier le décalage du tout, mais de déterminer le flou - alors le texte sera également comme s'il était appliqué, mais pas clairement. Ajoutez le même texte exact à HTML, mais seulement la classe de style définit l'autre - Text-Dec2:

Texte-déc2 (taille de la police: 50px; couleur: bleu; text-ombre: 0 7px rouge;)

Course grasse

Il est plus difficile de mettre en œuvre, puisque trop le déplacement des ombres peut conduire à la délicatesse du texte. Et pourtant, il est possible d'atteindre un certain effet, même si vous devrez ajouter beaucoup plus d'ombres que dans les cas précédents. En conséquence, ajoutez de nouveaux fragments de texte avec Text-Dec3 et Text-Dec4 au HTML. Et ce sont des styles pour eux:

Texte-Dec3 (taille de la police: 50px; couleur: jaune; text-ombre: 1px 1px 0 noir, -1px -1px 0 noir, 2px 2px 0 noir, -2px -2px 0 noir, 3px 3px 0 noir, -3px - 3PX 0 Noir, 4PX 4PX 0 Noir, -4PX -4PX 0 Noir) .Text-Dec4 (Taille de la police: 50px; Couleur: Jaune; Text-ombre: -1px 1px 0 Noir, 1px -1px 0 noir, -2px 2px 0 noir, 2px -2px 0 noir, -3px 3px 0 noir, 3px -3px 0 noir, -4px 4px 0 noir, 4px -4px 0 noir)

Comme vous pouvez le constater, le texte a conservé une lisibilité et a en même temps un trait noir décent. L'essence de cette approche est que nous ajoutons progressivement de nouvelles ombres, augmentant ainsi le décalage avec chaque fois 1 pixel.

Encore plus de graisse coupable de tous les côtés

Est plus difficile. Personnellement, je ne savais pas comment implémenter normalement le trait de tous les côtés, mais il est apparu sur Internet sur le générateur Text-Shadow, ce qui vous permet de configurer l'ombre en mode visuel, puis il vous suffit de copier son code. Voici un lien vers le générateur.
Avec cela, j'ai pu faire une telle ombre:

CSS n'a pas encore compilé

À ces capacités, CSS fin. Si vous avez besoin d'un beau coup de graisse, par exemple, comme ceci:
Faites-le dans Photoshop et le texte lui-même devra insérer sur une page Web comme une image

Jusqu'à présent, je connais de telles options, comment faire un coup de texte dans CSS. Peut-être que vous savez quoi, écrivez dans les commentaires. La prochaine fois que je montrerai d'autres effets qui peuvent être effectués avec le texte grâce à la propriété Text-Shadow.