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

Cuadros de bordes redondeados con CSS (I)

Desde hace algunos días estoy trabajando en el rediseño del sitio Cafe Montevideo. Uno de los retos fue crear cuadros con bordes redondeados Encontré en la web mil formas de hacerlo: algunas con CSS, otras con Javascript, algunas sin usar imágenes en las esquinas (bordes ásperos) y otras usando (bordes suavizados).

Exceptuando los que tenían Javascript, probé 30 códigos distintos y ninguno se mostraba correctamente. Cuando la mezcla era ya ininteligible y la paciencia estaba por agotarse, pensé en escribirlo desde 0. Al final quedó y quiero compartir el código (CSS + imágenes).

bordesredondeados

Imágenes (esquinas):

arribaizquierda arribaderecha abajoizquierda abajoderecha

Código CSS:

#cuadro1{
width:178px;
padding:0px;
border: 0px;
background-color:#004892;
}
.arribaizquierda{
background: transparent url(arriba-izquierda.png) scroll no-repeat top left;
height: 20px;
padding: 0;
display: block;
}
.arribaderecha{
background: transparent url(arriba-derecha.png) scroll no-repeat top right;
height: 20px;
padding: 0;
display: block;
}
.abajoizquierda{
background: transparent url(abajo-izquierda.png) scroll no-repeat bottom left;
height: 20px;
padding: 0;
display: block;
}
.abajoderecha{
background: transparent url(abajo-derecha.png) scroll no-repeat bottom right;
height: 20px;
padding: 0;
display: block;
}

.medio{
display: block;
background: #004892;
margin:0px;
height: 138px;

}

Código HTML:

<div id="cuadro1">
<span class="arribaizquierda">
<span class="arribaderecha"></span></span>
<span class="medio">
<!-- Contenido del cuadro (comienza) -->

texto, imagenes, etc.
<!-- Contenido del cuadro (termina) -->
</span>
<span class="abajoizquierda">
<span class="abajoderecha">
</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).

Configurar los parámetros

  • El atributo height de las clases .arribaderecha, .arribaizquierda, .abajoderecha y .abajoizquierda corresponde al alto de las imágenes que usamos para las esquinas.
  • Para cambiar el color de fondo deben modificar background en #cuadro1 y las imágenes.
  • El ancho del cuadro está definido por width en #cuadro1.
  • El alto lo pueden dejar con padding en .medio (según el contenido) o con height en la misma clase (estático). No lo vayan a poner en #cuadro1.

Obviamente pueden agregar más parámetros, el código aquí presentado es básico.

Quizás parezca un poco largo pero tengan en cuenta que la mayor parte del código la pueden reutilizar para cuadros con anchos, largos y formatos distintos.

¿Qué son las líneas punteadas?

Las líneas punteadas indican el área “real” del cuadro, o sea el espacio donde pueden agregar contenido. Podría ocurrir que en algún caso quieran trabajar en todo el espacio visible (incluyendo bordes). La cuestión se complica un poquito en ese caso y preferiría publicarla en un artículo separado.

Ver Cuadros de bordes redondeados con CSS (II)

18
May
2008

Siempre tuve problemas para tratar de hacer bordes curvos. Ahora con los obligatorios de la facultad estoy bastante alejado del diseño y programación web, pero voy a tener en cuenta todo esto para la próxima.

El diseño de Café Montevideo está realmente bueno!

Saludos

18
May
2008

Martín, me vas a odiar, pero en Safari se están viendo así los bordes:

18
May
2008

Ok, no anduvo el “”, así que va el vínculo.

18
May
2008

Ah, bueno, se ve que elimina todo lo que parezca código.
En fin, se entendío. Jejejeje.

18
May
2008

Uyy… ya le tenía idea a Safari -desde que lo probé en Windows y no me gustó- así que ahora baja 50 puntos 😆

Sospecho que el problema está en las imágenes PNGs que tienen los colores alterados. Es un error grosero que algunos navegadores no cuiden eso ya que PNG es un formato fuerte, extendido y volcado a la web. Al Internet Explorer 6 le pasaba algo así con el canal alpha (transparencia); afortunadamente en la versión 7 lo corrigieron.

