Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

text-stroke cross browser

Tags:

css

I'm trying the new text-stroke features and I've searched the web for a cross browser solution. For now I only could find it with webkit properties.

-webkit-text-stroke: 2px #FF1E00;

Could you let me know if there is a way so all browsers will display in the same way?

like image 689
Daniel Ramirez-Escudero Avatar asked May 24 '12 16:05

Daniel Ramirez-Escudero


2 Answers

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

from: Outline effect to text

"What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe)."

like image 92
niico Avatar answered Oct 16 '22 14:10

niico


As of May 24th, 2012, there is no cross-browser solution, as only webkit supports the experimental feature according to http://caniuse.com/#search=text-stroke. You can simulate this (to some degree) with 4 or 5 text-shadow's on an element.

Demo: Text Stroke, on CSS-Tricks.com

like image 28
Sampson Avatar answered Oct 16 '22 12:10

Sampson