Hace algunas semanas se me ocurrió leer un artículo de Chris Coyer sobre el border-radius, el cual me sirvió de acicate para estudiar eso que tanto tiempo he querido hacer.

En la figura de abajo, ¿qué botón parece lucir mejor? ¿Alguna vez has diseñado un botón o, en general, un rectángulo redondeado anidado dentro de otro y preguntado después cuál debería ser el radio interior o exterior adecuados, o viceversa? Es lo que vamos a averiguar.

Cuatro maneras de crear rectángulos redondeados anidados.

Por ejemplo, si quieres crear un botón con margen interno, puedes,

1. Usar un radio que le dé buena apariencia.
2. Usar el mismo radio para ambos rectángulos redondeados.
3. Duplicar la capa rectangular externa y transformarla libremente para crear el rectángulo interior.
4. Ajustar el radio interior al externo restándole la anchura del borde.

¿Qué método elegir?

Dada la candidez de nuestros ojos no confiaría en la opción 1. Es obvio que la opción 2 no funciona. Las opciones 3 y 4 parecen tener un método detrás. Así que vamos a deliberar entre estas dos opciones para elegir la adecuada.

1. Mirando el rectángulo externo elijo una anchura, tres radios externos y seis anchuras de borde. Dibujo 18 rectángulos en capas en Photoshop.
2. Creo el rectángulo interior a) transformando libremente una copia del exterior (para la opción 3) y b) aplicando un trazo interior de tamaño igual al de la anchura del borde (para la opción 4).
3. Veamos los resultados.

La opción 4 es la elegida

Está claro, viendo los resultados, que la opción 4 funciona bien con todas las anchuras de borde, desde los 24 píxeles hasta 1 píxel Y sí, Photoshop también lo hace bien. Así que la fórmula es simple: Radio Interno = Radio Externo – Anchura de Borde.

La búsqueda continua

¿Finaliza la búsqueda aquí? Bien, aún no hemos acabado. ¿Cuántos casos conoces en los cuales la anchura del borde es más grande o igual que el radio externo, el radio interno es cero y el botón es simplemente una forma cuadrada? ¿Tiene buen aspecto? ¿Es posible mejorarlo? ¿No tendría mejor aspecto con las esquinas ligeramente redondeadas?

Entramos en la siguiente fase del estudio. En la jerga de la Ingeniería Mecánica, esa porción redondeada es llamada relleno*, y la operación mecánica que ejecuta el relleno se llama rellenar (poseo un título en Ingeniería Mecánica en Bachelor). En nuestro caso, ¿hace el relleno que el diseño sea mejor? Y si es así, ¿cuál debería ser el radio del relleno y cómo deberíamos calcularlo?

Rellenar mejora el diseño

Para averiguar si hace que el diseño sea mejor elegí esas formas cuadradas e intenté rellenarlas con un radio de 2, 4, 6 y 8 píxeles. La tabla que hay debajo muestra los resultados. Puedes ver que el relleno, con un radio particular de relleno, mejora el diseño.

Quería ver si el radio que funciona con los tamaños pequeños funciona con los grandes también. Así que intenté doblar y cuadruplicar el botón, y de nuevo muestro los resultados. El mejor aspecto de radio rellenado se alcanza incrementando el tamaño del botón.

¿Cuál es la fórmula para el relleno de radios?

Quería averiguar si hay una fórmula que determine el mejor radio de relleno. ¿Es posible? Sí. Si digo que te doy 4 dólares si me das 2, 12 por 6 y 50 por 25, fácilmente sacarás la fórmula. Matemáticamente, puedes hacer esto colocando los datos (2-4, 6-12 y 25-50) en un gráfico y encontrando la fórmula de la línea curva que conecta todos los puntos de datos, lo que usualmente se llama proceso de Relleno de Curva.

¿Qué par de datos elegir? Uno es el radio de relleno; el radio de relleno que me parezca mejor (nos alejamos del territorio de la ciencia ahora). ¿El otro?, parece que podría ser el radio externo, pero quién sabe, incluso la anchura de borde podría jugar un rol importante. Así que preparamos dos gráficos, uno para enterarnos cómo el borde interior varía con respecto al borde exterior y el otro para enterarnos de cómo varía con respecto al borde de radio. Abajo están los gráficos. Nota: los resultados podrían variar si repites el experimento eligiendo el radio de relleno que te parezca mejor debido a que en algunos casos no está claro qué radio de relleno tiene mejor aspecto y por lo tanto podrías elegir un radio de relleno diferente.

El radio interior parece incrementarse con ambos, el radio exterior y la anchura de borde, pero no suavemente. Hasta donde yo sé, el ejercicio de ajuste de la curva podría producir una fórmula con sentido solo si la curva sigue un patrón. Cada patrón podría ser una línea recta, una parábola, una onda de función trigonométrica, etc. Pero la curva planteada es tan “dentada” que tengo serias dudas de que realmente contenga un patrón.

Hice el ejercicio entero basándome en mis oxidados conocimientos matemáticos. Podría haber echado de menos algo o igual no le he dado suficiente importancia a algunos puntos. Si alguien que esté mejor informado quiere asumir el ejercicio e intentar sacar algo más en claro estaré contento de ver los resultados. Pero por ahora parece, después de todo, que tendremos que confiar en nuestros ojos a la hora de elegir el mejor radio de relleno. No es algo que guste, pero es lo que hay. No obstante, hay que recordar que hemos establecido la fórmula del radio interno. Es la fórmula del radio de relleno la que está jugando a esconderse.

Sumario

La próxima vez que quieras crear rectángulos redondeados anidados sigue este consejo para obtener los mejores resultados:

1. Radio Interno = Radio Externo – Ancho de Borde
2. Si el radio interno = 0, rellénalo. Encuentra el mejor relleno ojeándolo (para radios externos menos de 100px, el mejor radio de relleno podría estar en cualquier lugar en el rango de 1px a 15px).

Rakesh