DD_roundies es uno de los muchos scripts que existen para redondear fácilmente las esquinas de algunos elementos que conforman el diseño de una página web. En mi opinión esta librería javascript es la más completa y eficaz en su desempeño: es super ligera (9Kb), establece directamente los radios de los navegadores modernos (-moz-border-radius, -webkit-border-radius, border-radius), soporte excelente para IE (excepto IE8), las reglas del redondeo se configuran en un momento, se puede desactivar el script si no quieres que funcione sobre Internet Explorer, y tiene múltiples funcionalidades que son explicadas por su autor en este post.
Vamos a implementar DD_roundies con Magento en 4 pasos sencillos, y configuraremos varias reglas con un ejemplo rápido. En la siguiente imagen, tenemos a la derecha la caja de login en su diseño original del theme default, mientras que a la izquierda tenemos la caja de login redondeada con DD_roundies:
Esquinas redondeadas con DD_roundies
Paso 1. Descargar DD_roundies
Descárgate el javascript de la página del autor. Elige el archivo comprimido pues sólo nos ocupará 9Kb. Desde tu navegador, puedes guardar el documento mediante el menú Archivo / Guardar como.
http://www.dillerdesign.com/experiment/DD_roundies/#download
Paso 2. Mover el javascript a nuestro skin
Ya tenemos guardado DD_roundies_0.0.2a-min.js, ahora cópialo a la carpeta skin/frontend/default/tu_theme/js
Paslo 3. Llamar al javascript desde el layout
Primero abre el archivo page.xml, situado en app/design/frontend/default/tu_theme/layout. Y localiza el bloque
<block type="page/html_head" name="head" as="head">
Después de la última línea contenida en dicho bloque, introduce esta línea y guarda el archivo:
<action method="addItem"><type>skin_js</type><name>js/DD_roundies_0.0.2a-min.js</name></action>
Paso 4. Añade las reglas del script en head.
Abre el archivo head.phtml, situado en app/design/frontend/default/tu_theme/template/page/html
Al final del todo, pega el siguiente script que hemos usado en la imagen de ejemplo:
<script>
DD_roundies.addRule('.login-box .col-1, .login-box .col-1 .form-button', '18px', true);
DD_roundies.addRule('.col-1 .content', '18px 18px 0 0', true);
</script>
Como puedes observar, hemos añadido 2 reglas (una por cada línea). Cada regla tiene 3 valores (’valor1′, ‘valor2′, ‘valor3′), de los cuales los 2 primeros son obligatorios.
Valor 1: especificas qué selectores CSS quieres redondear (puedes añadir más de un selector si los separas por comas). En el ejemplo, tenemos: .login-box .col-1 y .login-box .col-1 .form-button para la primera regla; y .col-1 .content para la segunda regla.
Valor 2: especificas qué radio tienen las esquinas. 18px redondea las 4 esquinas a la vez, mientras que 18px 18px 0 0 redondea en éste orden: 18px la esquina superior izquierda, 18px la esquina superior derecha, 0px no redondea la esquina inferior derecha, y 0px no redondea la esquina inferior izquierda.
Valor 3: si pone true, se aplicará el redondeo en todos los navegadores; por contra, si pone false, el redondeo no se aplicará en el Internet Explorer.
Para finalizar, pregúntate si te conviene aplicar esta técnica en tu diseño. Redondear las esquinas es un recurso más, que puedes o no utilizar para el aspecto visual de tu web. Redondear por redondear no va a mejorar un diseño mal planteado. Use at your own risk!
