Tutoriales

Formas fáciles

A muchos podrá gustarle o no, mas no puede negarse que la sección de arriba para nuestro equipo de trabajo no deja de ser interesante. 

Mas ¿qué tal si quisiéramos cambiar la forma de las imágenes del equipo? Elementor como tal con sus funciones es poco lo que ofrece. Podríamos por ejemplo poner circulares las imágenes o redondear los bordes. Me imagino que todos saben cómo hacerlo, pero para los que no pues seleccionamos la imagen y vamos a Estilo y allí en Radio de Borde escribimos la cantidad que queremos redondear. Así podemos lograr efectos como los de abajo que definitivamente son mucho más interesantes que los de arriba.

 

Navegando por la web encontré esta página: https://bennettfeely.com/clippy/ que nos permite crear formas con unos cuantos clicks y si usamos las pre-establecidas por ellos nos basta uno. Para lograrlo vamos a necesitar un poco de .css personalizado. Para ello vamos a Avanzado/Custom CSS y escribimos lo siguiente: .foto-forma img {clip-path: } Con esto lo que estamos haciendo es indicando que a la foto seleccionada le vamos a aplicar la clase .foto-forma img.

Ahora vamos a https://bennettfeely.com/clippy/ y allí seleccionamos la forma que queremos aplicar a la imagen. En nuestro caso escogimos el Hexágono. Copiamos el código y lo pegamos entre los dos corchetes sustituyendo «clip-path». Así que nuestro código debe quedar así:

.foto-forma img {clip-path: polygon(25% 0%75% 0%100% 50%75% 100%25% 100%0% 50%);}

Hemos terminado. Solo nos resta seleccionar la imagen, ir a Avanzado y añadir nuestra .css class. Ahora nuestro Grupo de Trabajos debe verse así.

Similar Posts

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *