Possible to create a double outline for number with css?

Question

Is it possible to create a double outline for number how you see in below picture (I mean the green and white outline)

Any idea?

Just to clarify, do you want this for **_any_** numeric character in the body-text, or is the number inside a container (div, span, etc.)? — Lars Kristensen, Sep 21 '16 at 13:07
I need for ANY numeric and text character @Lars Kristensen. Thanks for clarifying — Ana DEV, Sep 21 '16 at 13:11

score 3 · Answer 1 · answered Sep 21 '16 at 13:23

3

You can play with text-shadow. It looks not cool, but I think this is all you can do with css.

Original article on 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>

answered Sep 21 '16 at 13:23

3rdthemagical

5,271
18
36

Hmm good idea but when making numbers smaller all crushes, i need some responsive solution @3rdthemagical – Ana DEV Sep 21 '16 at 13:36
@AnahitDEV For small font-sizes you can decrease the size of text-shadow from 2px to 1px and from 3px to 2px. Or you can use only outer shadow. That's all I can recommend. – 3rdthemagical Sep 21 '16 at 13:49

Brian FitzGerald · Accepted Answer · 2016-09-21T15:11:00.277

3

Depending on the browsers you need to support, it's not the exact same effect, but you could achieve something similar with a combination of text-shadow and -webkit-text-stroke.

   text-shadow: 4px 4px 0 green;
  -webkit-text-stroke: 2px white;

https://jsfiddle.net/agentfitz/rs27av43/4/

Here is another (perhaps better) option using ::before and custom data attributes - props to the Code Carnivore for this intelligent solution)

https://jsfiddle.net/0wn2ok4g/2/

edited Sep 21 '16 at 15:11

answered Sep 21 '16 at 13:57

Brian FitzGerald

3,041
3
28
38

Yes exactly. I was also trying with that combination. Thanks @Brian FitzGerald – Ana DEV Sep 21 '16 at 14:00
It will be hard from the responsive point as when making font sizes small all looks ugly – Ana DEV Sep 21 '16 at 14:10
Yeah, I saw that too. I think you should possibly use some extra classes for that... like `.very-small-text-outline` `.small-text-outline` `.medium-text-outline` `.large-text-outline` and adjust your stroke and text-shadow widths based on that, and then dynamically apply the classes based on the text size you need. – Brian FitzGerald Sep 21 '16 at 14:12
Yeah exactly. thank you very much for the answer and example @Brian FitzGerald – Ana DEV Sep 21 '16 at 14:32
Ok man, added one more option using `::before` and `custom data attributes` after discussing this with a coworker. Extreme programming always yields the best results! Good luck with the implementation. – Brian FitzGerald Sep 21 '16 at 15:12
Yeah great solution @Brian FitzGerald. If i could would vote up your answer again!) – Ana DEV Sep 22 '16 at 07:40

Possible to create a double outline for number with css?

2 Answers2