Redondear bordes en CSS3

Ahora que le estoy metiendo un poco más al desarrollo web estoy empezando a ver muchas cosas que antes hacía más complicadas y que pueden ser mucho más sencillas, por ejemplo la que comento aquí.

Antes, cuando quería insertar una imagen con las esquinas redondeadas, lo hacía editando la imagen y luego colgando la imagen modificada. Pues resulta que se puede hacer de una forma mucho más sencilla, con CSS3.

La idea (o eso es lo que he visto yo en mis ejemplos) es redondear el borde de la imagen, no la imagen en si y se consigue añadiendo un valor de estilo al elemento de la imagen (o directamente al CSS si queréis aplicarlo para todas). Algo tan sencillo como ésto:

<img style=”-moz-border-radius:10px” src=”miImagen.png” />

Lo que va en negrita es lo que hace que la cosa funcione y creo que se entiende bastante. Ahora, aunque border-radius debería ser una propiedad estándar de estilo en mi firefox (versión 3.0.13 sobre ubuntu) sólo me funciona con el -moz- delante. Otra de las cosas que me estoy dando cuenta, lo de hacer algo y que se vea igual en todos los navegadores es una auténtica fiesta😛

Ésto lo he visto en un post de Web Designer Depot y allí vienen explicados los campos que se pueden usar para otros navegadores (safari) y para redondear sólo ciertas esquinas y más cosillas… echádle un vistazo si os gustan éstas cosas😉

  1. En internet explorer 8, es imposible renderizar esta propiedad (a menos sin modificar un VML, aun así es super engorroso que no tenga soporte).

  2. Interesante, la verdad, si fuera compatible con todos los navegadores ahorraría un montón de complicaciones

  3. La idea es que lo sea, lo que pasa es que antes de que se incluyera como un estándar los navegadores de cada padre y cada madre empezaron a incluir sus propias implementaciones, así que ahora…. a ver que pasa😛

    Eso si, para mi gusto no queda tan bien porque lo que redondea no es la imagen en si, sino el borde de la imagen😦

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: