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
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*/
}
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
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.
