Post Top Ad

Your Ad Spot

miércoles, 22 de abril de 2020

CSS BORDER-RADIUS PUEDE HACER ESO?

Cómo crear efectos muy geniales con una característica raramente utilizada.
TL / DR: cuando utiliza ocho valores que especifican el radio del borde en CSS, puede crear formas de aspecto orgánico. GUAU. ¿No hay tiempo para leerlo todo? - Creamos una herramienta visual para ti. Encuéntralo aquí .
Durante la Conferencia Frontend de Zurich de este año, Rachel Andrew habló sobre Desbloquear el poder del diseño de cuadrícula CSS . Al final de su charla, mencionó algo sobre una vieja propiedad CSS que se quedó atascada en mi cabeza:
La imagen se configura con solo usar el radio de borde bien soportado. No olvide que el CSS antiguo todavía existe y es útil. No necesitas usar algo elegante para cada efecto.
 - Rachel Andrew
Poco después de escuchar esta charla, pensé que ciertamente podría crear algo más que círculos y comencé a profundizar en lo que se puede hacer usando el radio del borde.


Dominar el radio del borde

VALOR ÚNICO

Empecemos con lo básico. Esperemos que esto no te aburra. Probablemente esté familiarizado con CSS y también conozca el radio de borde. Ha existido desde hace algunos años, principalmente utilizado con un solo valor como este: border-radius: 1emy fue quizás una de las características CSS3 más discutidas / amadas en 2010 cuando css3please.com era su mejor amigo.
Siempre que use un solo valor, todas las esquinas se redondean con este valor:
001
Como puede ver en el ejemplo anterior, junto a valores de longitud fija como pxrememtambién puede usar porcentajes. Esos se usan principalmente para crear un círculo al establecer el radio del borde al 50%. El valor porcentual se basa en el ancho y el alto del elemento dado. Entonces, cuando lo use en un rectángulo, ya no tendrá esquinas simétricas. Aquí hay un ejemplo que muestra la diferencia entre border-radius: 110pxborder-radius: 30%aplicado a un rectángulo.
002
Tenga en cuenta que las esquinas en el lado derecho no son simétricas y tenga esto 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 DIAGONAL (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 valores con una barra inclinada y especifica hasta ocho valores? Veamos qué dice la especificación sobre eso:
Si los valores se dan antes y después de la barra inclinada, entonces los valores anteriores a la barra diagonal establecen el radio horizontal y los valores posteriores a la barra diagonal establecen el radio vertical. Si no hay barra oblicua, los valores establecen ambos radios por igual.
W3C
Entonces, 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? ¿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 la sintaxis de barra .
Entonces, cuando se compara border-radius: 4em 8emcon border-radius: 4em / 8emlos resultados, son bastante diferentes.
004
Las esquinas simétricas a la izquierda forman un cuarto de círculo, mientras que las esquinas asimétricas a la derecha son parte de puntos suspensivos.
Las formas que obtienes con esto se ven un poco extrañas, para ser honesto. Pero recuerda los círculos con los que creas border-radius: 50%Obtiene un círculo porque ambos valores que definen un lado suman 100% (50% + 50% = 100%) y no queda una línea recta, que le recuerde el cuadrado original. Si aplica la misma lógica a la sintaxis de radio de borde de ocho valores completos, puede crear una forma que se parezca un poco a un plectro o una celda orgánica:
005
006
Al final, son cuatro elipses superpuestas las que construyen la forma final. Fácil ja!

NO ENTRE EN PÁNICO ... HICIMOS UN GENERADOR VISUAL PARA USTED

Me tomó un tiempo acostumbrarme a esta sintaxis. De alguna manera no es tan intuitivo. Para hacerte las cosas un poco más fáciles, creamos una pequeña herramienta que te ayuda a crear tu propia forma orgánica.

Do (n't) Cross The Streams

Ahora que conoce los 8 valores en total, puede sentirse un poco triste, porque nuestra herramienta border-radius no le da la opción de establecer cada valor por separado ... Siéntese, aquí está el 8-POINT-FULL- Versión de CONTROL .
Si tienes la edad suficiente, quizás recuerdes esta cita de la película de los Cazafantasmas de 1984 :
"No cruce las corrientes". - "¿Por qué?" - "Sería malo".
Aquí está sucediendo algo similar: si cruzas los tiradores de un lado, la forma se comporta ... digamos de forma impredecible. Pero fíjate 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 botones CSS3 BonBon . Aunque parecen un poco anticuados, es el único lugar en el que me encontré y aprendí sobre la sintaxis de barra.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas