M谩s

    CSS Border-Radius puede hacer eso?

    - Advertisement -

    C贸mo crear efectos geniales con una caracter铆stica que rara vez se usa.

    TL/RD: Cuando usa ocho valores que especifican el radio del borde en CSS, puede crear formas de apariencia org谩nica. GUAU. 驴No tienes tiempo para leerlo todo? 鈥 creamos una herramienta visual para ti. Encu茅ntralo aqu铆.

    Durante este a帽o Conferencia Frontend Z煤rich Raquel Andr茅s hablado de Desbloqueando el poder del dise帽o de cuadr铆cula CSS. Al final de su charla, mencion贸 algo sobre una antigua propiedad de CSS que se qued贸 atascada en mi cabeza:

    La imagen se redondea simplemente usando el radio de borde bien soportado. No olvide que el antiguo CSS todav铆a existe y es 煤til. No necesitas usar algo elegante para cada efecto.

    鈥 Raquel Andr茅s

    Poco despu茅s de escuchar esta charla, pens茅 que ciertamente podr铆as crear m谩s que solo c铆rculos y comenc茅 a profundizar en lo que se puede hacer usando border-radius.

    Dominar el radio del borde

    Valor 煤nico

    Empecemos con lo b谩sico. Esperemos que esto no te aburra. Probablemente est茅s familiarizado con CSS y tambi茅n conozcas border-radius. Ha existido durante algunos a帽os, se usa principalmente con un solo valor como este: border-radius: 1em y fue quiz谩s una de las caracter铆sticas de CSS3 m谩s discutidas/queridas en 2010 cuando css3por favor.com era tu mejor amigo.

    Siempre que utilice un 煤nico valor, todas las esquinas se redondear谩n con 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. Esos se usan principalmente para crear un c铆rculo al establecer el radio del borde en 50%. El valor porcentual se basa en el ancho y alto del elemento dado. Entonces, cuando lo use en un rect谩ngulo, ya no tendr谩 esquinas sim茅tricas. He aqu铆 un ejemplo que muestra la diferencia entre border-radius: 110px y border-radius: 30% aplicado a un rect谩ngulo.

    002

    Observe que las esquinas del lado derecho no son sim茅tricas y t茅ngalo en cuenta. Volveremos a esto m谩s tarde.

    Cuatro valores diferentes

    Cuando usa m谩s de un valor, comienza a establecer valores para cada esquina, comenzando en la esquina superior izquierda y luego movi茅ndose en el sentido de las agujas del reloj. Nuevamente, tambi茅n puede usar porcentajes y tambi茅n puede mezclar porcentajes con valores de longitud fija.

    003

    Ocho valores separados por una barra (aqu铆 es donde se pone interesante)

    Creo que la mayor铆a de ustedes ya han hecho todo lo que expliqu茅 anteriormente. Ahora llegamos a la parte emocionante. 驴Qu茅 sucede si separa los valores con una barra inclinada y especifica hasta ocho valores? Veamos qu茅 dice la especificaci贸n al respecto:

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

    W3C

    Entonces, los valores antes de la barra inclinada son responsables de las distancias horizontales, mientras que los valores despu茅s de la barra inclinada definen las longitudes verticales. Pero 驴qu茅 significa eso? 驴Recuerdas los valores porcentuales en formas rectangulares? Ten铆amos diferentes valores absolutos para distancias verticales y horizontales y esquinas redondeadas asim茅tricamente, y eso es precisamente lo que obtienes cuando usas el sintaxis de barra.

    As铆 que cuando comparas border-radius: 4em 8em a border-radius: 4em / 8em los resultados son bastante diferentes.

    004

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

    Las formas que obtienes con esto se ven un poco extra帽as, para ser honesto. Pero recuerda los c铆rculos que creas con border-radius: 50%. Obtienes un c铆rculo porque ambos valores que definen un lado suman 100 % (50 % + 50 % = 100 %) y no queda ninguna l铆nea recta que te recuerde el cuadrado original. Si aplica la misma l贸gica a la sintaxis completa de radio de borde de ocho valores, puede crear una forma que se parece un poco a una p煤a o una celda org谩nica:

    005
    006

    Al final, son cuatro elipses superpuestas las que construyen la forma final. 隆F谩cil, ja!

    No se asuste… Hicimos un generador visual para usted

    Me tom贸 alg煤n tiempo acostumbrarme a esta sintaxis. De alguna manera no es tan intuitivo. Para facilitarle un poco las cosas, creamos una peque帽a herramientaque te ayuda a crear tu propia forma org谩nica.

    No cruces los arroyos

    Ahora que conoce los 8 valores en total, es posible 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… No se preocupe, aqu铆 est谩 el CONTROL COMPLETO DE 8 PUNTOS versi贸n.

    Si tienes la edad suficiente, es posible que recuerdes esto cotizar desde el 1984 Cazafantasmas pel铆cula:

    鈥淣o cruces los arroyos鈥. – 芦驴Por qu茅?禄 鈥 鈥淪er铆a malo.鈥

    Aqu铆 sucede algo similar: si cruzas las manijas de un lado, la forma se comporta… digamos de manera impredecible. Pero ver por ti mismodespu茅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 simur谩i. En 2010, cre贸 algunos Botones de bomb贸n CSS3. Aunque se ven un poco anticuados, es el 煤nico lugar en el que me encontr茅 y aprend铆 sobre la sintaxis de barra.

    Vea esta caracter铆stica genial en acci贸n

    007

    Fotos por gratisography.com

    ver la pluma borde-radio por Nils (@enbee81) en C贸digoPen.

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

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.