JCDESIGNER
Diseño gráfico, web y multimedia
Los bordes redondeados en css son otra labor que anteriormente realizabamos con photoshop, pero ahora con esta nueva propiedad de css podemos realizarlo con unas líneas de código, y al igual que con otras variantes del css la ventaja sera el editarlo, pues antes se debía regresar a photoshop y guarnar nuevamente el trozo de imágen que utilizamos, ahora esto ya no es más así, explicaré de forma breve como es que se utiliza.
Border-radius
Si hay algo que nos ahorrará esta propiedad es tiempo, el mantenimiento y edición de un sitio que utiliza esquinas redondeadas con el css3 se ha vuelto mucho mas facil, gracias a la w3c contamos ahora con esta nueva opción, el codigo podemos escribirlo de la siguiente forma: para mozilla firefox -moz-border-radius, para safari y google chrome -webkit-border-radius, ejemplo el siguiente div:
Utiliza las siguientes líneas de código:
estilo. {
padding: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px 10px 10px 10px;
background-color: #FFFF99;
border: 1px solid #FFCC00;
}
De la mimsa manera podemos hacer diferentes variantes entre cada una de las cuadro esquinas:
estilo{
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius:10px;
border: 1px solid #000;
padding: 5px 5px 5px 15px;
}
estilo{
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-right:10px;
padding: 5px 5px 5px 15px;
}
border: 1px solid #000; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; padding: 5px 5px 5px 15px;
estilo{
border: 1px solid #000;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
padding: 5px 5px 5px 15px;
}
estilo{
border: 1px solid #000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
padding: 5px 5px 5px 15px;
}
estilo{
border: 1px solid #000
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
padding: 5px 5px 5px 15px;
}
2 Comentarios »
Desea comentar »
octubre 14th, 2011Mariano Dice:
En OPERA no me sirvio! Sabes como puedo hacer para que me funcione.? Agradeceria por favor, que me escribieras tambien a mi email. Saludos y muchas gracias. Suerte!
octubre 14th, 2011jcdesig Dice:
Hola Mariano te soy sincero en decirte que no utilizo opera, pero según veo en su website dice que da soporte de CSS3 por lo que deberia funcionar pero eso es para opera versión 11.51, eso lo dice acá.
http://www.opera.com/docs/specs/presto26/css/backgroundsborders/
Tal vez si escribes por separado cada una de las esquinas:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
border-top-left-radius:
Suerte y espero haberte ayudado.
