Texto 3D sólo con CSS

Written by Daniel Ulczyk. Posted in CSS

Tagged: Diseño Web

Published on enero 06, 2011 with No hay comentarios

No hay markup extra, nohay contenido generado ni imágenes Este singular efecto 3D es generado pura y exclusivamente mediante el uso de sombras, con la propiedad text-shadow, de CSS. Su autor—Mark Dotto—nos comenta que este efecto puede bien apreciarse con los últimas versiones disponibles, de los navegadores actuales: Chrome, Safari, Firefox y Opera.

Texto 3D sólo con CSS 
h1 {
  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);
}

Vía | Mark Dotto

Artículos similares:

Acerca de Daniel Ulczyk

Mi nombre es Daniel Ulczyk y soy un Webmaster independiente que desarrolla sus actividades en Buenos Aires — Argentina. Soy Consultor SEO y Analista de Accesibilidad Web.

Browse Archived Articles by Daniel Ulczyk

No hay comentarios

En estos momentos No hay comentarios en Texto 3D sólo con CSS. Te gustaría agregar el tuyo propio?

  1. Tweets that mention Texto 3D sólo con CSS | Rendezvous -- Topsy.com

    enero 6, 2011 a las 02:39

    [...] This post was mentioned on Twitter by Sady Maureria Bulnes. Sady Maureria Bulnes said: RT: @CarolinaMillan: RT @pablosikosia: Texto 3D sólo con #CSS http://bit.ly/dVpaqI [...]

  2. Bitacoras.com

    enero 6, 2011 a las 02:57

    Información Bitacoras.com…

    Valora en Bitacoras.com: No hay markup extra, nohay contenido generado ni imágenes Este singular efecto 3D es generado pura y exclusivamente mediante el uso de sombras, con la propiedad text-shadow, de CSS. Su autor—Mark Dotto—nos comenta que es……

Dejar un comentario