fbpx Skip to content

CSS Border-Radius puede hacer eso?

Cómo crear efectos muy cool con una característica raramente utilizada.

TL/DR: Cuando se utilizan ocho valores que especifican el radio del borde en CSS, se pueden crear formas de aspecto orgánico. WOW. No hay tiempo para leerlo todo? - hemos hecho una herramienta visual para ti. Encuéntrelo aquí.

Durante la Conferencia Frontend de este a√Īo en Zurich, Rachel Andrew habl√≥ sobre c√≥mo desbloquear el poder de CSS Grid Layout. Al final de su charla, mencion√≥ algo sobre una vieja propiedad de CSS que se me qued√≥ atascada en la cabeza:

La imagen se redondea con el radio de borde bien apoyado. No olvide que el antiguo CSS sigue existiendo y es √ļtil. No necesitas usar algo elegante para cada efecto.

– Rachel Andrew

Poco después de escuchar esta charla, pensé que se podía crear algo más que círculos y empecé a profundizar en lo que se puede hacer usando el radio de la frontera.

Cómo dominar el radio del borde

Valor individual

Empecemos con lo b√°sico. Espero que esto no te aburra. Probablemente est√© familiarizado con el CSS, y tambi√©n conoce el radio de la frontera. Ha existido desde hace algunos a√Īos, en su mayor√≠a utilizado con un √ļnico valor como este: border-radius: 1em y fue tal vez una de las caracter√≠sticas m√°s discutidas y queridas de CSS3 en 2010, cuando css3please.com era su mejor amigo.

Siempre que se utiliza un solo valor, todas las esquinas se redondean por este valor:

Como puede ver en el ejemplo anterior, junto a los valores de longitud fija como px, rem o em tambi√©n puede utilizar porcentajes. √Čstos se utilizan principalmente para crear un c√≠rculo fijando el radio del borde en el 50%. El valor porcentual se basa en la anchura y la altura del elemento en cuesti√≥n. Por lo tanto, cuando lo utilice en un rect√°ngulo, ya no tendr√° esquinas sim√©tricas. He aqu√≠ un ejemplo que muestra la diferencia entre el radio de la frontera: 110px y el radio de la frontera: 30% aplicado a un rect√°ngulo.

Observa que las esquinas del lado derecho no son simétricas y tenlo en cuenta. Volveremos a esto más tarde.

Cuatro valores diferentes

Cuando se utiliza más de un valor, se comienzan a establecer valores para cada esquina, comenzando en la esquina superior izquierda y luego en el sentido de las agujas del reloj. De nuevo, también se pueden utilizar porcentajes, y también se pueden mezclar porcentajes con valores de longitud fija.

Ocho valores separados por una barra oblicua (aquí es donde se vuelve interesante)

Creo que la mayor√≠a de ustedes ya han hecho todo lo que he explicado anteriormente. Ahora llegamos a la parte emocionante. ¬ŅQu√© sucede si se separan los valores con una barra y se especifican hasta ocho valores? Veamos qu√© dice la especificaci√≥n sobre eso:

Si los valores se dan antes y después de la barra, entonces los valores antes de la barra establecen el radio horizontal y los valores después de la barra establecen el radio vertical. Si no hay barra oblicua, los valores se ajustan a ambos radios por igual.

W3C

Por lo tanto, los valores antes de la barra son responsables de las distancias horizontales, mientras que los valores despu√©s de la barra definen las longitudes verticales. Pero, ¬Ņqu√© significa eso? ¬ŅRecuerda los valores porcentuales en las formas rectangulares? Ten√≠amos diferentes valores absolutos para distancias verticales y horizontales y esquinas redondeadas asim√©tricamente, y eso es precisamente lo que se obtiene cuando se usa la sintaxis de barra oblicua .

Así que cuando comparas el radio de la frontera: 4em 8em al radio de la frontera: 4em / 8em los resultados son muy diferentes.

Las esquinas simétricas de la izquierda forman un cuarto de círculo, mientras que las esquinas asimétricas de la derecha forman parte de una elipsis.

Las formas que se obtienen con esto parecen un poco raras, para ser honesto. Pero recuerda los c√≠rculos que creas con el radio del borde: 50%. Se obtiene un c√≠rculo porque ambos valores que definen un lado suman 100% (50% + 50% = 100%) y no hay una l√≠nea recta a la izquierda, que le recuerda al cuadrado original. Si aplica la misma l√≥gica a la sintaxis completa de ocho valores de radio de borde, puede crear una forma que se parezca un poco a una p√ļa o a una c√©lula org√°nica:


Al final son cuatro elipses superpuestas las que construyen la forma final. F√°cil ha!

No se asuste….Hicimos un generador visual para usted

Me llev√≥ alg√ļn tiempo acostumbrarme a esta sintaxis. De alguna manera no es tan intuitivo. Para hacer las cosas un poco m√°s f√°ciles para usted, hemos construido una peque√Īa herramienta, que le ayuda a crear su propia forma org√°nica.

Cruzar los arroyos

Ahora que conoce los 8 valores en total, puede que se sienta un poco triste, porque nuestra herramienta de radio de borde no le da la opci√≥n de establecer cada valor por separado….Si√©ntese tranquilo, aqu√≠ est√° la versi√≥n de 8 PUNTOS-CONTROL COMPLETO.

Si eres lo suficientemente mayor, tal vez recuerdes esta cita de la película de los Cazafantasmas de 1984:

“No cruces los arroyos”.‚Ää- “¬ŅPor qu√©?” – “Ser√≠a malo.”

Algo similar est√° ocurriendo aqu√≠: Si cruzas las asas por un lado, la forma se comporta….digamos que de manera impredecible. Pero mira por ti mismo, despu√©s de todo, no va a terminar en una inversi√≥n prot√≥nica total o algo as√≠, pero no digas que no te lo advert√≠.

PD. Muchas gracias a simurai. En 2010, cre√≥ algunos CSS3 BonBon Buttons. Aunque parezcan un poco anticuados, es el √ļnico lugar donde he encontrado y aprendido sobre la sintaxis de la barra oblicua.

Ver esta fantástica función en acción

Fotos de gratisography.com

Este artículo fue publicado originalmente en Medium, publicado con el permiso del autor.