Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Uso de CSS3 - Degradados

CSS3CSS3 se está convirtiendo en nuestro gran aliado, para los que practicamos esto del diseño web. Me encanta y creo que la mayoría piensa como yo, y creo que todos estamos impacientes por saber hasta donde podemos llegar con esta tecnología mejorada.

Como ejemplo os pongo la creación de degradados con unas pocas lineas en CSS. Estas lineas son las que he usado en mi menú para que comprobeis que yo no he podido resistirme y lo he usado en el diseño de mi blog.

Os pongo el código CSS que he usado en el menú:

 

.menu li a:hover

 

{
background: #3a3a3a; // para <= IE8
background: -moz-linear-gradient(100% 100% 90deg, #3A3A3A, #252525); // para firefox
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A3A3A), to(#252525)); // para chrome y safari
}

Este ejemplo es para un degradado vertical, como podeis comprobar con Firefox, Chrome o Safari. Para realizar un gradiente en horizontal tendriamos que modificar el código anterior de la siguiente manera.

.men li a:hover
{
background: -moz-linear-gradient(100% 100% 180deg, #3A3A3A, #252525); // para firefox
background: -webkit-gradient(linear, left top, right top, from(#3A3A3A), to(#252525)); // para chrome y safari
}

Por último también podeis realizar degradados radiales modificando algunos de los parametros anteriores:

.menu li a{
background: -moz-radial-gradient(center 45deg, circle closest-corner, #3A3A3A, #252525); // para firefox
background: -webkit-gradient(radial, center center, 0, center center, 70, #3A3A3A, #252525); // para chrome y safari
}

Espero os sea de ayuda estas lineas, por cierto, y para quien no lo tenga podeis descargar una Guía rápida de referencia de nuestro amigo Veign.

T F G+

Escribir un comentario

¡Gracias por dejarnos tus comentarios! — por favor intenta mantener tu opinión relacionada con la anotación, no usar insultos, agresiones, o faltas de respeto al autor y otros participantes de la discusión, en caso de no hacerlo tu comentario podría ser borrado.
A excepción de la página web, el resto de datos solicitados son necesarios para incluir comentarios. El email no será mostrado en los comentarios. Tampoco será usado por parte del administrador para enviarle ninguna información ni será vendido a terceros para ningún tipo de uso.
Código de seguridad
Refescar

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar