Siempre me a impresionado ver en otras paginas el estilo de bordes redondeados o Border Radius con CSS lo que le daba a la web un muy buen estilo. Encontré una pagina muy buena y fácil llamada Border Radius y a continuación les muestro una explicación de como usarla:
Entrar a Border-Radius.com
Entramos al sitio Border Radius y nos encontramos con esto:
Funciones y capacidades de Border-Radius.com
En la parte de Abajo se encuentran Marcados WebKit, Gecko, CSS3. Estos son motores de render de los navegadores.
Webkit: Es un motor renderizado. Funciona como base para Safari y Google Chrome. En el CSS se representa:
Código :
-webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius[/css] [b]Gecko:[/b] Es el motor de render usado por Firefox y en CSS se representa con : [css]-moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
CSS3 o W3C: Esta es la forma correcta, que aun no la implementan muchos. Cada navegador (menos Opera y Explorer) tienen su propia implementación, pero esta es la forma estandar:
Código :
border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
Hay otro que aunque no viene en la pagina se los voy a explicar:
Khtml : Este fue creado para el navegador Konqueror que ya después fue adaptado por apple para su navegador Safari y en el CSS se representa:
Código :
-khtml-border-radius -khtml-border-top-left-radius -khtml-border-top-right-radius -khtml-border-bottom-right-radius -khtml-border-bottom-left-radius
Elegir redondez de las esquinas de tu caja en border-radius
En esas esquinas marcadas en la aparte anterior es donde debes ingresar el numero en pixeles de el grado de redondez deseada lo cual nos dará:
Eso es todo este tutorial. Es el primero que hago para esta comunidad y espero que les sirva de algo que es el objetivo
El sistema está en: http://border-radius.com/
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Inyaka el 29 de Septiembre de 2010
por cierto otra propiedad genial de css3 es text-shadow
Por douglasfugazi el 30 de Septiembre de 2010
Por skabeche el 30 de Septiembre de 2010
border-radius: 10 20 10 20;
Por skabeche el 30 de Septiembre de 2010
border-radius: 10px 20px 10px 20px;
Por torrealbaruben el 30 de Septiembre de 2010
Me pregunto:
¿Cuál es el empeño en colocar siemprelos bordes redondeados en todos los diseños?
Por Blas el 08 de Noviembre de 2010
Por mark el 25 de Febrero de 2011
Por asindae el 30 de Septiembre de 2011