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.