Texto en 3d y rotación de texto con html5 y css3

Empezamos con un nuevo efecto muy curioso, pero a su vez muy complicado de realizar. No en sí por el código sino por el juego de tonalidades de las sombras. Por lo que os lo dejaré en un tono compatible con prácticamente cualquier color de texto y de fondo. Para que funcione bien con todos los navegadores, tendremos que ponerlo en el código de la página web, y no en el css, debido a que no se por qué extraña razón en el css no es muy útil… o visible.

Como siempre, dejo el código fuente y luego lo vemos detallado… no os asustéis que no es para tanto… Este es el código fuente para el efecto de texto en 3 dimensiones con html5:

<p style="font-family: helvetica; 
text-align: center; 
font-size: 60px; 
color: #141464; 
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);">
    Texto en 3d con css3
</p>

Empecemos por lo que todos conocemos… Le hemos dado una familia de texto, helvética en este caso que es la que mejor queda, lo hemos alineado al centro (debido a que supongo que querremos que sea un título o algo similar…), con un tamaño y un color al gusto de la página…
Y ahora llega la parte más “difícil” y más interesante de todas… Las sombras.
En un post anterior ya hablábamos del atributo text-shadow, donde veíamos que tenía tres valores (extensión horizontal, extensión vertical, degradado y color), pues en este caso es igual, lo que ocurre es que le hemos puesto varias sombras paralelas con distintos colores y distintas extensiones para dar más juego (pero sin degradado si os fijais en las 5 primeras…). Esto va a hacer que el texto tenga un efecto 3d (con esto ya nos valdría si no quisiéramos sombrearlo…
Las 7 siguientes sombras ya tienen degradado, y la diferencia con las anteriores es que están los colores establecidos en RGBA en lugar de en RGB, que como vimos en un post anterior, RGBA nos permite añadir un canal de transparencia alfa con el que cambiar la opacidad del color… (1 sería un 100% y 0 un 0% de opacidad). Pues jugando con todas estas sombras hemos conseguido crear un texto en 3d gracias a HTML5. Este texto quedaría así:

Texto sin sombreado (1er paso sin sombras)

Texto en 3d con sombreado

Recuerda que si no entiendes algo, siempre puedes comentar, o si quieres aportar algo más a lo ya visto, lo mismo.

Una vez visto esto, pasemos a la rotación del texto gracias a css3. En este caso sí que usaremos css, y lo que vamos a tratar de hacer de una forma muy sencilla es rotar el texto que queramos, los grados que queramos y en la dirección deseada. Os dejo el código fuente para analizarlo después:

p.vertical_css3 {
    color:blue;
    font-size:20px;
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
}

Como vemos, hemos creado un código para un texto negro, de 20 píxeles, que rota 25 grados en el sentido contrario a las agujas del reloj. Ésto lo realizamos gracias a un transform: rotate, en el que como valor le damos un número de grados a rotar, en un sentido establecido (negativo(-) sentido contrario a las agujas del reloj y positivo (+) mismo sentido de las agujas del reloj). Simple, ¿verdad?.
Una vez más, gracias por leerme y espero que os haya servido para algo.

Como siempre, si quieres ver ejemplos de todo esto y de muchas otras cosas, entra en:
Cursos, manuales y tutoriales gratis de html5 y css3

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: