Saiba como estilo de imagens usando CSS.
Imagens arredondados
Use o border-radius propriedade para criar imagens arredondados:
Imagens em miniatura
Use a border propriedade para criar imagens em miniatura.
Imagem em miniatura:
Exemplo
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > Tente você mesmo " Imagem em miniatura como Link:
Exemplo
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 > Tente você mesmo " Imagens Responsive
imagens Responsive irá ajustar automaticamente para se ajustar ao tamanho da tela.
Redimensionar a janela do navegador para ver o efeito:
Se você quer uma imagem de reduzir, se tiver de, mas nunca escalar até ser maior do que seu tamanho original, adicione o seguinte:
Dica: Leia mais sobre Web Design Responsive em nosso CSS RWD Tutorial .
imagem do texto
Como posicionar o texto em uma imagem:
Exemplo
Tente você mesmo:
Top Left » Top Right» Inferior Esquerda » inferior direito» Centrado »Polaroid Imagens / Cartões
A língua do Troll em Hardanger, Noruega
Luzes do Norte da Noruega
Exemplo
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;
} Tente você mesmo " filtros de imagem
O CSS filter propriedade adiciona efeitos visuais (como borrão e saturação) para um elemento.
Nota: A propriedade filtro não é suportada no Internet Explorer, Borda 12, ou Safari 5.1 e versões anteriores.
Exemplo
Alterar a cor de todas as imagens para (100% de cinza) a preto e branco:
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}Dica: Vá para o nosso CSS filtros de referência para saber mais sobre filtros CSS.
Galeria de Imagens Responsive
CSS pode ser usado para criar galerias de imagens. Este exemplo usa consultas de mídia para re-organizar as imagens em diferentes tamanhos de tela. Redimensionar a janela do navegador para ver o efeito:
Exemplo
.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%;
}
} Tente você mesmo " Dica: Leia mais sobre Web Design Responsive em nosso CSS RWD Tutorial .
Imagem Modal (Avançado)
Este é um exemplo para demonstrar como CSS e JavaScript podem trabalhar juntos.
Primeiro, use CSS para criar uma janela modal (caixa de diálogo), e escondê-lo por padrão.
Em seguida, usar um JavaScript para mostrar a janela modal e para exibir a imagem dentro do modal, quando um usuário clica na imagem:
Exemplo
// 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";
} Tente você mesmo "