diff options
Diffstat (limited to 'src/Creating_Text_Outlines_in_CSS.adoc')
| -rw-r--r-- | src/Creating_Text_Outlines_in_CSS.adoc | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/src/Creating_Text_Outlines_in_CSS.adoc b/src/Creating_Text_Outlines_in_CSS.adoc new file mode 100644 index 0000000..d66f742 --- /dev/null +++ b/src/Creating_Text_Outlines_in_CSS.adoc @@ -0,0 +1,38 @@ +Creating Text Outlines in CSS +============================= +:author: Aaron Ball +:email: nullspoon@iohq.net + + +== {doctitle} + +Creating outlines for text can be a very interesting problem to tackle when +making a website. If you do any research, you'll likely find that google points +you to w3c schools for the text-outline property. There you will find out that +(as of 10.27.2011), that CSS 3 property is not currently supported in any +browsers. + +I reached that point and started researching unorthodox ideas on the matter and +didn't find anything directly relating, but did find one really great site +using multiple shadows to do offset shadows (really neat stuff I might add). I +had no idea you could put multiple shadows on a single text object! Then it +occurred to me, I could apply multiple blurred shadows overlayed to reduce the +feathering enough that it would look like a solid outline. Sure enough, it +worked! Here's how you do it. + +In your CSS item, let's add some lines here... + +---- +.outline { + text-shadow: 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000; +} +---- + +And that should do it! Add that class to whatever text you're using and you +should have nicely outlined text. + + +Category:CSS + + +// vim: set syntax=asciidoc: |