← Go back to the tutorial
NOTE: This demo only works in WebKit-powered browsers Safari (even iOS 5) and Chrome.
#1: Offset with wavy textureTextured drop shadow effect is static, uses a PNG and positioned .05em from top and left.
PNGbrowser support: webkit
Ace is quite lazy Ace is quite lazy
#2: Offset with gradientTextured drop shadow effect is static, uses a PNG and positioned .05em from top and -.05em from left.
PNGbrowser support: webkit
Ace is quite lazy Ace is quite lazy
#3: Hover state (animated offset), plus stroke around textTextured drop shadow effect is anmated on hover, uses a PNG and positioned .06em from top and left. I also added a 2px stroke around the text.
Hover over the text!PNGbrowser support: webkit
Ace is quite lazy Ace is quite lazy
#4: Hover state (fade out), no offset, single colorTextured text revealed on hover, uses a PNG and positioned 0em from top and left.
Hover over the text!PNGbrowser support: webkit
Ace is quite lazy Ace is quite lazy
#5: Hover state (fade out), no offset, 2nd colorTextured text revealed on hover, additional span allows for 2nd color, uses a PNG and positioned 0em from top and left.
Hover over the text!PNGbrowser support: webkit
Ace is quite lazy Ace is quite lazy Ace is quite lazy
#6: The SVG version for Firefox supportTextured drop shadow effect is static, uses SVG and positioned x=".05em" y="1.07em" using text tag.
SVGbrowser support: webkitOperagecko
Now with more SVG! Now with more SVG!
#7: Larger background font for decorationTextured effect is applied to larger font (the 'X') behind text.
PNGbrowser support: webkit
X You are here
#8: The signature blockOr as a fancy layered signature. And yes, I think the texture PNG applied to the signature is overkill, but used for the purpose of this demo.
PNGbrowser support: webkit
Jack Kerouac Jack Kerouac, author
← Go back to the tutorial