Cómo apilar hermosos artículos de cartera con div Div

Las nuevas opciones de transformación de la división han abierto muchas puertas nuevas para crear un diseño web visualmente atractivo. Nos acerca un paso más a no necesitar ningún software de edición de imágenes cuando diseñamos un sitio web desde cero. Podemos convertirlo para que se vea exactamente como queramos, al mismo tiempo un diseño 100% receptivo. En esta publicación, utilizaremos las nuevas opciones de transformación para apilar hermosos artículos en la cartera. Este es un enfoque excelente para presentar los sitios web hechos anteriormente, por ejemplo. También nos aseguraremos de que las imágenes permanezcan donde están, independientemente del tamaño de la pantalla que usan los visitantes. Esperamos que este tutorial lo inspire a ser creativo con el nuevo Div.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.

¡Comencemos a recrear! Agregue una nueva sección de fondo de gradiente iniciar agregando una nueva sección a su página. Abra la configuración de la sección y agregue un fondo de gradiente.
Color 1: # F4F4F4
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: centro
Posición inicial: 30%
Posición final: 30%

Extienda luego, acceda a la pestaña de diseño y cambie los valores de llenado personalizados desde la configuración de espaciado.
Revelaje superior: 0 PX (escritorio), 18 VW (tableta), 40VW (teléfono)
Bajo forro: 0 PX (escritorio), 18 VW (tableta), 40VW (teléfono)

Agregue una nueva fila La estructura de la columna Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas: dimensionamiento sin agregar módulos, abriendo la configuración de fila y modifica la configuración de tamaño.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Espacio y luego acceda a la configuración de espaciado y elimine el relleno superior e inferior predeterminado.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
También mostramos, nos aseguramos de que ambas columnas aparezcan una al lado de las otras en dimensiones de pantalla más pequeñas. Para hacer esto, tendremos que agregar una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex;

Agregue el módulo de imagen no. 1 en la columna 1 ¡Cargue la imagen ahora podemos comenzar a agregar diferentes módulos! Para poder seguir este tutorial, continúe y guarde la siguiente pantalla de impresión en su computadora:

Cargue la pantalla de impresión en un módulo de imagen en la primera columna.

Dimensión Luego, acceda a la pestaña de diseño y active la opción “Fuerza el ancho completo”. Después de hacerlo, la imagen ocupará todo el ancho de la columna.

Fuerza el ancho completo: si
Espacio para reducir el tamaño de la imagen, agregaremos algunos bordes personalizados a la izquierda y a la derecha. Notará que usamos una unidad de visualización para garantizar que el tamaño de la imagen permanezca intacto, independientemente del tamaño de la pantalla.

Margen superior: -10VW
Junta izquierda: 11VW
Junta derecha: 11VW
Border agregue “2VW” a cada una de las esquinas en la siguiente configuración de borde.

Sombra de caja con un tono de caja.

Poder de la falta de claro de la sombra de la caja: 80 pxcului sombra: RGBA (0.0,0,0,3)
¡Transformar la traducción ahora podemos comenzar a transformar la imagen! Agregue los siguientes valores a la pestaña Transformación de transformación de las opciones de transformación:
Abajo: -26VW

Derecha: -2VW
Los valores que agrega aquí dependen del ancho y la altura de su imagen, por lo que si usa una imagen diferente, deberá cambiar los valores en consecuencia. Asegúrese de usar unidades de visualización para asegurarse de que la posición de la imagen permanezca igual en todos los tamaños de pantalla.
Rotar la transformación Pase a la pestaña de transformación y gire la imagen en consecuencia:
Izquierda: 24 grados

Centro: 46 grados
Derecha: -7 grados
Traducir sesgo por último, pero no menos importante, active la traducción inclinada con los siguientes valores:
Abajo: -4 grados

Derecha: 24 grados
Agregue el módulo de imagen no. 2 en la columna 1 ¡Cargue el interruptor de imagen al siguiente módulo de imagen! Guarde la siguiente pantalla de impresión en su computadora o use otra pantalla de impresión en su elección:
Continúe cargando la pantalla de impresión en el segundo módulo de imagen en la columna 1.

Dimensión Luego, acceda a la configuración de tamaño y active la opción “Fuerza el ancho completo”.

Fuerza el ancho completo: si

Espacio reducimos el tamaño de la imagen y la superamos con la imagen anterior utilizando algunos valores de margen personalizados en la configuración de espaciado.
Margen superior: -81VW (escritorio), -50VW (tableta y teléfono)

Margen izquierdo: 11VW
Margen derecho: 11VW
Border agregaremos “2VW” a cada una de las esquinas en la siguiente configuración de borde.
Box Shadow y agregaremos un tono de caja. Observe cómo usamos un tono de caja más oscuro para la segunda imagen del artículo de la cartera. Esto lo ayudará a crear una mayor profundidad entre los artículos en la cartera. Poniendo la sombra de la Caja: 150 PX

Color de la sombra: RGBA (0.0,0,0,6)

Transformar la traducción Entonces, acceda a la configuración de transformación y cambie los valores de traducción de transformación:
Abajo: -8VW
Derecha: 0 PX

