Explorando la forma de crear y animar los formularios CSS en Div

Crear formas utilizando CSS en el diseño web no es un concepto nuevo en ningún caso. De hecho, el método clásico para crear formularios CSS ha sido sombreado en gran medida por otras soluciones gráficas HTML como Canvas y SVG. Sin embargo, las formas CSS (al menos las básicas) son mucho más fáciles de crear y pueden seguir desempeñando un papel importante en el diseño web. Además, al agregar animación de puntería a estas formas, puede ocurrir un elemento de diseño completamente nuevo. En este tutorial, exploraremos cómo crear y animar los formularios CSS en el Div. Una vez que comprenda el concepto básico sobre cómo crear algunas formas utilizando las opciones integradas del DIV, puede animar estos formularios para crear modelos de animación de desfile únicos para su sitio web. ¡Te sorprenderá tanto como puedas!
Vamos a empezar. Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Explorando la forma de crear formas CSS con animación en la estructura de las filas y columnas primero, agregue una fila de columnas de un tercio y dos tercios por sección.
Antes de hacer cualquier otra cosa, abra la configuración de la fila y actualice lo siguiente:

El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 95%
Ancho máximo: 900 PX
Nota: Estas configuraciones son cruciales para configurar nuestro diseño. Por ejemplo, la estructura de la columna con un tercio y dos tercios, combinados con una fila que tiene un ancho máximo de 900 px sin bordes (el ancho del canal 1), háganos saber que la columna izquierda tendrá exactamente un ancho de 300 px. Además, si mantengo mi diseño en esta columna de ancho de 300 px, puedo asegurarme de verse bien en tabletas y dispositivos móviles. Afirmar el separador del módulo divisor, agregue un separador para crear la columna necesaria que contenga nuestras formas. CSS.
En este momento, debe abrir las capas de capas para administrar las capas / módulos que se pueden encontrar en el menú Configuración en Divi Builder.

Abra la configuración del divisor y actualice la altura del divisor de la siguiente manera:

Divisor del espectáculo: no

Altura: 150 PX
Debido a que nuestras formas CSS se colocarán absolutamente, la distancia real del área de la columna se puede ajustar fácilmente ajustando la altura del separador. Personalmente, encontré esto más fácil que tratar de manipular la altura o la distancia de la columna vertebral. Además, le brinda la bonificación adicional para estilizar el divisor como un elemento de diseño adicional (o forma). Por ahora, puede pensarlo como un lienzo para sus futuros modelos de forma CSS.
Creando el primer formulario CSS utilizando las opciones de borde para crear la forma CSS, usaremos un módulo divisor. Desde un punto de vista técnico, usamos solo los bordes que rodean el módulo, no el área del módulo. (Por lo tanto, también podría usar otros módulos, como módulos de texto o módulos de código). Para crear el formulario CSS, copie el módulo divisor creado previamente.

Luego retire la altura y el ancho del módulo divisor configurando cada uno a 0 px de la siguiente manera: ancho: 0 px
Altura: 0px

Para la primera forma, crearemos un triángulo rectangular que se ve a la derecha a la derecha. Para hacer esto, actualice los estilos Divisor Edge de la siguiente manera:
Color del borde: RGBA (245,44,143,0,5)
El ancho del borde superior: 150 px

Ancho del borde izquierdo: 150 PX
Color del borde izquierdo: transparente
Nota: Dar una semi -transparencia al color del borde ayudará a revelar formas superpuestas para un elemento de diseño adicional.
También es una buena idea etiquetar este nuevo separador como “Formulario 1” para una ligera identificación más adelante. Debido a que agregaremos animación de desfile a los formularios adicionales que crearemos, es importante dar a este formulario (y a los formularios adicionales en esta columna) una posición absoluta para que esté apilada uno encima del otro, por lo tanto, tener el El mismo punto de partida para la animación.
En la pestaña avanzada, cambie la posición en absoluto y mantenga la posición predeterminada establecida en la parte superior derecha:
Posición: Absoluto

