Round-Corners y Gradient CSS para Todos los Navegadores
Bordes Redondos y fondo degradado en todos los navegadores. Con CSS3 aparecen nuevas propiedades como border-radius, text-shadow o box-shadow. El problema es que todos los navegadores No cumplen con CSS3, por eso el poder utilizar un estilo CSS de bordes redondos o fondos degradados que funcione en todos los navegadores es un poco más difícil.
Bordes Redondos Con CSS
Poniendo las siguientes líneas funciona en todos los navegadores. Como siempre tenemos la Excepción del Internet Explorer, pero para eso los chicos de google nos proporcionan un código Javascript que redondea el “Elemento” en función de lo indicado en la propiedad “border-radius”. Este código es un fichero llamado “border-radius.htc” que hay que copiar en la raiz de nuestra página web (o Theme de WordPress).
background-color:#CEE3F6;
width: 300px;
margin: auto;
padding-left: 30px;
/*Para Redondear Bordes*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
behavior: url(border-radius.htc);
}
El código podemos descargarlo de code.google – curved-corner
Fondo Degradado Con CSS
El Degradado también requiere de 3 líneas en el Estilo CSS, de esta forma se verá el fondo degradado en todos los Navegadores. Con Internet Explorer también se ve el degradado, aunque tenemos menos opciones de configuración.
background:#CEE3F6;
border: 1px solid navy;
margin: auto;
padding-left: 30px;
/*Para Fondo degradado*/
/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#CEE3F6′, endColorstr=’#ffffff’);
/* for webkit browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#CEE3F6), to(#fff));
/* for firefox 3.6+ */
background: -moz-linear-gradient(top, #CEE3F6, #fff);
}
Bordes Redondos y Fondo Degradado Con CSS
Si juntamos dentro de un estilo CSS las propiedades del Borde Redondo y lo del Fondo Degradado, podemos tener un “elemento” con Bordes Redondos y Fondos Degradados. Como siempre Internet Explorer es una Excepción y los dos estilos no conseguimos hacer que funcione.
box-gradient y box-rounded
al mismo elemento tenemos
Bordes Redondos y Degradado
Degradado Redondo Sombra y CSS
Propiedad sombra del CSS3
¡combinando estilos!
Referencias
- Más información sobre Redondear Bordes en Border Round Corner With CSS
- Más información sobre Degradados en CSS en Gradient CSS Cross Browsers
- Más información sobre Las Sombras del CSS3 en box-shadow, features CSS3