Saltar al contenido

Imágenes

A la hora de insertar imágenes para nuestros proyectos, WordPress y su nuevo bloque de imágenes que incorpora Gutenberg trae varios efectos y opciones de personalización

Pero de cara a tener aún algo más personalizadas nuestras imágenes, dejo a continuación un par de tips y efectos de filtros que puedes añadir sin necesidad de editores de fotografías tus imágenes:

Efectos y Filtros con CSS para imágenes

Al añadir una imágen con el bloque de imágen de WordPress, añadir la clase “imagen3d” en el apartado de Clase(s) CSS adicional(es). Previamente es necesario añadir nuestro CSS en el apartado de Apariencia -> Personalización -> CSS adicional

fernantec avatar

Efecto 3D y Filtros

.imagen3d img {
transform: perspective(80rem) rotateY(45deg);
border: 3px solid grey;/* Elegir el color deseado y tipo de borde*/
filter: grayscale(1);/*Cambiar filtro por el deseado de la lista de filtros*/
}
filter: blur(4px);

filter: brightness(250%);

filter: contrast(180%);

filter: grayscale(100%);

filter: hue-rotate(180deg);

filter: invert(100%);

filter: opacity(50%);

filter: saturate(7);

filter: sepia(100%);

filter: drop-shadow(8px 8px 10px green);

Imagen tipo Polaroid

Para conseguir éste efecto es necesario agregar una foto y añadirle una leyenda al pie de imágen, se debe añadir la clase CSS a la imágen en las opciones del bloque de wordpress , agregar previamente la Clase .polaroid en el apartado de Apariencia -> Personalización -> CSS adicional

fernantec avatar
Visita FernanTEC.com

Polaroid

.polaroid {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: auto;
width: fit-content;
background: white;
text-align: center;
}

  • Optimizado para Gutenberg
  • Soporte ilimitado
  • Monetiza tu WEB
  • Mejora los Rankings en Google
  • Actualizaciones de por vida

Últimas Novedades de nuestro Blog

Mira los artículos de nuestro Blog con los mejores consejos tras la experiencia de uso del Tema Orbital enfocado a SEO y posicionamiento.

Página creada por FernanTEC - ¿Quieres saber más?