Yo lo probé en el IE7 y se ven bien las esquinas redondeadas. El resto del sitio no porque el IE7 es un ORDINARIO con los estándares.

Muchas gracias por el aviso! Se podría solucionar usando imágenes JPG. Como no estoy usando transparencia (no me animo porque algunos navegadores hacen desastres con los PNG con transparencia), podríamos cambiar de un formato a otro sin drama.

De todas formas… el Firefox es lo más grande =)

Saludos.

18
May
2008

esta muy bonito el diseño de cafe montevideo
felicitaciones

18
May
2008

Safari es muy compatible con los estándares, acordate que está basado en WebKit (y que un build en desarrollo fue el primero en pasar el Acid3).
El tema de los PNG (estuve averiguando) se da por la corrección de Gamma que es una función intrínseca de los PNG. El problema es que no tiene en cuenta que a veces el color debe coincidir con otros alrededor. Acá más info.
También puede ser que hayas usado un entorno de color incorrecto en la aplicación que creó el PNG.
De última podés pelarle la info de Gamma a los PNG con ésto.

Y está todo bien con Firefox, pero Safari se lo come en dos panes, jejeje.

19
May
2008

Te agradezco los links.

Por suerte no trabajo como diseñador web porque me fastidia tener que adaptar las webs a los distintos navegadores, cada uno con sus caprichos! jajaj

El PNG fue creado con Photoshop y el color pasado por hexadecimal por lo que descarto que haya una diferencia entre el fondo de la página y el fondo del archivo.

Saludos,
martin.-

19
May
2008

Buenisimo el tuto!!… felicitaciones por el diseño de café montevideo… saludos…

20
May
2008

Muchas gracias martín. En realidad no era mi intención presentar el diseño de Café Montevideo en este post, lo voy a hacer cuando esté terminado.

Saludos,
martin.-

20
May
2008

Buenas, buenas..
me tomo el atrevimiento, aunque el diseño ya esté pronto y haya quedado muy bueno, de dejar este enlace para el que le interese (supongo que está dentro de los 30 🙂
bordes redondeados no imagenes
aunque siempre es menos complicado usar imagenes..
Saludos

20
May
2008

Muchas gracias por el link. Sin dudas que son más fáciles. Inclusive llegué a un sitio con un generador para ni siquiera ponerse a modificar el CSS a mano. El tema por el cual los descarté fue que quedan pixelados. Capaz que cuando navegamos no prestamos mucha atención pero la mayoría de los sitios usan imágenes para los bordes.

Saludos,
martin.-

27
Apr
2009

Martín, soy principiante en esto de los sitios web y me gusto mucho lo que realizaste con la página de cafe montevideo, mas no me salen las esquinas redondeadas, no se si pudieras enviarme un correo, para ver si tienes manera de apoyarme por favor, te lo agradeceria mucho, gracias

6
May
2009

Fernando, gracias por tu comentario. Preferirías que me cuentes el error en concreto para poder ayudarte, sino es muy difícil. Espero tu respuesta.

Saludos,
martin.-

7
Jul
2010
-kidd-

Hola Martín. Con respecto al tema de bordes redondeados, la forma de solucionarlo que adoptaste fue la misma que adopté yo luego de batallar un tiempito. Claro está que el problema lo tenía en IE (toco madera). Sin embargo esto me trajo un nuevo problema y es que IE y Mozilla tienen un pequeño defasaje a la hora de interpretar el ancho de los DIVs. Asi que en IE me quedaba el ancho de la caja central un par de pixeles menor al largo total del borde izq centro der. Asi que, para evitar esta clase de problemas entre navegador y navegador deberían implementarse dos métodos dentro de los estilos CSS para redondear los bordes: el método -moz-border-radius: para mozilla y en IE utilizar las imágenes de las esquinas. Eso resolvió el problema y solo agregando una línea en los estilos CSS. Es cosa de probar ^^

Saludos.

30
Dec
2015

Este resultado se origina en las acciones de preparación para emprender de forma exitosa los procesos de apertura y competencia.

  1. 1 Trackback(s)

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

Escribir un comentario