Um tutorial para começar o blog: efeitos de bordas para imagens

Olá olá, pessoalzinho! Sejam bem-vindos ao Bárbara Não Tem Nome, um bloguizinho de coisas variadas, ou seja, totalmente pessoal, informal, e descompromissado (/^▽^)/ ～♪  Você provavelmente ficou tentando entender o sentido do nome do blog, eu suponho. Eu expliquei o motivo lá na página de About, então se você for uma pessoa curiosa, só ir lá dar uma fuxicadinha.

Eu particularmente não sou muito fã de criar toda uma postagem de boas vindas e apresentações como primeiro post por motivos de: preguiça de escrever mil abobrinhas e dar voltas e voltas e não chegar em lugar nenhum (já faço isso muito bem nas redações do Enem, hehehe). Então pensei que trazer um tutorial daorinha com uma utilidade bonitinha para os vossos blogs fosse ser muitíssimo mais interessante, e é claro, produtivo. Vamos lá? (✿◡‿  ◡)

Efeito Two Borders-Two Colors

Eu encontrei esse efeito no tumblr há alguns anos (chuto uns dois anos), e salvei em uns templates que tenho espalhados por aqui no computador. Infelizmente eu não tenho ideia de quem o criou para poder creditar, então se você souber, agradeceria se pudesse me dizer ^^. Basicamente, como você vê no gif acima, ele consiste em duas bordas que se encontram no meio de imagem, e em hover elas somem, ficando uma borda simples, ligeiramente distante da imagem.

Código:

.efeitotbtc{
box-shadow:inset 255px 0px 1px #CorDaBordaDaEsquerda,inset -255px 0px 1px #CorDaBordaDaDireita;
background:transparent:
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.9s ease-out;
transition: all 0.9s ease-out;
border:1px solid #CorDaBordaVisivelEmHover;
margin-bottom: -0px;
margin-left: -10px;
padding: 3px;
width: auto;
height: auto;
}
.efeitotbtc:hover{
box-shadow:inset 0 0px 0px #BEBEBE;
}

O segredo desse efeito é este: box-shadow:inset 255px 0px 1px #CorDaBordaDaEsquerda,inset -255px 0px 1px #CorDaBordaDaDireita;. O padding presente no código vai criar um espaçamento na imagem, e o código box-shadow vai cumprir a função de um código para bordas comuns — sendo que, na verdade, ele funciona como um background. Mas graças ao padding, ele funciona aqui como uma linda bordinha.

Como vocês podem ver, o box-shadow tem duas edições: a inset com número positivo corresponde a borda esquerda, e a inset com o número negativo corresponde a borda direita. O número 255, corresponde ao tamanho que cada borda irá ocupar na imagem com efeito. Ou seja, cada um vai ocupar metade da imagem. Esses números são os recomendados para uma imagem de 500 pixels. "Mas por que está 255, se a metade de 500 é 250?" Porque se você colocar o número exato da metade do tamanho da imagem, as bordas não ficaram do jeito certo. Vai ficar faltando borda para conseguir o efeito desejado. Então eu aconselho a colocar sempre a metade do tamanho da imagem + 3 a 5 pixels para ficar tudo ok.

Coloquei os códigos width e height para o caso de vocês desejarem colocar um tamanho fixo pelo html mesmo, e assim não ter que, por exemplo, editar as imagens que desejam utilizar nos posts no photoshop pra ficar do tamanho certo. Elas estão com o código auto, ou seja, não vai mudar em nada, a imagem vai ficar com seu tamanho original.

Por último, há um código de bordas, o border:1px solid #CorDaBordaVisivelEmHover;. Quando a imagem com o efeito estiver em hover, essa borda será a única vísivel. Somada ao padding, ela é aquela bordinha levemente distante da imagem, que eu pessoalmente acho um charme só!  ♡

Para inserir o efeito da imagem, copie e cole aonde deseja usar: <img class="efeitotbtc" src="url da imagem"/>.

Efeito Sepija

clique para ver melhor as bordinhas.

Esse efeito eu que criei. É basicamente uma borda com o mesmo princípio do efeito anterior — padding + box shadow. — só que com um efeito sépia e bordinha colorida. Ele é bem simples de se editar, e se você entendeu o código anterior, esse aqui é de fácil compreensão também.

.efeitosepija{
box-shadow:inset 0 1px 4px #b68686, 0 0 40px #b68686 inset;
background:transparent;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.9s ease-out;
transition: all 0.9s ease-out;
border:1px solid #b68686;
margin-bottom: -0px;
margin-left: -10px;
padding: 5px;
width: auto;
height: auto;
}
.efeitosepija:hover{
border:1px solid #e6e1d3;
box-shadow:inset 0 1px 4px #e6e1d3, 0 0 40px #e6e1d3 inset;
-webkit-filter: sepia(30%);
}

O que faz a imagem ficar com o efeito sépia é esse código aqui: -webkit-filter: sepia(30%);. Se você quiser um efeito mais acentuado, basta aumentar o valor dentro dos parênteses. Eu coloquei em 30% pois caso fique em valores altos, a imagem fica com um brilho que eu acho bastante brilhoso. Aconselho utilizar valores baixos para não causar desconforto.

Para inserir o efeito da imagem, copie e cole aonde deseja usar: <img class="efeitosepija" src="url da imagem"/>.

Efeito Pallina

imagens do blog rain cookie.

E por último, um efeito muito amorzinho ♡ Eu chamo de Pallina pois de acordo com o google tradutor (-q), pallina significa bolinha em italiano. E em hover, esse efeito tem uma bordinha com bolinhas em cima da imagem. Segue abaixo o código dele e de como personaliza-lo.

.efeitopallina {
border: 4px double #cecece;
outline: solid 1px #cecece;
outline-offset: -1px;
border-radius:2px;
padding: 2px;
opacity:1.0;
padding: 1px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
margin: 0 5px 0 5px; /* margem da direita e esquerda, não altere */
}
.efeitopallina:hover {
border: 4px double #4d8e82;
outline: dotted 1px #4d8e82;
outline-offset: -10px;
padding: 1;
opacity:0.6;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

Os códigos outline: solid 1px #cecece; e outline-offset: -1px; não é vísivel normalmente, pois está configurado para ficar sobreposto a uma das linhas da borda em double. No entanto, ele é necessário estar ali para o efeito em hover funcionar. O margin: 0 5px 0 5px; serve para que, como no exemplo, as imagens quando postas lado a lado não fiquem coladas umas nas outras. Você pode aumentar ou diminuir a distância entre as imagens conforme você desejar alterando os números que estão com 5px.

Em hover, a bordinha com o efeito dotted — as bolinhas. — são vísiveis graças ao outline-offset: -10px;. Ele altera a distância da borda, e em negativo as bordas ficam mais para "dentro" da imagem. Altere esses números da maneira que lhe convier ^^

Para inserir o efeito da imagem, copie e cole aonde deseja usar: <img class="efeitopallina" src="url da imagem"/>.

Pois é, pessoal, vou ficando por aqui. Espero que tenham gostado dos efeitos que eu trouxe, são os meus favoritos que tenho guardadinho aqui no computador. Se usar, credite, por favorzinho. Qualquer dúvida, pode me perguntar nos comentários, será um prazer ajudar! 

Até a próxima. Beijos (っ˘з(˘⌣˘ ) ♡