Imágenes de estilo en CSS

Cuando se trata de mejorar la belleza del diseño web, a menudo pensamos en agregar imágenes a nuestro sitio web. Sin embargo, solo agregar imágenes no es suficiente, por lo tanto, debe diseñarlas de varias maneras para que se vean más atractivas. CSS proporciona muchas propiedades que puede usar para agregar estilo a las imágenes.

Esta publicación ilumina cómo diseñar imágenes en CSS. En esta guía, pasarás por lo siguiente:

1. Cómo hacer imágenes en círculo
2. Cómo hacer imágenes de esquina redondeadas
3. Cómo hacer imágenes receptivas
4. Cómo centrar las imágenes
5. Cómo hacer imágenes transparentes
6. Cómo colocar el texto en las imágenes
7. Cómo agregar filtro a las imágenes
8. Cómo hacer que la superposición se superponga en las imágenes
9. Cómo voltear imágenes

Empecemos.

Cómo hacer imágenes en círculo

Con el fin de hacer que sus imágenes aparezcan como círculos, use la propiedad CSS Border-Radius. A continuación le hemos presentado un ejemplo de una imagen con círculo.

Html

Aquí simplemente hemos agregado una imagen en el atributo SRC de la etiqueta.

CSS

img
Radio fronterizo: 50%;
Ancho: 200px;
Altura: 200px;

Establecer el radio fronterizo en 50% estamos haciendo que la imagen sea un círculo. Puede cambiar el valor si desea que sea un óvalo o menos redondeado.

Producción

La imagen fue rodeada con éxito.

Cómo hacer imágenes de esquina redondeadas

La propiedad de Border-Radius de CSS también se puede usar para hacer la esquina de las imágenes redondeadas, así es como lo haces.

CSS

img
Border-Radius: 10px;
Ancho: 200px;
Altura: 200px;

Aquí estamos dando el valor del radio fronterizo en píxeles para hacer que las esquinas redondeen.

Producción

Las esquinas de la imagen han sido redondeadas.

Cómo hacer imágenes receptivas

Las imágenes que responden ajustan su tamaño de acuerdo con la ventana del navegador. El ejemplo a continuación se demuestra cómo hacerlo.

Html

En el código anterior, simplemente hemos agregado una imagen.

CSS

img
Máxido: 100%;
Altura: Auto;

Para que la imagen responda, configure el ancho máximo en 100% y la altura en automóvil.

Producción

La imagen está cambiando su ancho de acuerdo con el tamaño de la ventana del navegador.

Cómo centrar las imágenes

Para colocar una imagen en el centro, exhibirla como un elemento de nivel de bloque y establecer sus márgenes en Auto. Considere el ejemplo a continuación.

CSS

img
bloqueo de pantalla;
margen-izquierda: auto;
margen-derecha: auto;
Ancho: 300px;

Para centrar una imagen, simplemente la estamos mostrando como un elemento a nivel de bloque y configurando sus márgenes derecho e izquierdo en auto.

Producción

La imagen ha sido alineada en el centro.

Cómo hacer imágenes transparentes

Si desea que sus imágenes sean transparentes, use la propiedad de opacidad CSS. Cuanto menor es el valor de la propiedad de opacidad, más es la transparencia de la imagen.

CSS

img
Opacidad: 0.3;
Ancho: 300px;

En el código anterior, la opacidad de la imagen se estableció en 0.3.

Producción

La imagen se hizo transparente con éxito.

Cómo colocar el texto en las imágenes

Use la propiedad de posición CSS para colocar texto en ciertas posiciones en las imágenes. Las diversas posiciones que puede colocar el texto en la imagen son las siguientes.

1. Arriba a la izquierda
2. Abajo a la izquierda
3. Centro
4. Parte superior derecha
5. Abajo a la derecha

Aquí hemos demostrado con la ayuda de un ejemplo.

Html

Esta es la torre de Eiffel

En el código anterior, hemos creado un contenedor Div y colocamos la imagen y otro contenedor Div dentro de él.

CSS

.div
Posición: relativo;

.arriba a la izquierda
Posición: Absoluto;
Arriba: 5px;
Izquierda: 5px;
tamaño de fuente: 20px;
estilo de fuente: cursiva;

img
Ancho: 400px;
Opacidad: 0.5;

El primer div se le ha dado una posición relativa para que el segundo div que contenga el texto se pueda colocar dentro de él. Usando la clase Topleft, estamos asignando al Segundo Div una posición absoluta y dándole cierta longitud desde la parte superior e izquierda, además, dando cierto tamaño y estilo de fuente al texto.

Producción

El texto se ha agregado en la imagen en la posición superior izquierda.

Cómo agregar filtros a las imágenes

Con el fin de agregar filtro a imágenes como el ruido o la saturación, use la propiedad del filtro. Consulte el ejemplo a continuación:

CSS

img
Ancho: 300px;

.invertir
Filtro: invertir (100%);

Aquí estamos utilizando el método invert () en la propiedad del filtro para agregar efectos visuales a la imagen.

Producción

Los efectos visuales se agregaron con éxito a la imagen.

Algunos otros métodos que puede usar en la propiedad del filtro para agregar varios efectos visuales son:

• difuminar(),
• contraste(),
• brillo(),
• escala de grises (),
• saturar(),
• opacidad (), etc.

Cómo voltear imágenes

Voltear una imagen cuando el usuario trae el mouse puede ser algo interesante para hacer. Para hacer esto, use la propiedad de transformación CSS.

CSS

img: hover
transformar: scaley (-1);
Ancho: 300px;

Aquí estamos volteando la imagen a lo largo del eje y utilizando el método scale () de la propiedad de transformación.

Producción

La imagen fue volteada por el eje Y.

Conclusión

Las imágenes de estilo que aparecen en su sitio web son muy importantes y esto se puede hacer utilizando varias propiedades CSS. Múltiples cosas que puede hacer para diseñar sus imágenes es que las convierte en un círculo, hacen que sus esquinas redondeen o las conviertan en una miniatura. Además, puede hacer que sus imágenes respondan, o agregar texto o ciertos efectos visuales en ellas. En esta publicación, hemos mostrado muchas formas en que puede diseñar sus imágenes con CSS, junto con ejemplos relevantes.