Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Crear efectos de texto 3D con CSS3


Efecto 3D



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:



Aizum Blog


Lo podéis implantar fácilmente en Blogger de este modo!


  1. Ves a Blogger
  2. Ingresa en plantilla
  3. Ahora en Editar Html
  4. Y busca con Ctrl+F la etiqueta ]]></b:skin>
  5. Y antes de dicha etiqueta, es decir; ]]></b:skin>
  6. 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>


Aizum Blog, lunes, enero 06, 2014


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9