Aprender cómo el estilo de imágenes usando CSS.
Imágenes redondeadas
Utilice la border-radius propiedad para crear imágenes redondeadas:
Las imágenes en miniatura
Utilice la border propiedad para crear imágenes en miniatura.
Imagen en miniatura:
Ejemplo
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > Inténtalo tú mismo " Imagen en miniatura Enlace:
Ejemplo
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0
0 2px 1px rgba
(0, 140, 186, 0.5);
}
< a href="paris.jpg" >
< img src="paris.jpg" alt="Paris" >
< /a > Inténtalo tú mismo " Imágenes de respuesta
Responsive imágenes se ajustará automáticamente para adaptarse al tamaño de la pantalla.
Cambiar el tamaño de la ventana del navegador para ver el efecto:
Si quieres una imagen para escalar hacia abajo si tiene que hacerlo, pero nunca escalar hasta ser más grande que su tamaño original, añada lo siguiente:
Consejo: Pueden leer más sobre al diseño web en nuestro CSS Tutorial RWD .
imagen del texto
Cómo colocar texto en una imagen:
Ejemplo
Inténtalo tú mismo:
Arriba a la izquierda » Arriba a la derecha» Abajo a la izquierda » Abajo a la derecha» »CentradoPolaroid Imágenes / Tarjetas
La lengua del Troll en Hardanger, Noruega
Luces del Norte en Noruega
Ejemplo
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,
0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
} Inténtalo tú mismo " filtros de imagen
El CSS filter establecimiento tiene efectos visuales (como la falta de definición y saturación) a un elemento.
Nota: La propiedad de filtro no es compatible con Internet Explorer, Edge 12, o Safari 5.1 y versiones anteriores.
Ejemplo
Cambiar el color de todas las imágenes en blanco y negro (100% de gris):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}Consejo: ir a nuestro filtro de CSS de referencia para aprender más acerca de los filtros CSS.
Galería de imágenes sensible
CSS se puede utilizar para crear galerías de imágenes. En este ejemplo se utilizan las consultas de medios para volver a organizar las imágenes en diferentes tamaños de pantalla. Cambiar el tamaño de la ventana del navegador para ver el efecto:
Ejemplo
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and
(max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px
0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
} Inténtalo tú mismo " Consejo: Pueden leer más sobre al diseño web en nuestro CSS Tutorial RWD .
Imagen modal (Avanzado)
Este es un ejemplo para demostrar cómo CSS y JavaScript pueden trabajar juntos.
En primer lugar, utilizar CSS para crear una ventana modal (cuadro de diálogo), y ocultarlo de forma predeterminada.
A continuación, utilice un JavaScript para mostrar la ventana modal y para mostrar la imagen en el interior del modal, cuando un usuario hace clic en la imagen:
Ejemplo
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick =
function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} Inténtalo tú mismo "