Cuadros de bordes redondeados con CSS (II)
Mayo 20th, 2008
Aquí esta la segunda parte del tutorial para crear cuadros con bordes redondeados (pueden ver la primera aquí). Decía que podría interesarnos que el área de trabajo (donde insertar texto, imágenes, tablas, etc.) incluyera bordes y esquinas como marca la imágen; para, por ejemplo, insertar elementos en cuadros de poca altura.
¿Por qué no usar una única imágen de fondo? Para que los cuadros puedan expadirse o contraerse según el contenido.
Aquí va el código:
Código CSS
#cuadro2{
background-color:#009232;
border: 0px;
padding:0px;
width: 178px;
}
.arribaizquierda2{
background: transparent url(arriba-izquierda.png) scroll no-repeat top left;
padding: 0;
display: block;
}
.arribaderecha2{
background: transparent url(arriba-derecha.png) scroll no-repeat top right;
padding: 0;
display: block;
}
.abajoizquierda2{
background: transparent url(abajo-izquierda.png) scroll no-repeat bottom left;
padding: 0;
display: block;
}
.abajoderecha2{
background: transparent url(abajo-derecha.png) scroll no-repeat bottom right;
padding: 0;
display: block;
height: 178px;
}
.medio2{
display: block;
margin:0px;
}
.textofooter{
padding-left: 11px;
padding-top: 0px;
}
Código HTML
<div id=”cuadro2″>
<span class=”arribaizquierda2″>
<span class=”arribaderecha2″>
<span class=”medio2″>
<span class=”abajoizquierda2″>
<span class=”abajoderecha2″>
<!– Contenido del cuadro (empieza) –>
<span class=”textofooter”>texto, texto, texto</span>
<!– Contenido del cuadro (termina –>
</span></span></span></span></span></span>
</div>
Nota (importantísima): tengan cuidado si copian y pegan el código desde aquí porque podrían tener errores con las comillas (se pegan comillas no válidas).
Otra cuestión a tener en cuenta es que el formato del texto o lo que inserten dentro del cuadro NO va en la etiqueta .medio2 como era el caso de la otra guía. Creen etiquetas nuevas dentro del cuadro para darle formato al contenido como por ejemplo .textofooter.
5 respuestas a “Cuadros de bordes redondeados con CSS (II)”
Por Damiàn A. el May 20, 2008 | Responder
Yo hace unos dias atras andube buscando como hacer imagenes con bordes redondo y encontre un tutorial para photoshop y mas o menos le agarre la mano , no entiendo como es esto , si vos pones el codigo en frontpage como es el caso del codigo html nunk t va a aparecer la imagen si no la guardas en tu px, no entiendo bien como es….
Bueno saludos y gracias por pasarme el prog el otro dia
Por martin el May 20, 2008 | Responder
No lo aclaré pero en el ejemplo ese estoy suponiendo que las imágenes están en la misma carpeta que el archivo HTML (y la hoja de estilos si es que existiera).
En el caso del FrontPage me parece que tenes que darle guardar además de ubicar correctamente las imágenes. No puedo decir con certeza porque no lo uso.
Cualquier cosa a las órdenes.
Saludos,
martin.-
Por tincho1492 | Martín el May 23, 2008 | Responder
buenisimo… ya me lo aprendi al toque… ah! porque .abajoizquierda2 y .abajoderecha2 definen dos veces el padding? aparece padding: 0 y padding-top: 0… pregunto porque por ahí es necesario… saludos…
Por martin el May 23, 2008 | Responder
Gracias por avisar Martín, no me había dado cuenta. En realidad no es necesario que esté padding-top porque ya está incluído en el otro.
Saludos,
martin.-