Saltar al contenido

Imágenes de estilo CSS

septiembre 23, 2021
paris

Aprenda a diseñar imágenes con CSS.


Imágenes redondeadas

Utilizar el border-radius propiedad para crear imágenes redondeadas:

París

París


Imágenes en miniatura

Utilizar el border propiedad para crear imágenes en miniatura.

Imagen en miniatura:

París

Ejemplo

img {
borde: 1px sólido #ddd;
radio del borde: 4px;
relleno: 5px;
ancho: 150px;
}

París

Inténtalo tú mismo »

Imagen en miniatura como enlace:

paris

Ejemplo

img {
borde: 1px sólido #ddd;
radio del borde: 4px;
relleno: 5px;
ancho: 150px;
}

img: hover {
caja de sombra: 0 0 2px 1px rgba (0, 140, 186, 0.5);
}


París

Inténtalo tú mismo »



Imágenes receptivas

Las imágenes receptivas se ajustarán automáticamente para adaptarse al tamaño de la pantalla.

Cambie el tamaño de la ventana del navegador para ver el efecto:

Cinque Terre

Si desea que una imagen se reduzca si es necesario, pero nunca se amplíe para que sea más grande que su tamaño original, agregue lo siguiente:

Propina: Obtenga más información sobre el diseño web adaptable en nuestro tutorial de CSS RWD.


Centrar una imagen

Para centrar una imagen, establezca los márgenes izquierdo y derecho en auto y conviértelo en un block elemento:

París

Ejemplo

img {
bloqueo de pantalla;
margen izquierdo: automático;
margen derecho: automático;

ancho: 50%;
}

Inténtalo tú mismo »


Imágenes / tarjetas Polaroid

Cinque Terre

Noruega

Ejemplo

div.polaroid {
ancho: 80%;
color de fondo: blanco;
caja-sombra: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

img {ancho: 100%}

div.container {
alineación de texto: centro;
relleno: 10px 20px;
}

Inténtalo tú mismo »


Imagen transparente

los opacity La propiedad puede tomar un valor de 0,0 a 1,0. Cuanto menor sea el valor, más transparente:

bosque

opacidad 0.2

bosque

opacidad 0.5

bosque

opacidad 1
(defecto)


Texto de imagen

Cómo colocar texto en una imagen:


Filtros de imagen

El CSS filter La propiedad agrega efectos visuales (como desenfoque y saturación) a un elemento.

Nota: La propiedad de filtro no es compatible con Internet Explorer o Edge 12.

Ejemplo

Cambie el color de todas las imágenes a blanco y negro (100% gris):

img {
filtro: escala de grises (100%);
}

Inténtalo tú mismo »

Propina: Vaya a nuestra Referencia de filtros CSS para obtener más información sobre los filtros CSS.


Superposición de desplazamiento de imagen

Crea un efecto de superposición al pasar el mouse:


Voltear una imagen

Mueva su mouse sobre la imagen:

París



Galería de imágenes receptiva

CSS se puede utilizar para crear galerías de imágenes. Este ejemplo utiliza consultas de medios para reorganizar las imágenes en diferentes tamaños de pantalla. Cambie el tamaño de la ventana del navegador para ver el efecto:

Cinque Terre

Agrega una descripción de la imagen aquí

bosque

Agrega una descripción de la imagen aquí

Auroras boreales

Agrega una descripción de la imagen aquí

Montañas

Agrega una descripción de la imagen aquí

Ejemplo

.responsive {

relleno: 0 6px;
flotador izquierdo;
ancho: 24,99999%;
}

@media solo pantalla y (ancho máximo: 700px) {
.responsive {

ancho: 49,99999%;
margen: 6px 0;
}
}

@media solo pantalla y (ancho máximo: 500px) {
.responsive {
ancho: 100%;
}
}

Inténtalo tú mismo »

Propina: Obtenga más información sobre el diseño web adaptable en nuestro tutorial de CSS RWD.


Imagen modal (avanzado)

Este es un ejemplo para demostrar cómo CSS y JavaScript pueden trabajar juntos.

Primero, use CSS para crear una ventana modal (cuadro de diálogo) y ocúltela de forma predeterminada.

Luego, use un JavaScript para mostrar la ventana modal y para mostrar la imagen dentro del modal, cuando un usuario hace clic en la imagen:

Aurora Boreal, Noruega

Ejemplo

// Obtener el modal
var modal = document.getElementById (‘myModal’);

// Obtenga la imagen e insértela dentro del modal – use su texto «alt» como título
var img = document.getElementById (‘myImg’);
var modalImg = document.getElementById («img01»);
var captionText = document.getElementById («título»);
img.onclick = function () {
modal.style.display = «bloque»;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Obtiene el elemento que cierra el modal
var span = document.getElementsByClassName («cerrar»)[0];

// Cuando el usuario haga clic en (x), cierre el modal
span.onclick = function () {
modal.style.display = «ninguno»;
}

Inténtalo tú mismo »

close