CSS - DIV ESQUINAS REDONDEADAS

DIV ESQUINAS REDONDEADAS

Publicado por Emilio (1 intervención) el 24/08/2008 21:27:25

A ver si alguien me puede ayudar:
Necesito hacer una web con un div principal clásico en el centro de la pantalla con bordes redondeados y con imagenes en los bordes como se ven en diferentes web pero ni idea como se hace vi unos códgios pero quisiera entenderlo y no copiar y pegar nomás.

bueno gracias

chaussssssssss.

Emilio

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

RE:DIV ESQUINAS REDONDEADAS

Publicado por Melvin Nava (9 intervenciones) el 28/12/2008 12:50:27

1. Crea los cuatro bordes con un color determinado y las guardas como imagenes individuales (abajo-izql.gif, abajo-der.gif, arriba-izq.gif, arriba-der.gif) , preferiblemente en un programa confiable como Photoshop.

2. Colocas esta hoja de estiles dentro del <head> de tu página html:

<style>
.abajo-izql {background: url(abajo-izql.gif) 0 100% no-repeat #e68200; width: 20em}
.abajo-der {background: url(abajo-der.gif) 100% 100% no-repeat}
.arriba-izq {background: url(arriba-izq.gif) 0 0 no-repeat}
.arriba-der {background: url(arriba-der.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
</style>

La clase .abajo-izql establece el color de la caja en #e68200, esto debe cambiarse al color que usuaste en los bordes, o viceversa.

3. Ahora colocas tu contenido dentro del cuerpo dela página html:

<div class="abajo-izql"><div class="abajo-der"><div class="arriba-izq"><div class="arriba-der">
Este es el contenido dentro de la caja redondeada. Voala!!
</div></div></div></div>
<div class="clear"> </div>

Listo!!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

vinculos con css

framework css