Sombra paralela en texto y capas, y degradado de capa con html5 y css3

Gracias a estos nuevos atributos, vamos a ser capaces de darle un efecto de sombra paralela a capas o texto de forma muy sencilla. Vamos a ver como siempre el código fuente de la capa en cuestión:

div.sombreada {
    background-color:#000000;
    width:400px;
    height:200px;
    padding:10px;
    color:#003333;
    box-shadow: 8px 8px 5px #333;
    -webkit-box-shadow: 8px 8px 5px #333;
    -moz-box-shadow: 8px 8px 5px #333;
}

Como vemos, hemos creado una capa estándar con un color de fondo, un color para el texto de su interior y una anchura, altura y márgenes interiores determinados. Lo que nos interesa en este momento es el atributo box-shadow. Éste es el atributo que nos va a dar las opciones de la sombra. Las opciones para este atributo son los pixeles horizontales y verticales de la sombra, en este caso 8 pixels horizontales y los mismos verticales. El tercer valor es el desenfoque, en este caso 5 pixels, y el cuarto es el color de la sombra.
Pero podemos también darle valores negativos a las sombras, e incluso ponerlas sin degradado, cosa que aparentemente no es lógica pero se le puede sacar un buen partido, en este caso, el código fuente quedaría como:

div.sombreada {
    background-color:#000000;
    color:#003333;
    width:400px;
    height:200px;
    padding:10px;
    box-shadow: -8px -8px 0px #333;
    -webkit-box-shadow: -8px -8px 0px #333;
    -moz-box-shadow: -8px -8px 0px #333;
}

Una vez visto y comprendido esto, nos resutará bastante fácil entender el efecto de sombra paralela para texto. Es tan sencillo como sustituir el box-shadow por text-shadow. Por lo que nuestro nuevo código fuente para, por ejemplo, sombrear todos los títulos con h1 sería:

h1 {
    text-shadow: 5px 5px 5px #333;
    -webkit-text-shadow: 5px 5px 5px #333;
    -moz-text-shadow: 5px 5px 5px #333;
}

Los valores son los mismos que los del box-shadow. Extensión horizontal, vertical, degradado y color. Y como en el caso anterior, podemos jugar con estos valores en función de la estética de nuestra página y de nuestro gusto en cuestión.
Por último en este post, veremos cómo degradar una capa para olvidarnos del photoshop y de recargar nuestra página web con imágenes innecesarias. Este efecto es más complicado que los anteriores, porque dependiendo de la compatibilidad con cada navegador, los atributos al elemento se detallan de una forma u otra, veremos el código fuente y luego lo analizamos detenidamente por pasos, como siempre:

div.degradada {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
    background: -webkit-linear-gradient(top, black, white);
    background: -moz-linear-gradient(top, black, white);
    background: -o-linear-background(top, black, white);
    background: -ms-linear-background(top, black, white);
    background: linear-background(top, black, white);
    width:400px;
    height:200px;
    padding:10px;
}

La primera línea de código, de compatibilidad para chrome y opera, es la más complicada. Ya no se utiliza esta sintaxis, pero la incluiremos siempre que podamos por prevenir. Tenemos el tipo de degradado (linear, circle, ellipse), luego cuatro valores en porcentaje que son el punto de comienzo, el radio de comienzo, el punto de fin y el radio de fin y por último, el color de comienzo y el color de fin.
El resto de líneas son la sintaxis sencilla, empleada para todos los navegadores restantes y para el chrome y opera con la nueva sintaxis, en este caso, le decimos que es un linear-background o linear-gradient para los dos vistos anteriormente, seguido de donde comienza y de los colores desde-hasta los que va. Como vemos, es una sintaxis mucho más sencilla y más recomendable.
En estos casos, si queremos que el degradado no sea lineal, sino radial, bastará con poner:

background:radial-gradient(circle,#black,#white); - Para degradados radiales con forma de círculo.
background:radial-gradient(ellipse,#black,#white); - Para degradados radiales con forma de elipse.

Por último, podemos elegir en degradados lineales como los anteriores, varios colores con su porcentaje de aparición. Por ejemplo, para hacer un degradado lineal de izquierda a derecha con tres colores, habría que poner:

background: linear-gradient(left, black 20%, cyan 60%, white 100%); - En este caso, sería lineal empezando en la izquierda y apareciendo desde la izquierda el negro hasta el 20 por ciento, el cyan hasta el 60 por ciento y el blanco hasta el final de la capa.

P.D.: Espero que os hayan traído muchas cosas los reyes magos ;)

Si quieres ver ejemplos de todo esto además de otras muchas funciones estéticas que nos permite realizar html5 junto con css3, entra en:

Efectos para texto y capas con 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: