Estilizando imagens
Neste tópico, vamos descobrir como deixar as imagens em uma página web ainda mais bonitas e atraentes. Assim como ao vestir uma roupa nova, podemos adicionar estilos especiais às imagens para torná-las únicas!
Tamanho e Alinhamento
Assim como uma imagem precisa se encaixar perfeitamente em uma moldura, podemos definir o tamanho e o alinhamento das imagens em nossa página.
Podemos ajustar a largura e a altura da imagem para que ela se encaixe harmoniosamente no conteúdo. Além disso, podemos alinhar as imagens à esquerda, à direita ou ao centro, dependendo da nossa preferência.
Exemplo de código:
img {
width: 300px;
height: 200px;
display: block;
margin: 0 auto;
}
Borda e Sombreamento
Assim como uma foto emoldurada em uma parede, podemos adicionar bordas às imagens para destacá-las. Podemos escolher a cor, a espessura e o estilo da borda, como pontilhada ou sólida.
Além disso, podemos adicionar um efeito de sombreamento para criar profundidade e realce.
Exemplo de código:
img {
border: 2px solid black;
box-shadow: 3px 3px 5px gray;
}
Efeitos de Rotação e Transparência
Assim como um mágico que faz truques com suas mãos, podemos aplicar efeitos de rotação e transparência às imagens.
Podemos girar a imagem em um ângulo desejado, criando um efeito dinâmico. Além disso, podemos ajustar a transparência da imagem para que ela se misture suavemente com o fundo.
Exemplo de código:
img {
transform: rotate(30deg);
opacity: 0.8;
}
Agora que você dominou a arte de estilizar imagens, é hora de dar uma atenção especial às suas listas. No próximo tópico, vamos explorar diferentes técnicas para estilizar listas usando CSS.
