Un efecto muy resultón para personalizar las imágenes de tu web es utilizar algún tipo de marco alrededor de ellas. En este caso vamos a aprender a crear un marco compuesto por 3 variantes:
- Degradado
- De tres colores
- Oblicuo
Así, si aprendemos a hacer esto, seguro seremos capaces de hacer otros marcos más simples, de un solo color, o sin degradado.
Para conseguir este efecto, tendremos que ponerle una clase a la imagen (hemos elegido “marco” como nombre) y también tendrás que añadir este código a tu css adicional (recodemos que está en menú apariencia / personalizar / css adicional
.marco {
background: linear-gradient(to bottom right, #ff3021 16%,#c61fa3 51%,#1f33f0 84%);
padding: 12px;
Vamos a crear un linear gradient, orientado hacia la parte inferior derecha de la imagen (bottom right) y que irá desde el color rojo #ff3021 al azul #1f33f0, pasando por el #c61fa3 que es como un morado.
See the Pen
Imagen con marco degradado by txtmakers (@txtmakers)
on CodePen.
Me llamo Carlos Martínez, y junto a mi pareja Elena estamos detrás de los contenidos de esta web. Sobre mí, decirte que hace unos años que dejé mi trabajo como fotoperiodista para dedicarme al mundo del diseño web, el SEO y los proyectos digitales.