Meter imágenes dentro de formas

Tiempo estimado de lectura: 3 minutos

 

Cómo meter imágenes dentro de formas

En este artículo vamos a ver cómo podemos meter imágenes dentro de formas. Un efecto que complementa al artículo de hace unas semanas, en el que aprendimos a crear bordes circulares en nuestras imágenes.

Como siempre, utilizaremos código CSS secillo, que como siempre, explicaremos su funcionamiento para que puedas adaptarlo a tus necesidades.

¿Vamos a ello!.

Código que vamos a utilizar

Como llevamos haciendo en todos estos artículos dedicados a las imágenes, utilizamos código CSS más o menos simple, pues en esta ocasión no vamos a menos.

Utilizaremos este código:

.forma1 {
width: 252px;
height: 360px;
-moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Y ahora una forma poligonal:

.forma2 {
width: 450px;
height: 300px;
-moz-border-radius: 0 50% / 0 100%;
-webkit-border-radius: 0 50% / 0 100%;
border-radius: 0 50% / 0 100%;
background: #5cb85c;
border: 3px solid #555;
}

Como puedes observar, hemos creado 2 clases, la primera (forma1) crea una forma de huevo con la imagen, y la segunda clase (forma2), crea una forma poligonal con la imagen, en forma de pentágono.

¿Qué hace este código?

Al igual que en el artículo en el que hacíamos las imágenes circulares, creamos una clase llamada forma1, que nos servirá para aplicársela a aquellas imágenes que queremos convertirlas en imágenes con formas especiales. Si no creáramos esta clase, los estilos se aplicarían a todas las imágenes de nuestra web, con lo que convertiríamos todas las imágenes de nuestra web.

Para evitar esto, utilizamos dos valores  de width y height de 50vmin. Este valor hace que tome el valor del 50% de anchura y altura, del área que se vea de esta imagen. Al tomar el valor de 50% tanto de ancho como de alto, lo que hacemos es enmarcar dicha imagen, con lo que el resto de ancho o alto que exceda de la otra medida, no lo tendrá en cuenta.

El efecto realmente se produce en la última línea, que es la que le aplica la forma poligonal a la imagen: border-radius: 37% 63% 74% 26% / 30% 30% 70% 70%;.

Cómo se verían estos efectos

La primera imagen crea una imagen con forma de huevo:

Imagen con efecto de forma de huevo
Imagen con efecto de forma de huevo

La segunda clase (forma2), crea una imagen con distintos radios de esquina con la imagen dentro:

Imagen con efecto de forma con distintos radios de esquina
Imagen con efecto de forma con distintos radios de esquina


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *