7 técnicas para crear sitios web audaces y coloridos con div Div

Usar un estilo de diseño audaz y colorido para su sitio web es una excelente manera de hacer su sitio pop. Le ayudará a traer una atmósfera positiva en su sitio y, aunque no coincide con ningún sitio web, ciertamente coincide con muchos de ellos. En esta publicación, le mostraremos 7 técnicas diferentes sobre cómo crear un diseño web audaz y colorido utilizando solo el div. En primer lugar, pasaremos por diferentes técnicas y luego recrearemos un ejemplo que coincida con la descripción. Esta es la última publicación de la serie de publicaciones en las que tratamos 4 estilos de sitios web y cómo hacerlos usando Div:
Limpio y abstracto
Mínimo
Departamento
Audaz y colorido
¡Vamos a eso! Suscríbase a nuestro canal de YouTube 1. “Transformar” las filas en las secciones de columnas La primera técnica que puede usar para crear un diseño web audaz y colorido es el giro de las filas en secciones. Al eliminar todos los rellenos implícitos entre una sección y una fila, no dejará ninguna diferencia aparente entre los dos. Esto, en combinación con la eliminación del ancho del canalón, le permite tener dos columnas que se presionan juntas.

2. Grados + Texturas de fondo El uso de fondos de gradiente en su sitio web puede proporcionar resultados sorprendentes. Pero lo que te ayuda a empoderar a estos colores, aún más, es su combinación con un fondo texturizado. Para mantener su equilibrio, use esta combinación solo para una columna. Mantenga la segunda columna limpia y ligera para una nota moderna.

3. Colores de gradiente semi-transparentes + divisores debajo de la sección Después de convertir una fila en una sección, también puede agregar separadores de secciones al fondo de la columna. Para garantizar que se muestren los separadores, sin superponer el contenido, use colores ligeramente transparentes para su columna4. Superposición horizontal de los módulos de columna a menudo ves que los sitios web usan superposiciones verticales. La superposición horizontal, por otro lado, es menos utilizada, aunque puede traer resultados absolutamente sorprendentes. Para lograr este tipo de resultado, es importante saber que los elementos en la columna derecha tienen una ventaja jerárquica sobre los elementos en la columna izquierda. No puede obtener el mismo resultado si coloca los elementos en la columna izquierda.

5. Divida la copia para la alineación perfecta no es nada más satisfactorio que tener una alineación perfecta. Es uno de los principales principios de diseño que tienen el buen diseño del mal diseño. Para garantizar que esta alineación sea perfecta al superponerse a dos columnas, intente dividir su copia en diferentes módulos de texto. Esto le permitirá crear una alineación perfecta haciendo que el borde izquierdo negativo coincida con la palabra o oración en particular.

6. Combine los colores del texto negro y semitransparente para agregar el aspecto en negrita a su sitio web, use un tamaño de fuente grande para la copia, junto con un peso de texto muy audaz. Y para equilibrar la audacia, puede cambiar entre el uso de un color de texto negro y semi -transparente. Esto lo ayudará a crear suficiente profundidad y variación en su sitio web. Evite la sombra de la caja en la parte superior o inferior para unir las secciones que puede unir fácilmente dos secciones en su página jugando con las opciones de sombra del cuadro. Primero, use un tono de caja muy sutil. Esto significa el uso de resistencia suficiente para el desenfoque, la resistencia a la propagación negativa y un color muy ligero. Una vez que cree su sutil tono de la caja, juegue con su posición vertical. Para la primera sección de su página, asegúrese de mover la posición vertical hasta que aparezca la sombra del cuadro en la parte inferior de la sección. Lo mismo se aplica a la última sección, pero asegúrese de que no aparezca en la parte superior.

Vista previa ahora, que hemos pasado por todas las diferentes técnicas, es hora de poner las cosas en práctica. Recrearemos el siguiente diseño:

Comencemos a crear: agregue la sección estándar no. 1 Sección de configuración Divisor superior Agregue una nueva página con una sección estándar y abra inmediatamente la configuración de la sección. Lo primero que necesitamos es un divisor superior:

Estilo divisor: encontrar en la lista

Color divisor: RGBA (0.0,0,0.13)
Altura del divisor: 900 PX
Divisor de flip: vertical
Disposición del divisor: Contenido bajo la sección
Separador inferior Continuar agregando un separador inferior similar. Divisor de estil: Buscar en la lista
Color divisor: RGBA (0.0,0,0.13)

