Revolviendo un poco el diseño de PHPBB3, encontré por allí una forma fácil para obtener bordes redondeados con CSS sin tener que recurrir a javascript.
Lo más interesante reside en las imágenes que utilizaremos. Éstas serán dos GIFs transparentes que, su color debe ir de acuerdo al fondo de nuestra página. Si el fondo es de color blanco, serían de la siguiente manera:
En donde el área oscura-cuadriculada es la región transparente.
El tamaño de la imagen, para que pueda ser apreciada es de 120 x120 px.
Necesitamos cortar la imagen en dos partes, quedando de la siguiente manera:
Ahora, dependiendo de que tan “redondeadas” quieres las esquinas, es el tamaño que le daremos a la imagen, el tamaño sugerido es de 12x6 px para cada una:
Lo sé, no las puedes ver, pero están allí . Las he llamado: "LC.gif" y "RC.gif" respectivamente.
Ahora en nuestro CSS necesitaremos lo siguiente:
Código :
/* Este es el contenedor al que le pondremos bordes redondos */
div.round{
width:300px;
height:auto;
background:#ECF5FF;
}
/* En este contenedor va todo lo que queremos mostrar. No le damos margen vertical puesto ese lo generarán los span del borde */
div.contenido{
margin:0 10px;
}
/* Generamos los estilos de las span, los cuales contendrán las imágenes GIF */
span.top, span.bottom{
width:100%;
height:6px; /* El alto debe ser la mitad de alto de la imagen GIF */
display:block;
}
/* A continuación viene el verdadero truco, la posición de las imágenes de fondo es importante*/
span.top {
background:url(LC.gif) top left no-repeat;
}
span.bottom{
background:url(LC.gif) bottom left no-repeat;
}
span.top span, span.bottom span{
width:6px; /* De acuerdo al tamaño de la imagen GIF */
height:6px; De acuerdo al tamaño de la imagen GIF */
float:right;
font-size:6px; /* Esto es para IE6, que no respeta el height del span si el tamaño de letra es mayor a este */
}
span.top span{
background:url(RC.gif) top right no-repeat;
}
span.bottom span{
background:url(RC.gif) bottom right no-repeat;
}
Ahora en nuestra página utilizamos el estilo de la siguiente manera:
Código :
<div class="round">
<span class="top"><span></span></span>
<div class="contenido">
Esto es el contenido del DIV con bordes redondeados
</div>
<span class="bottom"><span></span></span>
</div>
Y esto es una muestra del resultado:
Las ventajas de hacerlo de esta forma es que:
Puedes cambiar de color tu contenedor sin tener que cambiar las imágenes de los bordes.
Puedes darle al contenedor ancho o alto relativos y no pierde su diseño.
Incluso puedes dar un efecto de fondo degradado sin tener que cambiar las imágenes de los bordes. Por ejemplo:
O puedes incluso utilizar un patrón de fondo y tampoco afecta.
Muy útil, yo usaba una forma menos flexible.
¡Buen tip! Por:ivanfc0o
Sois la bomba, que fácil y qué estupendo para crear capas, y similares.
¿Se puede hacer algo parecido en una tabla para qué tenga los bordes exteriores redondeados? Por:sarape-blog
El problema de usar el formato GIF es que solo soporta transparencia al 100%, es decir que el anti-aliasing (suavizado) es impensable.
Los bordes de nuestros cuadros redondeados se verán "cortados", lo que no es muy estético.
Se puede lograr lo mismo con png32, más el suavizado en los bordes, pero con la desventaja de la incompatibilidad en navegadores antiguos (entiéndase Ie6 y peores).
Una idea útil sería emplear condicionales para ie6, y una hoja alternativa donde se usen bordes en gif para sustituir los png32.
Muy buen tip! pero.. Observen este sitio http://www.roundedcornr.com/ los que se quieran ahorrar un poco de tiempo o simplemente estan con mucha prisa!! El css que genera es el mismo que el del arriba. Por:Anonimo-blog
El problema surge cuando tenes un fondo gradient... los bordes dejan de ser generales. Por:Loon-blog
Yo lo hago con unas 9 divs (uno dentro de otro) y asi hago los marcos expandibles pero tu aportacion esta muy bien siempre y cuando tengamos definido un color de fondo.
=) Por:quien yo?-blog
Hola, a mi solo me aparecen redondeadas las esquitas superior e inferior izquierdas, las otras salen normales, pensaba que era la imagen RC.gif, pero al cambiar
span.top span{
background:url(RC.gif) top right no-repeat;
}
por
span.top{
background:url(RC.gif) top right no-repeat;
}
Me aparecio el borde de superior derecho redondeado, pero obvio el izquierdo sup, desaparecio.
Alguien sabe q pasa?
Gracias de antemano Por:Juan-blog
Hola: Excelente Tip!
Creo descubrir el errorcillo de tipeo
height:6px; De acuerdo al tamaño de la imagen GIF */
falta un /* inicio de comentario
Saludos! Por:Olaznog-blog
Gracias por el tip! Anonimo-blog, impresionante web la de http://www.roundedcornr.com/, muchas gracias por poner el enlace Por:espidifen33
Muy útil la verdad, cualquier cosa te aviso!, un abrazo! Por:Julito-blog
oie, tengo un problemota con mis contenedores.. no se que hice en la CSS que hay un espacio entre mi ultima linea de texto y el margen final...
alguien me puede auxiliar?
muy ben tutorial, btw.
lille//poemsandreaders.info
p.d. otra cosota, en la pagina de un afiliado en sus imagenes para tutoriales de iconos, tiene un efecto asombroso en hover... creo q no me explico.. hehe.. bueno en un link- que es una imagen, la cual tiene un borde- cuando pasas tu mouse sobre ella, el borde se torna amarillo, alguien sabe como hacerlo? Por:Lille-blog
Hola Lille-blog, tal ves si nos muestras el código podamos ayudarte mas facil. Luego para tu otra duda, seria bueno q nos muestres mediante un link el ej de lo que estas buscando.
Saludos Por:il fass
.asdf Por:a..-blog
Excelente, solo que no se como va en el contexto de la pagina.. por que no me dibuja en marco y tampoco el color..
Pero se ve que funciona bien.. Por:alfon-blog
necesito que alguien me ayude, no hace mucho que estoy con css, y esto me vino al pelo, lo que si, no puedo hacer bordes con gradiente, alguien me podria explicar??
. Las he llamado: "LC.gif" y "RC.gif" respectivamente.
