 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Esquinas redondeadas con CSS
Otra manera de hacer un efecto de esquinas redondeadas con CSS e imágenes en elementos con anchura variable. Que funciona bien con Firefox u Opera, pero no con Internet Explorer.
20/5/08 - Existen muchas formas de conseguir un efecto de esquinas redondeadas con CSS. En nuestro taller de CSS ya vimos algunas maneras de hacer ese efecto. En este artículo vamos a ver otras maneras interesantes porque nos permiten construir cajas de anchura y color variable. Lo malo de este método es que no funciona con Internet Explorer, pues utiliza los pseudo-elementos after o before, que por el momento no tienen soporte en el navegador de Microsoft.
Este método de conseguir las esquinas redondeadas con CSS lo he visto en el artículo Rounded corners in CSS, yo simplemente me he dedicado a adaptarlo a otro diseño. Podemos ver el resultado final del ejercicio en una página aparte.
Para el ejemplo utilizo varias imágenes que he puesto en un archivo para descarga. Como veréis, hemos utilizado imágenes en formato png, porque se adaptan mejor a nuestras necesidades, por el adecuado tratamiento que da el formato png a las transparencias.
Como decía, lo bueno de este sistema es que soporta cajas de cualquier anchura o altura. Pero no sólo eso, sino que también permite cajas de cualquier color de fondo que se quiera emplear, utilizando las mismas imágenes para crear el efecto de esquinas redondeadas.
La técnica que se utiliza en este caso es la utilización de pseudo-elementos after o before, para insertar antes y después del recuadro las imágenes con borde redondeado en las cuatro esquinas. Para ello se han creado las siguientes definiciones de estilos CSS.
.redondeado:before {
background: transparent url(arr-der.png) scroll no-repeat top right;
margin-bottom: -10px;
height: 14px;
display: block;
border: none;
content: url(arr-izq.png);
padding: 0;
line-height: 0.1;
font-size: 1px;
}
.redondeado:after {
display: block;
line-height: 0.1;
font-size: 1px;
content: url(aba-izq.png);
margin: 2px 0 0 0;
height: 14px;
background: transparent url(aba-der.png) scroll no-repeat bottom right;
padding: 0;
}
Como se puede ver, se ha creado una clase "redondeado" utilizado las cuatro imágenes de las esquinas, insertándolas como contenido y fondo de los elementos de antes y después del elemento HTML que deseamos que aparezca redondeado.
La definición de la clase redondeado se completa con otras declaraciones de estilos:
.redondeado * {
padding-left: 25px;
padding-right: 25px;
}
.redondeado {
padding: 0;
background: #993333;
color: white;
margin-right: -1px;
}
La primera sirve para indicar que cualquier etiqueta o elemento que se coloque dentro de la caja con class=redondeado tenga un espaciado a la derecha y la izquierda.
En la segunda declaración se añaden nuevos estilos a la clase redondeado, entre los que se incluye el color de fondo.
El código HTML para hacer una capa con esquinas redondeadas sería el siguiente:
<div class="redondeado">
<p>
Texto de la caja con esquinas redondas?
</p>
</div>
Se puede ver que el código HTML queda extremadamente limpio.
Podemos experimentar con diversos colores de fondo para el elemento o la caja con las esquinas redondeadas, para adaptarlas a nuestras necesidades. Dejo aquí dos enlaces al mismo ejercicio simplemente cambiando el color de fondo:
Esta técnica tiene un problema, lamentablemente bastante gordo, que no funciona en Internet Explorer porque no tiene en cuenta los pseudo-elements after y before. En Internet Explorer 7 no funciona y no lo he probado todavía en Internet Explorer 8, que ya está en fase beta. Pero esperemos que el navegador de Microsoft se adapte pronto a las características avanzadas de CSS2.
+ 1 categoria relacionada
+ 4 comentarios (Añadir)
+ 2 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 4 comentarios revisados |
El sistema es es este: poner en el estilo del elemento que se quieran redondear las esquinas -moz-border-radius: n n n n, donde n sera el valor del radio. Empieza por la esquina superior izquierda, sigue por la derecha, inferior izquierda e inferior derecha.
Por ejemplo:
.roundBox { width: 150px; height: 50px; -moz-border-radius: 15}
Aqui las cuatro esquinas tienen la misma forma.
Y gracias por notificar al correo de las cosas nuevas que tienen.
Ejemplo:
.roundBox { width: 150px; height: 50px; border: 1px solid #333; -moz-border-radius: 15 }
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
