summaryrefslogtreecommitdiff
path: root/src/Creating_Text_Outlines_in_CSS.adoc
diff options
context:
space:
mode:
authorAaron Ball <nullspoon@oper.io>2017-10-15 17:11:58 -0600
committerAaron Ball <nullspoon@oper.io>2017-10-15 17:11:58 -0600
commit350c40ebfb80357973fc7de453c919c2a7279b11 (patch)
treeafc8da09d9c1d7e573eac3e7b6d8f6cfb778195c /src/Creating_Text_Outlines_in_CSS.adoc
parentc2ddeb66c8f9325170d1970cf151fbf5e054e494 (diff)
downloadoper.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.adoc38
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:

Generated by cgit