diff options
author | Aaron Ball <nullspoon@oper.io> | 2017-10-15 17:11:58 -0600 |
---|---|---|
committer | Aaron Ball <nullspoon@oper.io> | 2017-10-15 17:11:58 -0600 |
commit | 350c40ebfb80357973fc7de453c919c2a7279b11 (patch) | |
tree | afc8da09d9c1d7e573eac3e7b6d8f6cfb778195c /src/Creating_Text_Outlines_in_CSS.adoc | |
parent | c2ddeb66c8f9325170d1970cf151fbf5e054e494 (diff) | |
download | oper.io-350c40ebfb80357973fc7de453c919c2a7279b11.tar.gz oper.io-350c40ebfb80357973fc7de453c919c2a7279b11.tar.xz |
Rename of .ascii files to .adoc
Originally, .ascii was used because .asciidoc was far too long. The
.adoc extension is more standard, shorter, and vim syntax highlighting
recognizes it.
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: |