Muitas pessoas usam CSS para ajustar o texto, alterando a fonte, a cor, o tamanho e muito mais. Mas uma coisa que muitas pessoas esquecem é que você também pode usar CSS com imagens.
Mudando a própria imagem
CSS permite que você ajuste como a imagem é exibida na página. Isso pode ser muito útil para manter suas páginas consistentes. Ao definir estilos em todas as imagens, você cria uma aparência padrão para suas imagens. Algumas das coisas que você pode fazer:
- Adicione uma borda ou contorno ao redor das imagens
- Remova a borda colorida ao redor das imagens vinculadas
- Ajustando a largura e / ou altura das imagens
- Adicionar uma sombra projetada
- Gire a imagem
- Mudar os estilos quando a imagem é pairada sobre
Fornecer uma borda à sua imagem é um ótimo lugar para começar. Mas você deve considerar mais do que apenas a borda - pense em toda a borda de sua imagem e ajuste as margens e preenchimento também. Uma imagem com uma borda preta fina parece boa, mas adicionar algum preenchimento entre a borda e a imagem pode ficar ainda melhor.
É uma boa ideia sempre vincule imagens não decorativas, quando possivel. Mas, ao fazer isso, lembre-se de que a maioria dos navegadores adiciona uma borda colorida ao redor da imagem. Mesmo se você usar o código acima para alterar a borda, o link o substituirá, a menos que você remova ou altere a borda do link também. Para fazer isso, você deve usar uma regra CSS filho para remover ou alterar a borda em torno das imagens vinculadas:
Você também pode usar CSS para alterar ou definir a altura e a largura de suas imagens. Embora não seja uma boa ideia usar o navegador para ajustar os tamanhos das imagens devido às velocidades de download, eles estão ficando muito melhores no redimensionamento de imagens para que ainda tenham uma boa aparência. E com CSS você pode definir todas as suas imagens com largura ou altura padrão ou até mesmo definir as dimensões em relação ao contêiner.
Lembre-se de que, ao redimensionar imagens, para obter melhores resultados, você deve redimensionar apenas uma dimensão - a altura ou a largura. Isso garantirá que a imagem mantenha sua proporção e, portanto, não pareça estranha. Defina o outro valor para auto ou deixe-o de fora para informar ao navegador para manter a proporção da imagem consistente.
CSS3 oferece uma solução para este problema com as novas propriedades ajuste ao objeto e posição do objeto. Com essas propriedades, você poderá definir a altura e largura exatas da imagem e como a proporção da imagem deve ser tratada. Isso pode criar efeitos de letterbox em torno de suas imagens ou recorte para fazer com que a imagem se ajuste ao tamanho necessário.
Existem outras propriedades CSS3 que são bem suportadas na maioria dos navegadores que você também pode usar para modificar suas imagens. Coisas como sombras projetadas, cantos arredondados e transformações para girar, inclinar ou mover suas imagens funcionam agora na maioria dos navegadores modernos. Você pode então usar as transições CSS para fazer as imagens mudarem ao passar o mouse, clicar ou logo após um período de tempo.
Usando imagens como planos de fundo
O CSS facilita a criação de fundos sofisticados com suas imagens. Você pode adicionar fundos a toda a página ou apenas para um elemento específico. É fácil criar uma imagem de fundo na página com o imagem de fundo propriedade:
Mudar o corpo seletor para um elemento específico na página para colocar o plano de fundo em apenas um elemento.
Outra coisa divertida que você pode fazer com as imagens é criar uma imagem de fundo que não role com o resto da página - como uma marca d'água. Você acabou de usar o estilo anexo de fundo: fixo; junto com sua imagem de fundo. Outras opções para seus planos de fundo incluem colocá-los lado a lado apenas horizontalmente ou verticalmente usando o fundo de repetição propriedade. Escreva repetição de fundo: repetição-x; para colocar a imagem lado a lado horizontalmente e background-repeat: repeat-y; para lado a lado verticalmente. E você pode posicionar sua imagem de fundo com o posição de fundo propriedade.
E o CSS3 também adiciona mais estilos para seus planos de fundo. Você pode esticar suas imagens para caber em qualquer tamanho de fundo ou definir a imagem de fundo para se ajustar ao tamanho da janela. Você pode alterar a posição e, em seguida, cortar a imagem de fundo. Mas uma das melhores coisas sobre o CSS3 é que agora você pode sobrepor várias imagens de fundo para criar efeitos ainda mais complexos.
HTML5 ajuda a estilizar imagens
O FIGURA elemento em HTML5 deve ser colocado em torno de qualquer imagem que possa ficar sozinha no documento. Uma maneira de pensar sobre isso é se a imagem pudesse aparecer em um apêndice, então deveria estar dentro do FIGURA elemento. Você pode então usar esse elemento e o FIGCAPTION elemento para adicionar estilos às suas imagens.