CSS Text effect white background - css

Question

I would like to add a white background to my letters.
I have an image as example, but I would like to build this image with CSS.
To see the difference, edit html with editor and add black as body background.
I have tried this with text-shadow, but it didn't work great.
My question is how can I build this with css?
Kind regards,
Itouch

Answer 1

I believe that text-shadow is the only way to go.
something like :
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
Demo : http://codepen.io/mbrillaud/pen/zGxdMQ

Answer 2

I have a solution which is not really answering your question but still it might help (i hope).
You can make use of SVG and stroke-linejoin.
<svg height="100" width="250">
<text
x="0"
y="50"
fill="red"
stroke="#ffffff"
stroke-width="3px"
font-size="50px"
letter-spacing="-4"
stroke-linejoin="round"
stroke-linecap="round"
font-weight="600">I love SVG!</text>
</svg>
JSBIN: http://jsbin.com/zemeya/2/edit?html,css,output
Edit: I changed the font to be more funky adding this line between head tags.
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Answer 3

It's a combination of text-shadow and letter-spacing.
First of all you need to get a solid "border" around your text.
For that use this:
text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,
-2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff
But that's not all. As there is another shadow which is kinda blurry you have to add another text-shadow:
text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,
-2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff,
2px 2px 3px #000;
Now you may remove some letter-spacing. You can do this by use a nagative value for it:
letter-spacing: -6px;
#import url(http://fonts.googleapis.com/css?family=Chewy);
span {
font-family: 'Chewy', cursive;
letter-spacing: -6px;
font-size:50px;
color:#555;
text-shadow:-1px 0 #fff,
0 1px #fff,
1px 0 #fff,
0 -1px #fff,
-2px 0 #fff,
0 2px #fff,
2px 0 #fff,
0 -2px #fff,
2px 2px 3px #000;
}
<span>home</span>
Demo

Answer 4

You can play with text-shadow property, but than you would have to stack values to achieve thicker stroke this way:
body {
background-color: #ddd;
}
p {
font-size: 52px;
color: #666666;
text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,
4px 4px 6px #000, 4px 4px 6px #000;
}
<p>home</p>
Also on codepen.

Answer 5

You can do a colored outline on text by using the text-shadow in CSS. The trick is you have to do multiple shadows:
.white_background {
text-shadow: 0px 0px 1px #fff,
0px 0px 1px #fff,
0px 0px 1px #fff,
0px 0px 1px #fff;
}
CSS supports multiple listings of text-shadow. Each listing stacks with the others. If you stack up enough, they give the appearance of a solid outline.