Ubicación de la posición: de la derecha (predeterminado)
Nota: Es importante mantener la ubicación de la posición en el lado superior derecho, porque cualquier otra ubicación que agregue una ubicación enfocada (como el centro arriba o centrado) entrará en conflicto con las opciones de transformación que agregaremos a los formularios CSS luego.
¡Felicidades por crear un triángulo CSS! Aunque esto no es tan impresionante en sí mismo, se vuelve mejor. Podemos duplicar este triángulo para crear todo tipo de modelos nuevos una vez que los movemos con animación.
Creando forma 2 con animación de desplazamiento para crear la siguiente forma (o triángulo en este caso), copie el módulo divisor anterior (Formulario 1) para agregar un triángulo aguas arriba idéntico, que está directamente sobre la forma del triángulo anterior. Luego etiquete “Formulario 2”. Abra la configuración para el divisor “Formulario 2” y agregue el siguiente efecto de transformación rotativa:
Efectos de transformación de contaminación: rotación

Activar la rotación: si
Rotación de inicio: 0 ° (al 30%)


Rotación promedio: 45 ° (al 45%)
Rotación final: 90 ° (al 60%)
Creación del Formulario 3 con la animación de desplazamiento duplicado el duplicado del módulo divisor “Formulario 2” y etiqueta “Formulario 3”.
Luego actualice la configuración de rotación de transformación de la siguiente manera:
Rotación promedio: 90 °
Rotación final: 180 °
Para crear el formulario final (cuarto), copie los formularios del módulo divisor 3 y etiquete “Formulario 4”.

Luego actualice la configuración de rotación de transformación de la siguiente manera:
Rotación promedio: 180 °
Rotación final: 270 °

En este momento, debería ver una forma cuadrada creada por los triángulos superpuestos y ahora rotados. Probar la animación de desplazamiento para probar la animación de estos formularios, para agregar algunos bordes temporales en la parte superior e inferior de la sección. Abra la configuración de la sección y actualice lo siguiente:

Marja: 80VH arriba, 80VH abajo

Así es como debería verse al desplazar la página hacia arriba y hacia abajo. Antes de explorar nuevas formas de personalizar estas animaciones de formulario, completaremos nuestro diseño con un título falso en la columna correcta. Siéntase libre de ignorar este paso si desea continuar con los modelos de formulario. Agregar un título falso a la columna correcta (opcional) para darle una idea de cómo puede usar estas formas animadas en una página, pensé que sería una buena idea agregar un título falso a la columna de la derecha. Este sería un maravilloso ejemplo de cómo completar los títulos de las secciones de página con una increíble animación de diseño utilizando formas CSS. Columna CSS personalizada Antes de agregar el título, podemos asegurarnos de que el texto esté centrado verticalmente en la columna utilizando la propiedad Flex Display. Abra la configuración de la columna 2 y agregue los siguientes CSS personalizados al elemento principal: Display: Flex; Flex-Direction: Column;
Alinine-Ritams: Centro;

Una vez que la columna CSS esté en su lugar, agregue un nuevo módulo de texto a la columna 2.
Luego abra la configuración del texto y actualice el contenido del cuerpo con un título H2 de la siguiente manera: & amp; lt; h2 & amp; gt; diseño elegante & amp;/h2 & amp; gt;

En la pestaña Diseño, actualice lo siguiente:
2 Sección de fuentes: Poppins
Título 2 Alineación de texto: predeterminado (escritorio), centro (tableta y teléfono)

Título 2 Dimensión de texto: 55 PX (escritorio), 45 PX (tableta), 35 PX (teléfono)

Ancho: 100%

Mientras lo somos, continúe y agregue el siguiente efecto de “movimiento horizontal” al texto, de la siguiente manera:
Efectos de transformación de contaminación: movimiento horizontal
Active el movimiento horizontal: sí
Comenzando el desplazamiento: 2 (al 20%)
GAP promedio: 1 (al 35%) Offset final: -0.6

