Aprenda a diseñar imágenes con CSS.
Imágenes redondeadas
Utilizar el border-radius propiedad para crear imágenes redondeadas:
Imágenes en miniatura
Utilizar el border propiedad para crear imágenes en miniatura.
Imagen en miniatura:
Ejemplo
img {
borde: 1px sólido #ddd;
radio del borde: 4px;
relleno: 5px;
ancho: 150px;
}
Inténtalo tú mismo »
Imagen en miniatura como enlace:
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);
}
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:
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:
Ejemplo
img {
bloqueo de pantalla;
margen izquierdo: automático;
margen derecho: automático;
ancho: 50%;
}
Inténtalo tú mismo »
Imágenes / tarjetas Polaroid
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:
opacidad 0.2
opacidad 0.5
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:
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:
Agrega una descripción de la imagen aquí
Agrega una descripción de la imagen aquí
Agrega una descripción de la imagen aquí
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:
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 »