Foros del Web » Creando para Internet » CSS »

Guía: Esquinas redondeadas con CSS y una imagen para todos los navegadores

Estas en el tema de Guía: Esquinas redondeadas con CSS y una imagen para todos los navegadores en el foro de CSS en Foros del Web. Quizás es un tema que ya se ha resuelto, pero quiero dar mi aporte por acá y recordar que se pueden lograr las esquinas redondedas ...
  #1 (permalink)  
Antiguo 19/06/2010, 23:08
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Guía: Esquinas redondeadas con CSS y una imagen para todos los navegadores

Quizás es un tema que ya se ha resuelto, pero quiero dar mi aporte por acá y recordar que se pueden lograr las esquinas redondedas sin necesidad de CSS3 ni javascript.

Bien, mi método es utilizar una sola imagen, por lo que la carga y la petición es inferior al método de 2 o 4 imágenes para las esquinas. Dentro del CSS, se utiliza primordialmente margin, padding y background. Lo demás es solo estilo tuyo.

Quizás la única desventaja es utilizar 6 divs por caja, aunque por lograr este efecto eso no es nada: solo estropeo visual del código con una etiqueta neutra y no se pierde nada de funcionalidad.

Bien, el truco se basa en lo siguiente:
Cita:
[...] utilizo una sola imagen que contiene las cuatro esquinas juntas formando un circulo, la que en los primeros cuatro divs se posiciona con CSS sin repetirse en cada una de las esquinas. El quinto div cubre 1/2 de cada imagen con rellenos (padding) laterales de tamaño de la mitad de la imagen más un color de fondo, y el último cubre 1/2 de las partes de las imagenes restantes con un margen negativo superior e inferior con las mismas características del anterior.


Un ejemplo:

Código HTML:
<div class="caja2"><div class="c1"><div class="c2"><div class="c3"><div class="c4"><div class="c5"> 
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra metus nec augue feugiat sed facilisis libero convallis.</p> 
</div></div></div></div></div></div> 
Código:
.caja2, .caja2 .c1, .caja2 .c1 .c2, .caja2 .c1 .c2 .c3 {
	background:url('redondo2.png') transparent no-repeat;
}

.caja2 .c1 .c2 .c3 .c4, .caja2 .c1 .c2 .c3 .c4 .c5 {
	background-color:#088;
}

.caja2 {
	width:300px;
	color:#FFF;
	margin:0 5px 10px;
	float:left;
	background-position:bottom right;
}

.caja2 .c1 {
	background-position:top right;
}

.caja2 .c1 .c2 {
	background-position:top left;
}

.caja2 .c1 .c2 .c3 {
	background-position:bottom left;
	padding:0 8px;
}

.caja2 .c1 .c2 .c3 .c4 {
	padding:8px 0;
}

.caja2 .c1 .c2 .c3 .c4 .c5 {
	padding:0 8px;
	margin:0 -8px;
}

.caja2 p, .caja2 ul, .caja2 ol {
	margin:0;
	padding:0;
}
Pueden ver ejemplos funcionando con explicaciones detalladas al final de las hojas de estilo aquí:
http://www.documentoweb.com/ejemplos...dondeadas-css/

Lo genial del código es que funciona correctamente en IE5.5, IE6, IE7, IE8, Firefox, Chrome, Safari y Opera. Y además de esquinas, podemos agregarle sus "add-ons" de bordes y degradados jaja.

Cualquier duda o mal funcionamiento, me avisan :P.
Saludos.

El artículo principal:
http://www.documentoweb.com/CSS/Esqu...CSS-e-imagenes
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #2 (permalink)  
Antiguo 19/06/2010, 23:59
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Guía: Esquinas redondeadas con CSS y una imagen para todos los navegadores

hola Null, buena técnica, y buen sitio el tuyo Siga así, un abrazo.

Etiquetas: cajas, cross-browser, esquinas, navegadores, redondeadas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:38.