Submit your widget

Pure CSS3 simple 3D text effect

Created 13 years ago   Views 19010   downloads 3931    Author cubiq
Pure CSS3 simple 3D text effect
View DemoDownload
105
Share |

The basic idea is pretty simple. You can get a nice 3D effect combining multiple levels of text-shadow.

The code required to get this result is something like:

text-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(127, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;

The article source:http://cubiq.org/dynamic-pure-css-3d-text