Técnica de esquinas redondeadas con CSS

En el artículo CSS Sprites + Rounded corners de CSSglobe, nos dejan un buen tutorial para realizar las típicas esquinas redondeadas de las cajas para contener texto u otros elementos con un toque mágico de CSS, especialmente una de ellas es espectacular, pues utiliza degradado que la hace muy llamativa. Para este cometido existen miles de buenos tutoriales relacionados con el tema de las esquinas redondeadas utilizando CSS, este es un método más que posiblemente encontrarás útil. Es necesario resaltar que dicho tutorial tiene cierto nivel, al menos es bastante avanzado con relación al CSS, pero su autor ha intentado que sea sencillo, sobre todo teniendo en cuenta a los posibles principiantes que deseen intentarlo. Comenta que como el CSS3 todavía no está implantado, hasta que esto ocurra es conveniente mantener nuestro trabajo lo más válido posible, según las normas W3C. Pero nos dejamos de hablar y lo mejor es emplear una ilustración que la tienes a tu derecha, con los diferentes tipos de recuadros con esquinas redondeadas, por eso de que "una imagen vale más que mil palabras", fíjate en el último ejemplo con fondo degradado, como ya he comentado. Otra cosa que mejor puedes hacer es darle un vistazo a la demo donde encontrarás esos mismos ejemplos, y si lo deseas puedes descargar los códigos CSS empleados para darle forma a las esquinas redondeadas mediante los estilos CSS, a partir de los ejemplos que nos deja.

Esta versión de esquinas redondeadas consiste en colocar dentro de un div con posición absoluta cuatro divs interiores, donde la esquina se forman a partir de imágenes utilizando un único CSS. La capacidad de hacer elementos redondeados, nos permite definir la anchura y la altura, sin límite alguno.

Si no estamos al tanto de dicha técnica, y no sabemos lo que son o cómo usarlas, podemos darle un vistazo al anterior artículo, que nos inicia en dicha técnica Creating easy and useful CSS Sprites. Suerte y que lo disfruteis.

Escrito por Toni

Comparte este artículo:

Estas son las categorías a las que pertenece el artículo Técnica de esquinas redondeadas con CSS :

Desarrollo web, CSS

Insertar un Comentario