¿Alguna vez ha intentado hacer bordes CSS en un patrón de zigzag repetitivo? Por ejemplo, donde termina una sección coloreada de un sitio web y otra comienza con un color diferente, no en línea recta, sino en ángulo, zigzag, jorobas redondeadas u ondas. hay varias maneras de hacer este tipo de límite CSS que se remonta al uso de un background-image. Pero podemos volvernos más modernos y programáticos con él. En este artículo, veremos algunas técnicas modernas de máscara CSS para lograr el aspecto.
Pero antes de profundizar en las partes técnicas, veamos lo que estamos construyendo. Hice una Generador de bordes CSS donde puede generar fácilmente cualquier tipo de límite en segundos y obtener el código CSS.
¿Viste eso? Con CSS mask propiedad y algunos gradientes de CSS, obtenemos un tablero receptivo y atractivo, todo con solo CSS. No solo eso, sino que dicho efecto se puede aplicar a cualquier elemento en el que podamos tener cualquier tipo de coloración (por ejemplo, imagen, degradado, etc.). ¡Obtenemos todo esto sin elementos adicionales, pseudoelementos o números mágicos que surjan de la nada!
¡Oh, genial! Todo lo que tengo que hacer es copiar/pegar el código y ¡listo!
Cierto, pero es bueno comprender la lógica para poder corregir manualmente el código si es necesario.
enmascarar cosas
Porque todos nuestros efectos se basan en CSS mask propiedad, actualicemos rápidamente cómo funciona. Directo desde especificación:
El efecto de aplicar una máscara a un objeto gráfico es como si el objeto gráfico se dibujara en el fondo con una máscara, enmascarando así total o parcialmente partes del objeto gráfico.
si revisamos sintaxis formal desde mask propiedad podemos ver que acepta una <image> como un valor, lo que significa una URL de imagen o un degradado de color. Los degradados son lo que usaremos aquí. Comencemos con ejemplos básicos:
El primer ejemplo de esta demostración utiliza un degradado para que parezca que la imagen se desvanece. Mientras tanto, el segundo ejemplo también usa un degradado, pero en lugar de una transición suave entre colores, se usa una parada de color sólido para ocultar (o enmascarar) la mitad de la imagen. Este segundo ejemplo ilustra la técnica que usaremos para crear nuestros límites fantásticos.
Ah, y CSS mask la propiedad puede aceptar varios degradados siempre que estén separados por comas. Esto significa que tenemos aún más control sobre el enmascaramiento de partes adicionales de la imagen.
Este ejemplo que muestra múltiples gradientes de enmascaramiento puede parecer un poco complicado a primera vista, pero lo que sucede es lo mismo que aplicar múltiples gradientes a background Pero en lugar de usar un color que se mezcle con el fondo de la página, usamos un valor de negro «transparente» (#0000) para partes ocultas de la imagen y negro completo#000) para partes visibles.
¡Está! Ahora podemos lidiar con nuestros fantásticos límites.
Límites de CSS de Zig-Zag
Como vimos en el video al principio de este artículo, generador Puede aplicar bordes en uno, ambos lados o en todos los lados. Comencemos con la parte inferior, usando una ilustración paso a paso:
- Comenzamos agregando la primera capa de degradado con un color sólido (
red) en la parte superior. Altura igual acalc(100% - 40px)solía salir40pxde espacio vacío en la parte inferior. - Añadimos un segundo degradado, colocado en la parte inferior, que ocupa la altura restante del contenedor. Hay un poco de geometría que hace que esto funcione.
- Luego repita el último degradado horizontalmente (reemplace
no-repeatsrepeat-x¡Ya podemos ver la forma de zigzag! - Se sabe que los degradados tienen problemas de suavizado, creando bordes dentados (especialmente en Chrome). Para evitar esto, agregamos una ligera transición entre los colores que cambian
blue 90deg, green 0agreen, blue 1deg 89deg, green 90deg. - Luego actualizamos los colores para que tengan la misma forma.
- Finalmente, usamos todo lo que hay dentro.
mask¡Propiedad!
Podemos derivar dos variables de estos pasos para definir nuestra forma: tamaño (40px) y ángulo (90deg). Así es como podemos expresar esto usando sustitutos para estas variables. Usaré JavaScript para reemplazar estas variables con sus valores finales.
mask:
linear-gradient(red 0 0) top/100% calc(100% - {size}) no-repeat,
conic-gradient(
from {-angle/2} at bottom,
#0000, #000 1deg {angle - 1} ,#0000 {angle}
) bottom/{size*2*tan(angle/2)} {size} repeat-x;Podemos usar propiedades CSS personalizadas para el tamaño y el ángulo, pero las funciones trigonométricas son funciones actualmente no admitidas. En el futuro podremos hacer algo similar:
--size: 40px;
--angle: 90deg;
mask:
linear-gradient(red 0 0) top/100% calc(100% - var(--size)) no-repeat,
conic-gradient(
from calc(var(--angle)/-2) at bottom,
#0000, #000 1deg calc(var(--angle) - 1deg), #0000 var(--angle)
) bottom/calc(var(--size)*2*tan(var(--angle)/2)) var(--size) repeat-x;Al igual que el límite inferior, habrá uno superior casi el mismo código con algunas correcciones:
mask:
linear-gradient(red 0 0) bottom/100% calc(100% - {size}) no-repeat,
conic-gradient(
from {180deg - angle/2} at top,
#0000, #000 1deg {angle - 1}, #0000 {angle}
) top/{size*2*tan(angle/2)} {size} repeat-x;Hemos cambiado bottom s top y top s bottom, luego actualice la rotación del degradado a 180deg - angle/2 en lugar de -angle/2¡Tan sencillo!
Este es el modelo que podemos usar para otros países, como el izquierdo:
mask:
linear-gradient(red 0 0) right/calc(100% - {size}) 100% no-repeat,
conic-gradient(
from {90deg - angle/2} at left,
#0000, #000 1deg {angle - 1}, #0000 {angle}
) left/{size} {size*2*tan(angle/2)} repeat-y;… y a la derecha:
mask:
linear-gradient(red 0 0) left/calc(100% - {size}) 100% no-repeat,
conic-gradient(
from {-90deg - angle/2} at right,
#0000, #000 1deg {angle - 1}, #0000 {angle}
) right/{size} {size*2*tan(angle/2)} repeat-y;Dibujemos los límites cuando se apliquen a dos países a la vez. De hecho, podemos reutilizar el mismo código. Para obtener los límites superior e inferior, simplemente combinamos los códigos de límite superior e inferior.
Usamos conic-gradient() en la parte superior, de conic-gradient() en la parte inferior más un linear-gradient() para cubrir la zona media.
mask:
linear-gradient(#000 0 0) center/100% calc(100% - {2*size}) no-repeat,
conic-gradient(
from {-angle/2} at bottom,
#0000, #000 1deg {angle - 1},
#0000 {angle}
) bottom/{size*2*tan(angle/2)} {size} repeat-x;
conic-gradient(
from {180deg - angle/2} at top,
#0000, #000 1deg {angle - 1}, #0000 {angle}
) top/{size*2*tan(angle/2)} {size} repeat-x;Lo mismo se aplica cuando se aplican límites a la izquierda y a la derecha juntos:
mask:
linear-gradient(#000 0 0) center/calc(100% - {2*size}) 100% no-repeat,
conic-gradient(
from {90deg - angle/2} at left,
#0000, #000 1deg {angle - 1}, #0000 {angle}
) left/{size} {size*2*tan(angle/2)} repeat-y,
conic-gradient(
from {-90deg - angle/2} at right,
#0000, #000 1deg {angle - 1}, #0000 {angle}
) right/{size} {size*2*tan(angle/2)} repeat-y;Entonces, si queremos aplicar bordes a todos los países a la vez, agregamos todos los gradientes, ¿verdad?
¡Exactamente! Tenemos cuatro gradientes cónicos (uno en cada lado) y uno linear-gradient() en el medio Fijamos un ángulo fijo igual a 90deg porque este es el único que conduce a mejores ángulos sin superposición extraña. Tenga en cuenta que también uso space en lugar de repeat-x o repeat-y para evitar malos resultados en rincones como este:
Bordes CSS redondeados
¡Ahora tratemos con los bordes redondeados!
Oh no, ¿otra larga explicación con muchos cálculos?
¡Para nada! No hay nada que explicar aquí. Tomamos todo del ejemplo en zigzag y actualizamos conic-gradient() s radial-gradient(). Es aún más fácil porque no tenemos ningún ángulo con el que lidiar, solo la variable de tamaño.
Aquí hay una ilustración de un lado para ver lo poco que necesitamos hacer para pasar del borde en zigzag al borde redondeado:
Una vez más, todo lo que hice fue cambiar conic-gradient() por lo tanto (usando sustitutos de tamaño):
background:
radial-gradient(circle farthest-side, #0000 98%, #000)
50% calc(100% + {size})/{1.85*size} {2*size} repeat-xY esto por lo segundo:
background:
radial-gradient(circle farthest-side, #000 98%, #0000)
bottom/{1.85*size} {2*size} repeat-x¿Cuál es la lógica detrás de los números mágicos 1,85 y 98%?
Lógicamente debemos usar 100% en lugar de 98% tener un círculo que toque los bordes del área de fondo, pero nuevamente, este es el problema con el suavizado y esos bordes irregulares. Usamos un valor ligeramente más pequeño para evitar superposiciones extrañas.
EN 1.85 el valor es más una preferencia personal que cualquier otra cosa. Inicialmente usé 2 que es el valor lógico para obtener un círculo perfecto, pero el resultado no parece tan bueno, por lo que el valor más pequeño crea una superposición más suave entre los círculos.
Aquí está la diferencia:
Ahora tenemos que repetir esto para los demás países, tal como hicimos con el borde CSS en zigzag.
Sin embargo, hay una pequeña diferencia al aplicar los cuatro lados a la vez. Notarás que usé solo uno para uno de los bordes redondeados. radial-gradient() en lugar de cuatro. Esto tiene sentido porque podemos repetir una forma redonda en todos los lados usando un degradado, como se muestra a continuación:
Aquí está el CSS final:
mask:
linear-gradient(#000 0 0) center/calc(100% - {1.85*size}) calc(100% - {1.85*size}) no-repeat,
radial-gradient(farthest-side,#000 98%,#0000) 0 0/{2*size} {2*size} round;Fíjate cómo lo uso round valor en su lugar repeatEsto es para asegurarnos de que no cortamos ninguno de los círculos. Y de nuevo, esto 1.85 el valor es el valor de la preferencia personal.
Para el otro tipo de bordes redondeados todavía tenemos que usar cuatro degradados radiales, pero tuve que introducir CSS clip-path propiedad para corregir un problema de superposición en las esquinas. Puedes ver la diferencia entre con y sin clip-path en la siguiente demostración:
Este es un camino de ocho puntos para cortar esquinas:
clip-path: polygon(
{2*size} 0,calc(100% - {2*size}) 0,
100% {2*size},100% calc(100% - {2*size}),
calc(100% - {2*size}) 100%,{2*size} 100%,
0 calc(100% - {2*size}),0 {2*size}
);Bordes CSS ondulados
Tanto los bordes CSS en zigzag como los redondeados necesitan un degradado para obtener las formas que queremos. ¿Qué tal un borde ondulado? Esto toma dos gradientes. A continuación se muestra una ilustración para entender cómo creamos una onda con dos gradientes radiales.
Repita esta forma en la parte inferior más un degradado lineal en la parte superior y obtenga el borde ondulado en la parte inferior.
mask:
linear-gradient(#000 0 0) top/100% calc(100% - {2*size}) no-repeat,
radial-gradient(circle {size} at 75% 100%,#0000 98%,#000) 50% calc(100% - {size})/{4*size} {size} repeat-x,
radial-gradient(circle closest-side at 25% 50%,#000 99%,#0000 101%) bottom/{4*size} {2*size} repeat-x;Hacemos el mismo proceso para otros países que hicimos con los bordes CSS en zigzag y redondeados. Todo lo que necesitamos es para actualizar varias variables para tener una ola diferente para cada país.
¿Qué tal aplicar un borde CSS ondulado en los cuatro lados? ¿Tendremos un total de 9 gradientes?
No, y eso es porque no hay una manifestación en la que el borde ondulado se aplique a los cuatro países. No pude encontrar una combinación de degradados que dé un buen resultado en las esquinas. ¿Quizás alguien que lea esto conozca un buen enfoque? 😉
Está fronteralínea cosas geniales!
Entonces, conoces los entresijos mi pequeño gran generador de bordes CSS en líneaPor supuesto, puedes usar el código que escupe y hacerlo bien, pero ahora tienes la receta secreta de la salsa que lo hace funcionar.
En particular, vimos cómo se pueden usar los degradados para enmascarar partes de un elemento. Entonces empezamos a trabajar múltiple degradados para hacer ciertas formas a partir de estas máscaras CSS de degradado. Y el resultado es una plantilla que se puede usar en los bordes de un elemento, creando la apariencia de bordes fantásticos que de otro modo podría conducir a background-image por. Esta es la única forma de cambiar algunos valores para cambiar el aspecto, en lugar de reemplazar un archivo de mapa de bits completo o algo así.
