White shadow chat room

It comes from Mark and utilizes an impressive twelve separate shadows to pull off a very believable 3D effect.

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); Notice in the example above I called my technique the “quick and dirty” letterpress effect.

If you're new to Modern Country Style (and, hello there!

White shadow chat room-49White shadow chat room-49White shadow chat room-71

Go back to the globe and readjust the coordinates to anything other than 30 N and 90 E and the ladder will retract, allowing you to get to the white queen.The real fun begins when you realize that you aren’t restricted to a single shadow.Using a comma to separate the declarations, you can apply as many shadows as you want! Notice that there’s a comma after the first two shadows and a semicolon after the last shadow.Check out his blog post for a full explanation of the technique.Like most CSS effects, text-shadows are extremely simple to implement in a basic form but can take on a variety of different forms if you really put some work into them.

Leave a Reply