Esquinas redondeadas y degradados con CSS3
Publicado en June 13, 2010 by Damian
Hola a todos! Últimamente empieza a sonar más fuerte HTML5 y CSS3 , a medida que los navegadores se hacen más compatibles con estas nuevas tecnologías, así que hoy pensé en traerles un par de “trucos” que pueden realizar con CSS3 y que hasta ahora solo era posible con Javascript o imágenes.
Esquinas redondeadas
Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.
Dado un div cualquiera aplicamos la propiedad border-radius
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}
Degradados y sombras con CSS3
Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.
Aplicando sombras al DIV y letras
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
}
Y por último le aplicamos un degradado
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top, #D7E9F3, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
}
Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.
Ver Ejemplo online
Descargar código del ejemplo
Links Sponsors
Tags: css, diseño web, efectos
Categoría: Tutoriales
Con tu lector preferido.
Via Email.
Por Twitter.
[...] Hoy se me dio por hacer uno bastante gracioso basado en las explicaciones de lanrat acerca de como construir un cubo usando las nuevas propiedades CSS. [...]