4

I have an image as background on my body (purple kind of gradient). In the middle of the page there's some text. I want the text to be transparent (i.e. show the purple gradient) but I want a solid color 1px stroke on the text to be visible.

text-shadow: 1px 0 red, -1px 0 red, 0 1px red, 0 -1px red;

wont work because if you make the text transparent, you'll see the shadows.

color: rgba(0,0,0,0);

doesn't make the text see through and..

opacity: 0;

stuff makes the stroke opaque as well.

Any ideas? Is this possible with CSS only ?

EDIT: I just read about text-stroke. But can't find anything useful.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
Mr.Wazowsky
  • 43
  • 1
  • 4
  • wrap it in a div and add border for the div with `display:inline-block` – Vitorino fernandes Dec 15 '14 at 12:37
  • related : http://stackoverflow.com/questions/13932946/transparent-text-with-white-background-with-css – web-tiki Dec 15 '14 at 12:48
  • > i don't fully understand the display:inline-block for this. Thats more to do with how the browser renders the element. (as a block, or an inline element). How would that help me get a border around my text (not the div)? Basicly what i want is text-color: transparant; & text-border: 1px solid white; (i know those arent correct tags) > Now trying the related post with background-clip – Mr.Wazowsky Dec 15 '14 at 12:51

1 Answers1

2
article h1 {
color: rgba(0, 0, 0, 0.2); 
-webkit-text-stroke: 1px black;

}

Ganga Singh
  • 36
  • 4
  • 1
    would you care explaining what this code does please – web-tiki Dec 15 '14 at 13:52
  • Since font in webs are vectors i guess you could edit them like vectors. Meaning that as in say Adobe Illustrator, add a stroke. This adds a stroke/line around the outside – Mr.Wazowsky Dec 15 '14 at 14:15