La creación de rectángulos, círculos y rectángulos redondeados es la base de CSS. Crear más complejo formas CSS Por ejemplo, los triángulos, hexágonos, estrellas, corazones, etc. son más desafiantes pero siguen siendo una tarea fácil si confiamos en las funciones modernas.
Pero ¿qué pasa con las formas que tienen un poco de aleatoriedad y muchas curvas?
Podría haber muchos nombres aquí: ondas aleatorias, bamboleos, manchas, ondas, irregulares, rasgados, etc. Como sea que los llames, todos podemos estar de acuerdo en que su creación no es simple y generalmente pertenecen al mundo SVG, o se crean usando herramientas y se usan como imágenes. gracias nuevo shape() funciones, ahora podemos crearlas usando CSS.
No te voy a decir que son fáciles de crear. De hecho, son un poco complicados ya que requieren muchas matemáticas y cálculos. Así que construí algunos generadores donde puedes obtener fácilmente código para diferentes formas.
Todo lo que tienes que hacer es ajustar tu configuración y obtener tu código al instante. ¡Es así de simple!
Si bien la mayoría de ustedes pueden tener la tentación de agregar Generadores CSS a sus favoritos y dejar este artículo, les recomiendo que sigan leyendo. Tener generadores es genial, pero comprender la lógica detrás de ellos es aún mejor. Es posible que necesites ajustar manualmente el código para crear más variaciones de forma. También veremos algunos ejemplos interesantes, ¡así que quédate hasta el final!
Aviso: Si eres nuevo en shape()recomiendo mucho leer mío cuatro-algunas series En él explico los conceptos básicos. Le ayudará a comprender mejor lo que hacemos aquí.
¿Cómo funciona?
Si bien muchas de las formas que puedes crear usando mi generador parecen diferentes, todas dependen de la misma técnica: muchas curve Orden. El truco principal es asegurarse de que dos adyacentes curve Establece una curvatura suave para que la forma completa parezca una curva continua.
A continuación se muestra un gráfico que se puede dibujar usando el comando Curva. Solo usaré un punto de control:
Ahora, juntemos las dos curvas:
El punto final E1 de la primera curva es el punto inicial de la segunda curva S2. Este punto se encuentra dentro del segmento de línea formado por los puntos de control C1 y C2. Este es el estándar para la suavidad general de las curvas. Si no lo hiciéramos, tendríamos una curva “mala” que se ha detenido.
Lo único que debemos hacer es generar aleatoriamente diferentes curvas respetando el criterio anterior entre dos curvas consecutivas. Por simplicidad, considero el punto común entre las dos curvas como el punto medio de los puntos de control para reducir la aleatoriedad del proceso.
Crear formas
Comencemos con la forma más simple, un divisor ondulado aleatorio. Hay una curva aleatoria en un lado.
Dos variables controlarán la forma: granularidad y tamaño. La granularidad define cuantas curvas tendremos (será un número entero). El tamaño define el espacio en el que se dibuja la curva.
El primer paso es crear N puntos y colocarlos uniformemente en la parte inferior del elemento (N es la granularidad).
Luego compensamos aleatoriamente la posición vertical de los puntos usando la variable de tamaño. El desplazamiento de cada punto es igual a un valor aleatorio en el rango (0 size).
A partir de ahí, tomamos dos puntos adyacentes y definimos su punto medio. Obtenemos más puntos.
¿Estás empezando a hacerte una idea? El primer conjunto de puntos se coloca al azar, mientras que el segundo conjunto de puntos se coloca de manera que se ajuste a los criterios que definimos anteriormente. A partir de ahí dibujamos todas las curvas y obtenemos nuestra forma.
El código CSS se verá así:
.shape {
clip-path: shape(from Px1 Py1,
curve to Px2 Py2 with Cx1 Cy1,
curve to Px3 Py3 with Cx2 Cy2,
/* ... */
curve to Pxi Pyi with Cx(i-1) Cy(i-1)
/* ... */
)
}este Ci son nuestros puntos colocados aleatoriamente (puntos de control) y Pi es el punto medio.
A partir de ahí, aplicamos la misma lógica a los diferentes lados para obtener diferentes variaciones (abajo, arriba, abajo arriba, todos los lados, etc.).
Para lugarla lógica es ligeramente diferente. En lugar de considerar rectángulos y líneas rectas, utilizamos círculos.
Colocamos puntos uniformemente alrededor de un círculo (un círculo formado por elementos si tiene border-radius: 50%). Luego los desplazamos aleatoriamente más cerca del centro. Finalmente, sumamos el punto medio y dibujamos la forma.
Aún podemos ir un paso más allá y combinar la primera técnica con la técnica del círculo, considerando un rectángulo con las esquinas redondeadas.
Este fue el más complicado de implementar porque tuve que abordar cada rincón, cada lado y trabajar con diferentes granularidades. Aún así, los resultados fueron muy satisfactorios porque nos permitió crear muchas cosas. Hermoso marco!
¡Muéstrame una demostración genial!
Basta de teoría, veamos algunos ejemplos interesantes y cómo usar simplemente generadores para crear formas y animaciones de apariencia compleja.
¡Comenzamos con un diseño clásico con muchos divisores ondulados!
Tenemos cuatro formas en esta demostración, todas las cuales son simplemente copiar y pegar generador divisor de ondas. La parte superior de la página usa la configuración inferior, el pie de página usa la configuración superior y otros elementos usan la configuración superior+inferior.
Imaginemos esto y agreguemos algo de animación.
Cada elemento tiene el siguiente código:
@media screen and (prefers-reduced-motion: no-preference) {
.element {
--s1: shape( ... );
--s2: shape( ... );
animation: dance linear 1.6s infinite alternate;
}
@keyframes dance {
0% {clip-path: var(--s1)}
to {clip-path: var(--s2)}
}
}Desde el generador usted fija la granularidad y el tamaño y luego produce dos formas diferentes para cada variable (--s1 y --s2). El número de curvas es el mismo, lo que significa que el navegador puede interpolar entre las dos formas, ¡así obtenemos una bonita animación!
Entonces, ¿qué tal si introducimos la animación basada en desplazamiento para implementar la animación basada en desplazamiento? Todo lo que tienes que hacer es agregar animation-timeline: scroll() Todo está hecho.
Este es el mismo efecto que los encabezados adhesivos.
Para ello, debes considerar el tamaño. Usted corrige la granularidad y la identificación de la forma, luego considera el tamaño igual a 0 Para forma inicial (rectángulo) y tamaño diferente al 0 Para los ondulados. Luego deja que el navegador se anime entre los dos.
¿Ves todas las posibilidades que tenemos? Puedes usar formas como decoraciones estáticas, o puedes crear hermosas animaciones entre dos (o más) usando la misma granularidad y ajustando otras configuraciones (tamaño e ID de forma).
¿Qué presentación genial puedes crear usando estos consejos? Compártelo en la sección de comentarios.
Te daré algunos ejemplos más que puedes usar como inspiración.
Efecto de rebote y desplazamiento con forma de burbuja:
uno botón suave Con efectos de desplazamiento y clic:
uno Animación del marco oscilante:
uno Efecto de visualización líquida:
y un grupo Hermoso cargador CSS Puedes encontrarlo en mi sitio web.
en conclusión
¿Ves todo el potencial de tu nuevo producto? shape() ¿Función? Ahora tenemos la oportunidad de crear formas de apariencia compleja sin usar SVG ni imágenes. Aparte de eso, podemos obtener bonitas transiciones/animaciones fácilmente.
No olvides marcar mis favoritos. generador de CSS sitio web donde puede obtener el código de las formas que estudiamos y más. yo tambien lo tengo formas CSS Actualizaré el sitio pronto para aprovechar las nuevas shape() ¡Para la mayoría de las formas y optimizó una gran cantidad de código antiguo!
¿Y tú? ¿Te imaginas la forma compleja que podemos crear usando shape()? ¡Quizás puedas darme una idea para mi próximo generador!
