13 Mar
3 Comentarios

Esquinas redondeadas con DD_roundies

Publicado por Pablo Montero hace 12 meses en: Desarrollo, Herramientas, Magento, Útiles

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

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!

3 Comentarios


  1. Hola Pablo,

    Excelente tutorial. La verdad es que me ha funcionado a la primera. Estaba pensando en cambiar de skin, pero creo que con un redondeo de esquinas puedo pasar de momento.

    Una pregunta: ¿sabes como puedo saber los nombres de los selectores CSS de otros elementos como, por ejemplo, los selectores del bloque de “boletín de noticias” o “newsletter”?

    #1
  2. El enlace que da para bajar el archivo js está roto. Podría ofrecer uno alternativo por favor. Muchas gracias

    #2
  3. El enlace de momento funciona (acabo de descargar)

    Lo que no encuentro es la carpeta “layout” dentro de ningúno de mis skins.

    #3

Dejanos un comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con *


Los comentarios son responabilidad de su autor y sujetos a moderación