2
Est-il possible de créer un double contour pour le nombre que vous voyez dans l'image ci-dessous (je veux dire le contour vert et blanc)Possibilité de créer un double contour pour le nombre avec css?
Toute idée?
A
Répondre
2
En fonction des navigateurs dont vous avez besoin pour soutenir, ce n'est pas exactement le même effet, mais vous pouvez obtenir quelque chose de similaire avec une combinaison de texte-ombre et -webkit texte-temps.
text-shadow: 4px 4px 0 green;
-webkit-text-stroke: 2px white;
https://jsfiddle.net/agentfitz/rs27av43/4/
Voici une autre (peut-être mieux) option à l'aide ::before et custom data attributes - accessoires du Code Carnivore pour cette solution intelligente)
+0
Oui exactement. J'essayais aussi avec cette combinaison. Merci @ Brian FitzGerald –
+0
Nice! Content que ça marche pour toi. –
+0
Ce sera dur à partir du point de réponse comme lorsque vous faites des petites tailles de polices tout semble moche –
2
Vous pouvez jouer avec l'ombre du texte. Il ne semble pas cool, mais je pense que c'est tout ce que vous pouvez faire avec css.
Original article sur CSSTricks.
body {
background-color: green;
}
span {
font-size: 70px;
font-family: Arial;
font-weight: bold;
color: block;
text-shadow:
-2px -2px 0 green,
2px -2px 0 green,
-2px 2px 0 green,
2px 2px 0 green,
-3px -3px 0 white,
3px -3px 0 white,
-3px 3px 0 white,
3px 3px 0 white;
}<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>A</span>
<span>B</span>+0
Hmm bonne idée mais quand je fais des nombres plus petits tous les écrasements, j'ai besoin d'une solution réactive @ 3rdthemagical –
+0
@AnahitDEV Pour les petites tailles de police, vous pouvez réduire la taille de l'ombre de texte de 2px à 1px et de 3px à 2px. Ou vous pouvez utiliser uniquement l'ombre extérieure. C'est tout ce que je peux recommander. – 3rdthemagical
+0
ouais je vois. merci @ 3rdthemical –
Juste pour clarifier, faire vous voulez cela pour ** _ n'importe quel caractère numérique ** dans le corps du texte, ou est-ce le nombre à l'intérieur d'un conteneur (div, span, etc.)? –
J'ai besoin de n'importe quel caractère numérique et texte @Lars Kristensen. Merci pour avoir clarifié –