http://martin.com.uy/wp-content/themes/martinuy2/live/proxy.php?url_especifica=
0
20
May
2008

Cuadros de bordes redondeados con CSS (II)

bordesredondeadosii

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.

arriba-izquierda arriba-derecha abajo-izquierda abajo-derecha

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.

Ver Cuadros de bordes redondeados con CSS (I)

20
May
2008

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 😛

😀

20
May
2008

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.-

23
May
2008

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…

23
May
2008

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.-

  1. 1 Trackback(s)

  2. May 20, 2008: martin.com.uy » Artículos » Cuadros de bordes redondeados con CSS (I)

Escribir un comentario