Una vez más, estos valores realmente dependen de cómo desea colocar la pantalla de impresión y de qué tamaño tiene su pantalla de impresión. Cuanto más pequeña sea la imagen, más tendrá que empujarla hacia la izquierda utilizando un valor negativo más alto.
Gire el interruptor de transformación a la pestaña Rotación de transformación y juegue con los tres valores.
Izquierda: 24 grados
Centro: 46 grados

Derecha: -7 grados
Traducir sesgo por último, pero no menos importante, cambie los valores de inclinación de traducción:
Abajo: -4 grados
Derecha: 24 grados


Agregue el módulo de imagen no. 3 En la columna 1 Cargue la imagen para el siguiente y último módulo de imagen, necesitamos en la columna 1. Guarde la siguiente pantalla de impresión o use cualquier otra pantalla de impresión:
Agregue la pantalla de impresión que guardó en un nuevo módulo de imagen.
Dimensión Luego, acceda a la configuración de tamaño y active la opción “Fuerza el ancho completo”.

Fuerza el ancho completo: si

Espacio ir a la configuración de espaciado y cambiar los valores de margen en consecuencia:

Margen superior: -107VW
Margen izquierdo: 19 VW

Margen derecho: 19 VW
El borde continúa agregando “2VW” a cada una de las esquinas del módulo de imagen.
Box Shadow Agregue un tono de caja adicional. Nuevamente, usamos un color de sombra más fuerte que los que usamos para los dos módulos de imagen anteriores. Poniendo la desenfoque de la sombra de la caja: 200 PX
Color de la sombra: RGBA (0.0,0,0.82)

Transformar la traducción Entonces, acceda a la configuración de transformación y cambie los valores de traducción de transformación:

Abajo: -42VW
Derecha: 11VW
Transformación de rotación Vaya a la pestaña Transformación y realice algunos cambios allí.

Izquierda: 24 grados
Centro: 46 grados
Derecha: -7 grados

Traduce el sesgo por último, pero no menos importante, cambie los valores de inclinación de la traducción.
Abajo: -4 grados
Derecha: 24 grados
Agregue el módulo de texto de título en la columna 2 Agregue una copia H2 ¡Vamos a la segunda columna! Agregue un módulo de texto con un contenido H2 de su elección.

Configuración de texto H2 Vaya a la siguiente configuración de texto H2 y realice algunos cambios.
2 Sección de fuentes: Roboto
Fuente de peso de la Sección 2: delgada

Título 2 Alineación del texto: Izquierda

Rúbrica 2 Color de texto: # 000000
Título 2 Dimensión de texto: 5VW (escritorio), 6VW (tableta), 7VW (teléfono)
Rúbrica 2 Espaciación de litros: -1 PX
El espacio continúa agregando valores de margen personalizados en la configuración de espaciado.
Margen superior: 35VW (escritorio), 10VW (tableta), 0VW (teléfono)
Margen izquierdo: -4VW
Margen derecho: 4VW

Agregue el módulo divisor a la visibilidad de la columna 2 La siguiente manera que necesitamos en la columna 2 es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
Colorear luego acceda a la pestaña de diseño y cambie el color del separador.
Color: # 8193fa

Dimensión Modifique la configuración de tamaño.
Peso del divisor: 8 PX

Ancho: 28%
Espaciado y agregue algunos valores de margen personalizados. Superior Marja: 1VW

Margen izquierdo: -4VW
Margen derecho: 4VW
Agregue el módulo de descripción de texto en la columna 2 agrega contenido La siguiente forma que necesitamos en la columna 2 es otro módulo de texto. Agregue un contenido de párrafo de su elección.

Configuración de texto Entonces, acceda a la configuración del texto y realice algunos cambios.
Texto de fuente: Abrir sans
Tamaño de texto: 0.6VW (escritorio), 1.2VW (tableta), 1.8VW (teléfono)
Altura de la línea de texto: 3.1em (escritorio), 2.7em (tableta), 2.6em (teléfono)

Orientación de texto: izquierda

Espaciado Agregue algunos valores de margen personalizados.
Margen superior: 1VW
Margen izquierdo: -4VW
Margen derecho: 4VW
Agregue un módulo de botón a la columna 2 Agregue una copia y último módulo que necesitamos completar el diseño es un módulo de botón. Agregue una copia de su elección.

Establece el botón Luego, acceda a la pestaña de diseño y modifique la configuración del botón.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Color 1: # 5627BA

Color 2: # 8FB5FC

Dirección de gradiente: 122deg
El ancho del nudo del botón: 0 PX
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
Difundir el cambio y el margen personalizado y los valores de llenado.
Margen superior: 2VW (escritorio), 3VW (tableta), 5VW (teléfono)
Margen inferior: 6VW (tableta), 8VW (teléfono)
Margen izquierdo: -4VW
Margen derecho: 4VW


Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)
Revestimiento derecho: 3VW (escritorio), 5VW (tableta), sombra de caja de 7VW (teléfono) No menos importante, agregue un tono de caja sutil y haya terminado!
Poder de poco claro de la sombra de la caja: 40 px
Color de la sombra: RGBA (0.0,0,0,3)
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales En esta publicación, te mostré cómo ser creativo con las nuevas opciones de transformación de la Divic.Específicamente, apilé artículos de cartera para crear un diseño hermoso y visualmente atractivo.También nos aseguramos de que las imágenes se vean muy bien en todo el tamaño de la pantalla.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.