Luego abra las pestañas receptivas y actualice la brecha final de la siguiente manera:
Compensación final (tableta y teléfono): 0
Explorando animaciones con la forma del triángulo superior derecho que continúa desde donde nos quedamos antes de agregar el texto del texto, ahora podemos explorar las posibilidades de diseño / animación para la forma actual del triángulo superior derecho. Una manera fácil de hacerlo es usar elecciones multises para seleccionar los cuatro formularios CSS (construidos con módulos divisores).
Luego abra la configuración para una de las formas para mostrar la configuración modal de los elementos que actualizarán el diseño de los cuatro módulos simultáneamente, para que pueda ver los resultados visualmente. Luego seleccione la pestaña de diseño y abra la pestaña Transformación de origen. Coloque las formas de ver las capas y la configuración elemental modal a la izquierda, para que pueda ver visualmente los cambios en el constructor Div.
Explorando las animaciones de diseño de forma del triángulo ascendente CSS ahora, cuando tiene la configuración en su lugar, puede explorar la creación de nuevas formas y puede ver cómo se ven con las animaciones actuales en su lugar. Para este próximo ejemplo, crearemos una forma CSS del triángulo ascendente (técnicamente un triángulo isoscele). Para hacer esto, asegúrese de seleccionar varias formas y actualizar los estilos de borde para cada uno de los siguientes:
Ancho del borde derecho: 100 PX
El color del borde derecho: transparente
Ancho del borde inferior: 100 PX

Color de borde inferior: RGBA (245,44,143,0,5)

Ancho del borde izquierdo: 100 PX

Color del borde izquierdo: transparente
ACTUALIZACIÓN DE CRUAF ORIGIN para explorar nuevos modelos de animación de desplazamiento ahora, que tenemos una forma / triángulo ligeramente nuevo, la animación de rotación resultante también será diferente. Para explorar las diferentes posibilidades de diseñar la animación del desfile, asegúrese de mantener los cuatro formularios utilizando la selección múltiple y luego ajuste el origen de la transformación para ver los resultados. Explorando las animaciones de diseño de forma CSS de lágrima hasta ahora, debe recibir una descripción de cómo funciona este proceso. Para el próximo diseño, crearemos una forma de rasgadura que se puede lograr creando un rectángulo inferior con un rayo de borde. Para hacer esto, asegúrese de seleccionar varias formas y actualice los estilos de borde para cada uno de los siguientes: esquinas redondeadas: 0 PX hacia arriba, 50% hacia arriba, 50% a la derecha, 50% hacia abajo a la izquierda
Ancho de borde inferior: 150 PX
Color de borde inferior: RGBA (245,44,143,0,5)
Ancho del borde izquierdo: 150 PX
Color del borde izquierdo: transparente
Luego ajuste el valor del origen de la transformación para explorar los dibujos del escritorio para las lágrimas. Explorando las animaciones de diseño de forma del sector (o pizza) de CSS hasta ahora, debe recibir una descripción de cómo funciona este proceso. Para el próximo diseño, crearemos una forma de sector que se pueda lograr creando un triángulo rectangular inferior con un rayo de borde. Para hacer esto, asegúrese de seleccionar varias formas y actualizar los estilos de borde para cada uno de los siguientes:

Esquinas redondeadas: 0 px a la altura, 0 px a la altura, 50% abajo a la derecha, 50% abajo a la izquierda
El ancho del borde recto: 75 pxculor de la derecha: transparente
Ancho de borde inferior: 75 PX
Color de borde inferior: RGBA (245,44,143,0,5)
Ancho del borde izquierdo: 75 PX
Color del borde izquierdo: transparente

Luego ajuste el origen de la transformación para explorar los diferentes modelos de animación de desplazamiento. Explorando las animaciones para diseñar la forma trapezoide CSS para el diseño final de la forma CSS, crearemos una forma de CSS trapezoidal que puede agregar un ancho adicional a un triángulo ascendente (o isósceles). Para hacer esto, asegúrese de seleccionar varias formas y actualizar los estilos de borde para cada uno de los siguientes:
Esquinas redondeadas: 0 px
Ancho del borde derecho: 100 PX
El color del borde derecho: transparente
Ancho del borde inferior: 100 PX
Color de borde inferior: RGBA (245,44,143,0,5)
Ancho del borde izquierdo: 100 PX
Color del borde izquierdo: transparente

Luego actualice el ancho de las formas / módulos de la siguiente manera:
Ancho: 100 PX