Estilando imagens em CSS

Quando se trata de melhorar a beleza do web design, geralmente pensamos em adicionar imagens ao nosso site. No entanto, apenas adicionar imagens não é suficiente, portanto, você precisa estilizá -las de várias maneiras para torná -las mais atraentes. O CSS fornece muitas propriedades que você pode usar para adicionar estilo às imagens.

Este post ilumina como estilizar imagens no CSS. Neste guia, você passará pelo seguinte:

1. Como fazer imagens circulantes
2. Como fazer imagens de canto arredondadas
3. Como fazer imagens responsivas
4. Como centralizar imagens
5. Como fazer imagens transparentes
6. Como colocar texto em imagens
7. Como adicionar filtro às imagens
8. Como fazer sobreposição de pairar nas imagens
9. Como girar imagens

Vamos começar.

Como fazer imagens circulantes

Com o objetivo de fazer com que suas imagens apareçam como círculos, use a propriedade CSS Border-Radius. Abaixo, apresentamos a você um exemplo de imagem circular.

Html

Aqui simplesmente adicionamos uma imagem no atributo src da tag.

CSS

img
Radio de fronteira: 50%;
Largura: 200px;
Altura: 200px;

Definindo o rádio da fronteira para 50%, estamos tornando a imagem um círculo. Você pode alterar o valor se desejar torná -lo um oval ou menos arredondado.

Saída

A imagem foi circulada com sucesso.

Como fazer imagens de canto arredondadas

A propriedade CSS Border-Radius também pode ser usada para tornar o canto das imagens arredondadas, eis como você faz isso.

CSS

img
Radio de fronteira: 10px;
Largura: 200px;
Altura: 200px;

Aqui estamos dando o valor do radiato de fronteira em pixels para tornar os cantos arredondados.

Saída

Os cantos da imagem foram arredondados.

Como fazer imagens responsivas

Imagens que são responsivas Ajusta seu tamanho de acordo com a janela do navegador. O exemplo abaixo mencionado demonstra como fazer isso.

Html

No código acima, simplesmente adicionamos uma imagem.

CSS

img
MAX-LUDA: 100%;
Altura: Auto;

Para tornar a imagem responsiva, defina a largura máxima para 100% e a altura como automático.

Saída

A imagem está mudando sua largura de acordo com o tamanho da janela do navegador.

Como centralizar imagens

Para colocar uma imagem no centro, exiba-a como um elemento em nível de bloco e defina suas margens para automaticamente. Considere o exemplo abaixo.

CSS

img
exibição: bloco;
margem-esquerda: automático;
Margem-direita: Auto;
Largura: 300px;

Para centralizar uma imagem, estamos simplesmente exibindo-a como um elemento em nível de bloco e definindo suas margens direita e esquerda para automaticamente.

Saída

A imagem foi alinhada central.

Como fazer imagens transparentes

Se você deseja tornar suas imagens transparentes, use a propriedade CSS Opacity. Quanto menor o valor da propriedade da opacidade, mais a transparência da imagem.

CSS

img
Opacidade: 0.3;
Largura: 300px;

No código acima, a opacidade da imagem foi definida como 0.3.

Saída

A imagem foi feita transparente com sucesso.

Como colocar texto em imagens

Use a propriedade CSS Position para colocar texto em determinadas posições nas imagens. As várias posições que você pode colocar o texto na imagem são as seguintes.

1. Em cima esquerdo
2. Inferior esquerdo
3. Centro
4. Canto superior direito
5. Canto inferior direito

Aqui demonstramos com a ajuda de um exemplo.

Html

Esta é a Torre Eiffel

No código acima, criamos um contêiner de div e colocamos a imagem e outro contêiner div dentro dele.

CSS

.div
Posição: relativa;

.Topleft
Posição: Absoluto;
topo: 5px;
Esquerda: 5px;
Size da fonte: 20px;
estilo de fonte: itálico;

img
Largura: 400px;
Opacidade: 0.5;

A primeira div recebeu uma posição relativa para que a segunda div que prenda o texto possa ser colocada dentro dela. Usando a classe Topleft, estamos atribuindo à Segunda Div uma posição absoluta e dando -lhe algum comprimento de cima e esquerda, além disso, dando a certos tamanho e estilo da fonte ao texto.

Saída

O texto foi adicionado na imagem na posição superior esquerda.

Como adicionar filtros às imagens

Com o objetivo de adicionar filtro a imagens como borracha ou saturação, use a propriedade do filtro. Consulte o exemplo abaixo:

CSS

img
Largura: 300px;

.Inverter
filtro: inverter (100%);

Aqui estamos usando o método invert () na propriedade Filter para adicionar efeitos visuais à imagem.

Saída

Os efeitos visuais foram adicionados com sucesso à imagem.

Alguns outros métodos que você pode usar na propriedade Filter para adicionar vários efeitos visuais são:

• borrão(),
• contraste(),
• brilho(),
• Escala de cinza (),
• saturar(),
• opacidade (), etc.

Como girar imagens

Virar uma imagem quando o usuário traz o mouse por cima, pode ser uma coisa interessante a se fazer. Para fazer isso, use a propriedade CSS Transform.

CSS

IMG: Hover
Transformar: Scaley (-1);
Largura: 300px;

Aqui estamos lançando a imagem ao longo do eixo y usando o método scaley () de transformar propriedade.

Saída

A imagem foi invertida pelo eixo y.

Conclusão

Estilizar imagens que aparecem no seu site é altamente importante e isso pode ser feito usando várias propriedades CSS. Várias coisas que você pode fazer para estilizar suas imagens é que as tornam um círculo, tornam seus cantos arredondados ou tornam -os uma miniatura. Além disso, você pode tornar suas imagens responsivas ou adicionar texto ou certos efeitos visuais sobre elas. Neste post, mostramos muitas maneiras pelas quais você pode estilizar suas imagens usando CSS, juntamente com exemplos relevantes.