En el tutorial de hoy le mostraremos cómo crear un efecto en el texto en formato 3D, simple y rápidadamente, utilizando CSS3. Vamos a utilizar las propiedades de CSS3 con text-shadow, para crear el efecto del texto en 3D. El efecto en 3D es puro CSS, y no requiere ningún Javascript para lograr dicho efecto, por favor, tenga en cuenta que este efecto en el texto sólo funciona en navegadores modernos como Chrome, Firefox, Safari y Opera. Ahora vayamos a ver un ejemplo a continuación, de lo que hablamos.
Lo podéis implantar fácilmente en Blogger de este modo!
- Ves a Blogger
- Ingresa en plantilla
- Ahora en Editar Html
- Y busca con Ctrl+F la etiqueta ]]></b:skin>
- Y antes de dicha etiqueta, es decir; ]]></b:skin>
- Copia y pega el siguiente CSS.
/* Crear efectos de texto 3D con CSS3 en www.aizumblog.com */
.text-3d {
font-family: Helvetica, Arial; /* Tipo de la fuente */
line-height: 1em; /* Altura de la línea */
color: #029FC4; /* Color de la fuente */
font-weight:bold; /* Grosor de la fuente */
font-size: 103px; /* Tamaño de la fuente */
text-shadow:0px 0px 0
rgb(212,212,212),1px 1px 0
rgb(184,184,184),2px 2px 0
rgb(156,156,156),3px 3px 0
rgb(128,128,128), 4px 4px 0
rgb(100,100,100),5px 5px 4px
rgba(0,0,0,0.45),5px 5px 1px
rgba(0,0,0,0.5),0px 0px 4px
rgba(0,0,0,.2); /* Sombras en el texto*/
}
Ahora debes de añadir el HTML dónde quieres que se vea!
<div class="text-3d">Texto-del-rotulo-3D</div>