26 de jan de 2014

Tutorial | Borda nas imagens


La la la, whatever...(ouvindo) Oi povo, vou postar um tutorial de colocar borda nas imagens, tanto da sidebar ou da postagem. Vamos:

Existe, váaaaaaaarios meios de colocar bordas ou efeitos nas imagens. Você pode colocar assim:
a img {
Ou assim:
img {
Essa parte é o css. Uma coisa que ninguem ou quase ningém sabe é que esse 'prefixo' a (ou sei lá o que, não to lembrando agora o nome correto para isso) antes de 'img' significa que o efeito so irá funcionar nas imagens que possuir links.

Eu não recomendo colocar só essa parte 'img {' ou 'a img {' no css porque fica meio chato e tal.. eles irão funcionar em qualquer imagem que esteja no seu blog (até as desnecessárias) tanto com link (a) ou sem link (apenas img). Tá.. chega, isso aqui não é uma aula de conceitos básicos de HTML/CSS.

COLOCANDO NAS IMAGENS DO POST E SIDEBAR:

Vai na parte HTML do seu blogger (Home > Modelo > Editar HTML) e cole isso na parte CSS (antes de ]]></b:skin> pode ser em qualquer lugar antes dela) dê F3 e olhe se já tem esse trecho:

.a img { ou .img {

Se tiver vamos modificar, se não tiver melhor ainda. Voltado ao efeito... depois que você achou a tag acima ( ]]></b:skin> sem esses parênteses) cole esse pequeno código:
.post a img {
border: 2px solid #eeeeee; /* cor da borda*/
background: #ffffff; /*cor do fundo*/
{
.post a:hover img {
border: 2px solid #eeeeee;/* cor da borda hover*/
background: #ffffff;/*cor do fundo hover*/
}
.sidebar a img {
border: 2px solid #eeeeee;/* cor da borda*/
background: #ffffff;/*cor do fundo*/
{
.sidebar a:hover img {
border: 2px solid #eeeeee;/* cor da borda hover*/
background: #ffffff;/*cor do fundo hover*/
}
LEGENDA:  vermelho: tamanho da borda, altere para mais caso queira uma borda mais cheia
verde: cor da borda
amarelo: cor do fundo

E você pode personalizar do jeito que você quiser...
Então.... é isso, dúvidas? comente. (não vai te alejar)

Tags: , ,

0 Responses to “Tutorial | Borda nas imagens”

Postar um comentário

Subscribe

Que tal assinar o nosso feed e ser o primeiro a receber os últimos posts daqui do blog? Deixe seu email abaixo e dê enter.

Designed by SpicyTricks Edited by Victor Alves