Altura del divisor: 900 PX
Disposición del divisor: Contenido bajo la sección
Espacio entonces, dale a la sección un cierto margen y elimine el llenado predeterminado.
SUS y margen inferior: 50 PX
Margen izquierdo y derecho: 50 PX

Revestimiento superior e inferior: 0 px
Revestimiento izquierdo y derecho: 0 PX
Las esquinas redondeadas luego abre la configuración del borde y agregue algunas esquinas redondeadas.
A la parte superior izquierda: 20 PX
A la esquina superior derecha: 20 px

Box Shadow Usamos una sombra de caja sutil en la parte superior de nuestra sección, haciendo los siguientes ajustes:
Box Shadow Posición vertical: -23px
Poder de poco claro de la sombra de la caja: 37 px

Poder de extender la sombra de la caja: -29px
Color de la sombra: RGBA (0.0,0,0.22)
Box Shadow Position: Outer Shadow
Agregue una nueva línea a la estructura de la columna, no que hayamos terminado de cambiar la configuración de la sección, podemos continuar agregando dos columnas.
Columna 1 Gradiente de fondo sin agregar módulos, abriremos la configuración. Lo primero que debemos hacer es agregar un fondo de gradiente a nuestra primera columna.
Color 1: RGBA (255.191.0.0.76)

Color 2: RGBA (153,0,255,0,87)

Columna 1 Textura La imagen de fondo combinaremos este fondo degradado con un fondo texturizado. La imagen que uso es parte de la reunión div. Guarde la siguiente imagen en el escritorio haciendo clic con el botón derecho y guardándola (es un archivo PNG con texturas blancas, no podrá ver cómo se ve hasta que lo abra en su computadora y / o lo use en su sitio )
Después de cargar la imagen en su biblioteca de medios, asegúrese de que seleccione “coincidir” como tamaño del fondo del color de fondo de la columna 1. La columna 2, entonces, le dé a la segunda columna el color de fondo “# F7F7F7”.
Dimensión, “transformaremos” nuestro convertido en una sección haciendo que ocupe todo el ancho de la sección.

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 junto con el hecho de que la fila ocupa todo el ancho de la sección, tendremos que eliminar el revestimiento superior e inferior de nuestra sección.
Revestimiento superior e inferior: 0 px
¡Agregue un módulo divisor a la columna 1, oculte el divisor para comenzar a agregar los módulos! Lo primero que necesitamos es un modo divisor en la primera columna. Utilizamos este módulo solo para crear el espacio que necesitamos en la primera columna. De hecho, no queremos aparecer. Después de agregar el módulo, asegúrese de apagar la opción “Pantalla”.
Espacio ir a la siguiente configuración del espacio y agregar el siguiente revestimiento personalizado al separador:

Revestimiento superior: 200 PX (escritorio y tableta), 150 PX (teléfono)
Bajo forro: 200 PX (escritorio y tableta), 150 PX (teléfono)

Agregue el módulo de texto no. 1 En la columna 2 Agregue una copia ahora podemos pasar a la segunda columna. Aquí, renunciaremos a los tres módulos de texto diferentes y haremos que se superpongan a ambas columnas. Si desea que un módulo se superponga en dos o más columnas, siempre tendrá que colocarlo en la columna derecha. Así es como funciona la estructura jerárquica. Agregue su primer módulo de texto y agregue una copia.

Configuración de texto Abra la configuración del texto y aplique los siguientes cambios: Peso de la fuente de texto: Ultra Bold
Text -Text estilo: mayúscula
Color de texto: # 000000


Tamaño de texto: 250 PX (escritorio), 200 PX (tableta), 100 PX (teléfono)

Altura de la línea de texto: 0.75em
Espacio también, necesitaremos un cierto margen. El margen izquierdo negativo que usamos coinciden con la copia que hemos elegido. Si desea hacer esto con otro texto, deberá jugar con este valor. Cámbielo hasta que vea el comienzo de un personaje alineado con la transición de columnas.
Margen superior: 200 PX (escritorio), -250 PX (tableta), -120 PX (teléfono)
Margen izquierdo: -279px (escritorio), 5% (tableta y teléfono)
Clone el módulo de texto dos veces el clon no. 1 Cambie el texto que creamos nuestro primer módulo de texto y, para ahorrarnos algo de tiempo, lo clonaremos dos veces y haremos algunos cambios. Lo primero que deberá cambiar en relación con el segundo módulo de texto es la copia.
Cambie el espacio para la copia que usamos aquí es diferente, por lo que significa que tendremos que cambiar el borde izquierdo. Observe cómo usamos números decimales para que el módulo de texto se alinee perfectamente. Deshágase del margen superior.

Margen izquierdo: -360.7px (escritorio), 5% (tableta y teléfono)
Clon no. 2 Cambie el cambio de texto y la copia del tercer módulo de texto.
Cambie el color del texto y para que el diseño se destaque aún más, cambiaremos el color del texto de este módulo en “RGBA (0.0,0,19)”.

Cambie el espacio, eliminamos el margen superior para este módulo y agregue un margen inferior. El margen negativo izquierdo también es diferente.

Margen inferior: 200 izquierda a la izquierda: -410px (escritorio), 5% (tableta y teléfono)
Agregue la sección estándar no. 2 Configuración Sección Sparation ¡Termino con la primera sección, es hora de pasar al siguiente! Después de agregar una nueva sección estándar, abra la configuración del espacio y realice los siguientes cambios:

SUS y margen inferior: 50 PX

Margen izquierdo y derecho: 50 PX

Revestimiento superior e inferior: 0 px
Revestimiento izquierdo y derecho: 0 PX
Las esquinas redondeadas continúan agregando algunas esquinas redondeadas desde abajo:

En la parte inferior izquierda: 20 PX
En la parte inferior derecha: 20 PX
Sombra de caja Agregue un tono de caja y en la parte inferior de la sección.
Box Shadow Posición vertical: 47px
Poder de poco claro de la sombra de la caja: 37 px

Poder de extender la sombra de la caja: -29px
Color de la sombra: RGBA (0.0,0,0.22)
Box Shadow Position: Outer Shadow

Agregue una nueva línea a la estructura de la columna y luego, agregue una fila con tres columnas a la nueva sección.
La dimensión “transformamos” esta línea y en una sección:
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 eliminaremos el relleno predeterminado de arriba e inferior.

Revestimiento superior e inferior: 0 px
Agregue el módulo de blurb # 1 a la columna 1 Elija el icono en total, necesitaremos tres módulos de blurb. Uno para cada columna. Comenzaremos agregando uno en la primera columna y después de haber terminado, clonaremos y lo colocaremos en las columnas restantes. Esto nos ayudará a ahorrar tiempo. Una vez que haya agregado el contenido al módulo de la propaganda, seleccione un icono de elección en la configuración de imagen e icono.
Fondo de gradiente Haremos que parezca que el ícono se superpone sobre la parte superior del módulo de desenfoque utilizando un fondo de gradiente para él: Color 1: RGBA (255,255,255.0)
Color 2: # A21DF9
Posición inicial: 20%

Posición final: 20%
La imagen de fondo de textura combina el fondo degradado con el mismo fondo texturizado que utilizamos en la sección anterior.

Configuración Configuración de icono modificado a continuación:

Icono de color: # 000000
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 85 PX
Configuración de texto Continúe cambiando la configuración de texto.
Orientación de texto: centro

Color de texto: Abierto

Configuración de texto de título Entonces, utilizaremos la siguiente configuración para estilizar nuestra propaganda del título:
Fuente de peso del título: Ultra Bold
Text -Text estilo: mayúscula
Título Tamaño del texto: 46 PX

Configuración de texto de Corp y la siguiente configuración de texto del cuerpo:
Peso de la fuente del cuerpo: luz
Tamaño del texto del cuerpo: 18 PX

Espacio, no menos importante, le daremos a nuestro módulo espacio de propaganda para respirar agregando un forro personalizado:
Revestimiento superior: 50 px
Finamiento inferior: 100 PX
Revestimiento izquierdo y derecho: 50 PX

Clone el módulo de la propaganda dos veces y colóquelo en las columnas restantes no. 1 Cambie el icono cuando haya terminado de cambiar el módulo de la propaganda, clon dos veces. Después de hacer esto, coloque los duplicados en las columnas restantes. Luego abra el módulo de la propaganda en la segunda columna y cambie el icono utilizado.
Cambie el fondo de gradiente, continúe cambiando el color de fondo del segundo gradiente a “# D47A9A”.
Clon no. 2 Cambie el icono para hacer lo mismo para el módulo de propaganda en la última columna.

Cambie el fondo de gradiente para este módulo, utilizamos “# F3BF3E” como el segundo fondo de gradiente. Previaation Si siguió cada uno de los pasos anteriores, debería haber obtenido el siguiente resultado en diferentes tamaños de pantalla:
Pensamientos finales En esta publicación, le he mostrado cómo crear sitios web audaces y coloridos utilizando solo las opciones incorporadas del DIV.En primer lugar, pasamos por algunas técnicas de división a las que puede acercarse y, más tarde, recreé un ejemplo de ajuste desde cero.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.