Las maravillas del CSS3 es que podemos igualar efectos que antes sólo podíamos con mucho conocimiento, habilidad y unas cuantas imágenes bien diseñadas para hacer redondo un elemento, por ejemplo. Y justamente es lo que vamos a ver en este tutorial, a crear bordes redondeados con CSS3 sin la necesidad de nada más que el uso de hojas de estilo. Sin embargo aunque ya Internet Explorer 9 soporta css3 no he encontrado la forma de obtener el código para que me aparezca el borde redondeado, por lo que abarcaré por el momento la solución para Firefox, Chrome y Safari.
Este es el código que deberá estar incluído en tu archivo CSS para que funcione apropiadamente en Firefox 3 y posteriores:
Código :
#ejemplo
{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
Por otro lado, este es el encargado de lograr el mismo efecto en iPhone, Safari y Chrome:
Código :
#ejemplo
{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-rightright-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;
}
para el ejemplo (cuando todos los bordes son del mismo radio) es mucho más óptimo utilizar la propiedad así:
Código :
-webkit-border-radius: 10px; //para navegadores basados en webkit -moz-border-radius: 10px; //para navegadores basados en gecko
Como ya lo mencioné, algo que no he descubierto bien es como poder usar la propiedad border-radius en Internet Explorer 9 pero prometo descubrirlo y traerles el código, pero mientras tanto ya saben como poder crear bordes redondeados con CSS3.
Rayos, sólo porque vi esta colección es que se las voy a presentar, indudablemente si no encuentran inspiración para algún tipo de diseño web extravagante yo les voy a presentar una que los dejará con la boca abierta, no sólo por la calidad y el uso excesivo de colores brillantes, sino que te quedarás contemplándolos por mucho tiempo, y como dije si esto no les hace tener creatividad en su próximo sitio web entonces no se que lo hará. Mientras tanto disfruten de la colección de 37 diseños web que te harán decir “Wow”
