Criando estilos css para imagens

A frase "uma imagem vale por mil palavras" é um clichê que perdurou com razão. As imagens são uma forma extraordinária de representar uma informação que um texto não consegue, e é por isso que imagens em sites é uma união perfeita.

Deste tutorial criaremos um estilo css com bordas e padding para estilizar o estado hover da imagem.

Nosso HTML ficará desta forma:

img src="imagem.jpg" width="200" height="133" alt="Imagem"
Em seguida criaremos uma regra css do tipo class para aplicar na imagem como o exemplo abaixo:

.foto {
background-color: #DDBB73;
padding: 15px;
border: 3px groove #853824;
}
.foto:hover {
background-color: #8D3D26;
}

Depois de criada as regras aplicamos na imagem:

img src="imagem.jpg" alt="Imagem" width="200" height="133" class="foto"

Ao final nossa imagem ficará com uma moldura com preenchimento e quando passarmos o mouse em cima o fundo mudará a cor, também:


Brinque a vontade com as imagens... elas forem feitas para deixarem as coisas mais belas, por isso use e abuse...

Comentários

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Adição e subtração de paths no Photoshop CS4