Bordes Redondeados en todos los exploradores con CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Bordes Redondeados en todos los exploradores con CSS3

Una de las cosas que frenan un poco la evolución de web es el tiempo que tardan algunos exploradores adoptar las innovaciones de los códigos más usados como HTML y CSS. En el caso que tratamos me refiero a CSS3, que incluyen una gran cantidad cosas nuevas que nos facilitan la vida a la hora crear nuestros sitios y a su vez le ofrecen una mejor experiencia al visitante. Pero la realidad es que algunas cosas como los bordes redondeados con CSS3 solo es visible en los exploradores más modernos, por esa razón debemos aplicar algunas líneas de código adicional para que sea visible en la mayoría de ellos.

Debemos tener en cuenta que como desarrolladores siempre buscamos escribir para todos los exploradores, pero literalmente esto es imposible dado que algunas versiones inferiores a IE6 nos triplicarían el trabajo, además el porcentaje de personas que usa esa versión es mínimo. Por eso la mayoría nos enfocamos en trabajar en IE8 en adelante. Firefox, Chrome y Opera se actualizan automáticamente y eso en cierto modo ayuda que los usuarios mantengan la última versión de su explorador.

Pero empecemos con el código. Para lograr el cometido usaremos cuatro líneas, una para Firefox, otra para IE8 y otra para Zafari, Opera y Chrome. Además del estandart.

.borde-redondeado{
-moz-border-radius: 20px; /* Firefox*/ 
-ms-border-radius: 20px; /* IE8.*/ 
-webkit-border-radius: 20px; /* Safari,Chrome.*/ 
border-radius: 20px;  /* El estándar.*/
}

El tamaño en pixeles debe ser el mismo para todos.

Etiquetas:

Trackback desde tu sitio.

Comentarios (1)

  • Carlos

    |

    Hola,
    Buscando una solución para mi humilde blog, he dado con este lugar, y viendo que dominas el tema wordpress, me gustaría hacerte un par de preguntas.
    Estoy buscando una forma de que los últimos 5 o 10 posts que pongo en dos categorías determinadas, aparezcan en portada. Lo conseguí viendo un tuto en el que editando el archivo functions.php de mi theme (elbee elgee) y luego colocando un shortcode en la página principal.

    El problema es que el estilo resultante es demasiado básico, y la temática de mi blog requiere de algo más vistoso, como por ejemplo un recuadro para cada “noticia” en el que aparezca una imagen y cierta cantidad de palabras.

    Entonces, mi preguntas son las siguientes: ¿existe algún widget para hacer eso que quiero? He probado unos cuantos “related post” y no me funciona ni uno, igual lo que busco es otra cosa.

    ¿Se podría hacer que el código php llamase a algún tipo de función css para realizar eso que quiero? Y de ser posible, ¿cómo lo haría?

    Por último, comentarte que estoy seguro que como yo hay más gente por ahí que quiere una portada vistosa, y toda la información que hay es muy sesgada o es para muy profesionales, así que, me atrevo a pedirte que un día hicieses un tuto para novatos de este tipo de problemas.

    Muchas gracias por leerme y un cordial saludo.

    Responder

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs