homefinance blog
Este tutorial cubrirá una serie de métodos que puede usar para agregar imágenes Blob a su sitio web. En los últimos años, la incorporación de bloques en su sitio web ha explotado en popularidad, porque muchas ofertas importantes de SaaS han adoptado esta forma única. Muchos dicen que es completamente lo opuesto a la tendencia predominante de la interfaz de usuario plana/angular que ha existido desde mediados de -2010.
¡Psst! Esto es lo que hacemos. La imagen es aleatoria, actualice la página para otra.
Por lo general, las imágenes se colocan frente a los bloques o se enmascaran específicamente en ellas. En un proyecto de diseño web reciente, utilizamos imágenes Blob para agregar una nota moderna al sitio web y queríamos discutir algunos de los métodos principales que puede usar para agregar BLOB Images Basic) a su sitio.
Ejemplos de sitios web que usan blobs Muchos sitios web incorporan esta tendencia en su diseño general, utilizando imágenes que no tienen esquinas o bordes perceptibles. Aquí hay algunos ejemplos de esta tendencia que se encuentra en la naturaleza:
El sitio web de Elementor utiliza un bloque único de bloques que tiene una foto sólida como fondo, mientras se superpone las capturas de pantalla de su instrumento arriba. Esto le da un hermoso efecto 3D a toda la visual.
NordCloud, una compañía líder europea en la implementación de Cloud, incorpora bloques en su sitio web.
Saltinourhair, un blog galardonado utiliza bloques de imágenes como imágenes presentadas.
Ahora que hemos estropeado nuestros ojos con algunos ejemplos visuales, pasemos por algunas maneras que puede usar para generar fácilmente blobs e imágenes de blob para su sitio web. Creación de bloques con Blobmaker Si desea incorporar bloques simples (sin enmascarar imágenes sobre ellos), puede hacerlo fácilmente utilizando una aplicación web llamada Blobmaker. Puede seleccionar la distorsión, el número de puntos, la diferencia entre puntos y color para crear un bloque completamente aleatorio para su sitio. Luego puede implementarlo fácilmente en su sitio copiando e insertando el código SVG o descargando como SVG, convirtiéndolo en cualquier formato de imagen que desee y luego cargándolo nuevamente en su sitio. Este instrumento es excelente porque crea bloques completamente aleatorios en función de sus criterios, lo que significa que puede cambiar a través de él hasta que encuentre una gota que funcione bien en su sitio. También establezca el color allí, lo que hace que esta sea una solución todo en uno para crear bloques SVG para su sitio, aquí hay algunos bloques que generé con esta aplicación en unos segundos:
Creación de bloques de imágenes (Método uno) Si desea crear una imagen similar a una bomba para usar en su sitio web, puede hacer fácilmente una imagen en un blog usando Photoshop.
Primero, use la aplicación de creación de Blob para generar un bloque aleatorio. El color no importa, pero asegúrese de tener la complejidad y el contraste para ser exactamente como desee. Una vez que haya encontrado el bloque para usted, descárguelo en su computadora y cargue Photoshop. Coloque el blob SVG directamente en el lienzo de Photoshop (recomendamos usar un lienzo estándar de 1000 x 1000 píxeles, porque exportaremos un PNG para que las dimensiones no importen). Una vez que el bloque esté en el lienzo, simplemente importe la imagen en una capa que se superpone en el bloque. Haga clic derecho en esa capa de imagen y cree una máscara de corte que se aplique al bloque a continuación. Y voil, ahora tienes una imagen de un tamaño de bloque.
Para exportar esto rápidamente, puede combinar la imagen en la capa BLOB juntas, hacer clic con la derecha y seleccionar “Exportar rápido como PNG”. Ahora tiene un formato PNG de un bloque de imágenes que puede usar en su sitio web. Puede personalizar más esta imagen agregando una superposición de gradiente o con imágenes cortadas por el bloque en la parte superior, pero que excede la parte inferior, produciendo un efecto 3D. Puede pensar: “Bueno, es genial, pero no tengo Photoshop y no quiero gastar dinero solo para crear una imagen en bloque”. Es por eso que tenemos el Método 2, que le permite crear una imagen Blob usando HTML y un poco de grasa.
Creación de una imagen BLOB usando SVG y HTML Si no buscamos seguir la ruta de Photoshop y nos alegramos de usar un SVG para mostrar nuestro blob, esto también se puede hacer fácilmente usando un corte y enmascaramiento de imágenes directamente sobre el bloque SVG . Para hacer esto, genere el bloque usando la aplicación, luego edite el siguiente código: <Path Filling = "#FF0066" d = "M49.5, -65.4c58.2, -51.8.55.1, -30.54.2, -12.9c53.4, 4.7.54.7.7,18.5,49.1.128.6c43.6, 38.6,31.1.44.8,8,17.6,50.9c4.1.57, -10.5.62.8, -22.59.5c -34.56.1, -44.1.43.5, -53.7.29.7c -63.3.73, -73.4, -15.7c -73.8, -32, -65, -49.4, -51.2, -62.2c -37.4, -75, -18.7, -83.1.0.9, -84.1 C20.4, – – – – – – – – – – – 85.2.40.9, -79.1.49.5, -65.4z "transformar =" traducir (100 100) "
Idioma de código: JavaScript (JavaScript)
Reemplace la ruta con la ruta generada por la aplicación BLOB Maker. El camino es lo que realmente puede hacer Blob. Luego, en el elemento de la imagen, reemplace la URL XLINK con su propia foto. Actualmente, lo hemos configurado para usar la API Unsplash y llenar el bloque con una imagen aleatoria (actualice esta página y la imagen cambiará). Puede ajustar finamente otros elementos del código, pero si está buscando una forma rápida y simple de agregar imágenes en forma de bloque a su sitio, esta es una excelente opción. Con todo esto, si desea estratificar o usar un formato Al igual que PNG para JPEG, ir a la ruta de Photoshop es probablemente una mejor opción. Para agregar este elemento a su sitio, simplemente copie e inserte el código HTML en su sitio, por ejemplo, si usa Elementor, puede hacerlo con un elemento HTML. Si usa Gutenberg, puede hacerlo con un bloque HTML Gutenberg. También puede tirar esto directamente a su tema de PHP. Puede manejar el tamaño utilizando CSS para transformar todo el elemento o aumentando la modificación de los valores del cuadro de visualización (su agrandamiento hace que el bloque sea más pequeño).
Otros excelentes efectos de blob que se construirán en su sitio web si está buscando efectos adicionales de imagen de blob (o simplemente efectos de blob), aquí hay algunos códigos en los bits que encontré en CodePen. Para instalarlos en su sitio, generalmente deberá agregar CSS a la hoja de estilo, HTML donde desea el efecto y JavaScript utilizando un script independiente o incorporarlo mediante etiquetas de script HTML.
Usando JavaScript, este bloque responde a la introducción del mouse del usuario. Cuando lo tocas con el mouse, el blob reacciona moviéndose en la dirección opuesta, causando ondas a lo largo de su forma. Esta animación con Blob da un paso más allá y crea un juego de fotos 3D realista, que se mueve y fluye. El lápiz de código se titula “Asistente de Blob”, pero sin duda es un efecto visual maravilloso que puede incorporar en cualquier lugar de su sitio.
Si está buscando un fondo único, similar a un bloque, para incorporar en su sitio web, este código de centavo utiliza una colección de SVG, imágenes de fondo y animaciones para crear un efecto único. Los parches flotan en la pantalla, que se cruzan y se conectan entre sí.
Conclusión Si desea agregar bloques, bloques de imágenes o bloques animados a su sitio web, este artículo debería haberle presentado más formas de hacerlo. El uso del método de Photoshop para crear bloques de imágenes es excelente si intenta generar imágenes PNG, mientras que el enmascaramiento de SVG se puede hacer completamente en línea, lo que viene con el requisito de usar SVG en el sitio. También puede usar CodePens para incorporar bloques animados avanzados en su sitio web. Si tiene alguna pregunta sobre cómo hacer algo sobre blogs, sitios web y diseño web, contáctenos en los comentarios a continuación.
Suscribir y distribuir
Si le gustó este contenido, suscríbase al resumen mensual de noticias de WordPress, inspiración para sitios web, ofertas exclusivas y artículos interesantes.
Dar la baja en cualquier momento. No enviamos spam y nunca venderemos o distribuiremos su correo electrónico.
