5 Propriedades do CSS que você deve saber

Existem propriedades CSS, como imagens de fundo, imagens de borda, mascaramento e propriedades de recorte, com as quais você pode adicionar diretamente imagens para páginas da web e controlar seu comportamento. No entanto, também há propriedades CSS relacionadas à imagem mencionadas com menos freqüência trabalhar em imagens adicionadas com o Tag HTML, qual a maneira preferida de adicionar imagens a páginas da web.

A descrição do trabalho dessas últimas propriedades varia de controlando a sombra da imagem para definindo a nitidez, nos ajudando a controlar melhor a aparência e a posição das imagens adicionadas ao tag. Vamos vê-los um por um.

1. Afie imagens com renderização de imagem

Quando uma imagem é aprimorada, o navegador suaviza a imagem, por isso não parece pixelizada. Mas, dependendo da resolução da imagem e da tela, isso pode não ser o melhor em todos os momentos. Você pode controlar esse comportamento do navegador com o renderização de imagem propriedade.

Esta propriedade bem suportada controla o algoritmo usado para dimensionar uma imagem. Seus dois principais valores são bordas nítidas e pixelizada.

o bordas nítidas valor mantém o contraste de cores entre os pixels. Em outras palavras, não há suavização nas imagens, o que ótimo para obras de arte pixel.

Quando pixelizada é usado, os pixels próximos de um pixel podem assuma sua aparência, fazendo parecer que juntos eles formar um grande pixel, ótimo para telas de alta resolução.

Se você continuar olhando atentamente as bordas das flores no GIF abaixo, você pode ver a diferença entre um ponto normal e um pixelizada imagem.

 img image-rendering: pixelizada;  

2. Estique as imagens com ajuste de objeto

o conter, tampa, preencher valores são todos familiares, nós os usamos para o tamanho de fundo propriedade que controla como uma imagem de plano de fundo preenche o elemento ao qual pertence. o ajuste de objeto propriedade é bastante semelhante a ela, como também determina como um tamanho de imagem dentro de seu contêiner.

o conter valor contém a imagem dentro de seu contêiner. tampa faz o mesmo, mas se a relação de aspecto da imagem e o container não corresponderem, o imagem é cortada. preencher faz com que a imagem esticar e encher seu recipiente. diminuir gradualmente escolhe a menor versão da imagem mostrar.

 
  #container width: 300px; altura: 300 px;  img largura: 100%; altura: 100%; ajuste de objeto: conter;  

3. Deslocar imagens com posição do objeto

Similarmente ao complemento posição de fundo propriedade de tamanho de fundo, há uma posição do objeto propriedade para ajuste de objeto, também.

o ajuste de objeto propriedade move uma imagem dentro de um contêiner de imagens para as coordenadas dadas. As coordenadas podem ser definidas como Unidades de comprimento absoluto, unidades de comprimento relativo, palavras-chave (topo, esquerda, Centro, inferior, e certo) ou um combinação válida deles (20px superior à direita 5px, centro direito 80px).

 
  #container width: 300px; altura: 300 px;  img largura: 100%; altura: 100%; posição do objeto: 150px 0;  

4. Situar imagens com alinhar verticalmente

Nós às vezes adicionamos (que são inline por natureza) ao lado de strings de texto para informações adicionais ou decoração. Nesse caso, alinhando o texto e a imagem na posição desejada pode ser um pouco complicado - se você não sabe qual propriedade usar.

o alinhar verticalmente propriedade é não exclusivo para células de mesa sozinho. Ele também pode alinhar um elemento inline dentro de uma caixa inline e, portanto, pode ser usado para alinhar uma imagem em uma linha de texto. É necessário um número razoável de valores que possam ser aplicados a um elemento in-line, para que você tenha muitas opções para escolher.

 
 PDF  
 

5. Imagens de sombra com filtro: drop-shadow ()

Quando usado inconspicuously em textos e caixas, as sombras podem adicionar vida a uma página da web. O mesmo é verdade para em imagens. Imagens com formas básicas e fundos transparentes pode se beneficiar do drop-shadow Filtro CSS.

Seus argumentos são semelhante aos valores das propriedades CSS relacionadas à sombra (text-shadow, Sombra da caixa). Os dois primeiros representam o distância vertical e horizontal entre as sombras e a imagem, o terceiro e o quarto são os borrão e a espalhar raio da sombra, e o último é o cor da sombra.

Assim como text-shadow, drop-shadow também cria uma sombra que é moldado ao objeto pertencente. Então, quando é aplicado a uma imagem, a sombra toma a forma da parte visível da imagem.

 img filtro: drop-shadow (0 0 5px azul);  

Leia também: Reflexão de Imagem CSS3 [Dicas CSS3]