CSS: características interesantes de border-radius

¿Qué se puede hacer con la propiedad CSS border-radius ? El autor del material, cuya traducción publicamos, dice que más de lo que parece a primera vista. En particular, estamos hablando del hecho de que las esquinas de los elementos redondeados por esta propiedad pueden tener una forma muy interesante.


Sugerimos hablar sobre las complejidades del uso border-radius .

Propiedades antiguas y diseño web moderno.

Este año, en la Frontend Conference Zurich , Rachel Andrew hizo una presentación sobre las posibilidades de la tecnología CSS Grid. Al final de la presentación, dijo algo sobre las antiguas propiedades CSS y sus palabras me llamaron la atención. A saber, sonaba así: “La imagen se hizo redonda exclusivamente con la propiedad de border-radius bien soportada. Recuerde que el CSS antiguo aún existe y puede ser útil. No tiene que usar siempre algo completamente nuevo para crear ningún efecto ".

Algún tiempo después de esta actuación, se me ocurrió que el círculo es solo una pequeña parte de lo que se puede hacer con border-radius . Fascinado por esta idea, decidí tratar adecuadamente con esta propiedad.

Dominar el radio del borde

▍ Significado único

Comencemos con lo básico. Espero que no te aburras con este ejemplo. Es posible que esté familiarizado con CSS y la propiedad border-radius también. Ha existido durante bastante tiempo, y lo usan principalmente para indicar un significado único. Se ve así: border-radius: 1em . Quizás esta fue una de las características CSS3 más comentadas en 2010, cuando css3please.com era el mejor amigo del diseñador.

Cuando se utiliza un valor único para border-radius esquinas del elemento se redondean de acuerdo con este valor.


Redondea todas las esquinas de un cuadrado a un solo valor de radio de borde

Como puede ver en el ejemplo anterior, puede establecer valores fijos no solo especificando unidades de medida después de los números, como px , rem o em , sino también un signo de porcentaje. Esto generalmente se usa para crear círculos basados ​​en cuadrados cuando border-radius establece en 50%. El valor porcentual se basa en el ancho y la altura del elemento. Por lo tanto, cuando se aplica a rectángulos, los ángulos resultantes no serán simétricos. Aquí hay un ejemplo que demuestra la diferencia entre border-radius: 110px y border-radius: 30% propiedades aplicadas a un rectángulo.


Redondeando las esquinas de un rectángulo

Presta atención al hecho de que las esquinas del rectángulo derecho son asimétricas y recuerda esto. Nos será útil un poco más tarde.

▍ Cuatro valores separados

Cuando utiliza más de un valor de border-radius , ajusta la configuración para cada esquina, comenzando desde la parte superior izquierda y moviéndose en el sentido de las agujas del reloj. Aquí, nuevamente, puede usar valores porcentuales. También se pueden mezclar con valores fijos.


Establecer parámetros para las cuatro esquinas de un elemento

▍Ocho valores separados por una barra inclinada

Creo que muchos de ustedes ya han probado todo lo que mencionamos anteriormente. Ahora es el momento de algunos experimentos realmente interesantes. ¿Qué sucede si los valores están separados por una barra inclinada y se especifican hasta ocho? Primero, eche un vistazo a la especificación . Nos dice que si los valores se dan antes y después de la barra oblicua, entonces los valores antes de la barra especifican el radio horizontal y los valores después de la vertical. Si no hay barra oblicua, ambos radios serán iguales.

Entonces, los valores antes de la barra son responsables de las distancias horizontales, y los valores después de la barra son responsables de la vertical. Todo esto es bueno, pero aquí surge una pregunta lógica: "¿De qué estamos hablando?" ¿Recuerdas los valores porcentuales del redondeo de las esquinas establecidas para formas rectangulares? Allí se aplicaron diferentes valores absolutos para distancias verticales y horizontales y estaban presentes esquinas redondeadas asimétricamente. Esto es exactamente lo que puede lograr mediante el uso de una barra diagonal al establecer border-radius .

Comparemos los efectos que dan las siguientes configuraciones: border-radius: 4em 8em y border-radius: 4em / 8em . Los resultados serán muy diferentes.


Los ángulos simétricos del elemento izquierdo son un cuarto de círculo, y los ángulos asimétricos del elemento izquierdo son partes de una elipse.

Para ser sincero, las cifras obtenidas como resultado de la aplicación de la configuración anterior parecen extrañas. Sin embargo, no olvide que los círculos se crean utilizando los siguientes parámetros: border-radius: 50% . El círculo se obtiene debido al hecho de que se suman dos valores que definen un lado y se obtiene el 100% (50% + 50% = 100%) y no hay líneas rectas desde el cuadrado original. Si piensa de la misma manera sobre los ocho valores utilizados para establecer la propiedad del border-radius del border-radius , resulta que con su ayuda puede describir una figura que parece una púa de guitarra o una celda en un organismo vivo.


Figura resultante de la aplicación de 8 valores separados por una barra inclinada


Cuatro elipses superpuestas formando una forma

Me tomó un tiempo acostumbrarme. A veces, todas estas construcciones pueden ser difíciles de comprender. Si se siente atraído por formas complejas de elementos personalizables con border-radius , puede usar esta pequeña herramienta.

Resumen

Ahora que sabe que al establecer border-radius puede usar 8 valores, luego, si probó la herramienta anterior, puede sentir una ligera decepción, ya que no le permite controlar cada valor de forma independiente. Si es así, aquí , especialmente para usted, su versión es compatible con la configuración independiente de los ocho valores. Antes de usarlo, recuerda una conversación de la película Ghostbusters de 1984:

- No cruce las corrientes.
- por qué?
- Pero será malo.

El hecho es que si mueve los manipuladores para que se crucen en un lado de la figura, entonces comenzará a comportarse ... Digamos que comenzará a comportarse de manera impredecible. ¿Qué puedo decir? Compruébelo usted mismo. Al final, esto no conducirá a una catástrofe universal, pero al hacerlo, recuerde que le advertimos.

Estimados lectores! ¿Utiliza la propiedad CSS border-radius?