Una de las principales técnicas que se usan en el diseño Web, al menos últimamente, son los bordes redondeados, o también llamadas esquinas redondeadas. Dentro de la especificación de CSS3 se incorporó la propiedad border radius que permite generar bordes redondeados en un elemento de la página, especificando la curvatura en pixeles. Es una técnica muy útil y sencilla de implementar.
Me encontré con una pequeña herramienta que es muy útil, llamada precisamente border radius que permite generar dinámicamente el código CSS3 para tener bordes redondeados. Algo sumamente práctico es que integra una vista previa en tiempo real, para que se obtengan mejores resultados.
Sólo hay que ingresar el valor (en pixeles) del radio de curvatura de las esquinas, y el sitio automáticamente generará el código CSS correspondiente. También se puede generar código compatible con Webkit y Gecko, dos motores de render que se usan en los navegadores más comúnes y conocidos de Internet (por ejemplo, Safari y Chrome se basan en Webkit, y Firefox en Gecko).
Este es un ejemplo con las esquinas superiores redondeadas en 5 pixeles, y con las esquinas inferiores rectas. El código producido es este:
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;
Enlace | Border Radius
Vía | Web Designer Depot
suscríbete al feed rss
