#HTML - Efeito bordas (estilo moldura) [EXCLUSIVO]

Boa noite queridos ♥

Olha só quem resolveu dar as caras por aqui? Sim, a Amy!! Finalmente pude trazer um post novo para vocês, fico tão feliz por ter conseguido fazer isso >3< tenho tantas coisas para falar que ah! Já esqueci de muitas... Vou falar algumas coisas porque sim. Primeiramente: Me desculpem por trazer mais um tutorial de HTML. Sei que esse não é um blog de tutoriais de HTML e afins e sim um blog pessoal, mas eu ainda estou respondendo à algumas três, para ser exata tags que recebemos (duas delas há muito tempo atrás), portanto ia demorar um pouco lê-se: muito para sair um post, então trouxe um tutorial okay? Mas não vou me esquecer dos posts pessoais e de kpop. Mas enfim, é um tuto de umas bordas, que nem a do nosso portfólio, vou explicar melhor no post.

Agora que já me expliquei, vou agradecer à todos os comentários na postagem anterior. Muito obrigada, mesmo ♥ fico feliz que você tenham me compreendido e me apoiado ♥ ah, e já estou bem melhor da garganta ^^. E vou falar agora um pouco mais de mim, porque eu realmente quero falar algumas coisas -q Vocês viram o MV de BTS?? Eu amei ♥ Jin-oppa ganhou linhas ♥ amei <3 Ah, e ainda sobre Kpop, eu estava vendo os MVs recentes da Lim Kim e amei ♥ muito ♥ a voz dela é tão linda ♥ quero fazer uma postagem sobre ela ainda. E quando tiver tempo ainda vou fazer as postagens dos meus grupos preferidos de Kpop, leva bastante tempo para fazê-las, por isso estão bem paradas >.<

E quanto ao sorteio de layout: decidi com a ajuda da Amy do PK, agradeçam à ela viu u.u que farei sim o sorteio e as "inscrições" serão abertas amanhã, quando o blog completará 5 meses de existência <3 vou explicar como funcionará bem direitinho no post de amanhã okay? Agora vamos para o tutorial :3

Regras dos tutoriais do blog!

 Sempre que usar um tutorial credite o Lovely Milkshake, não quero saber de ver meus tutoriais sendo usados sem nenhum agradecimento ou link no layout u.u;

 Lembre-se de que os códigos que aqui postos são modelos que podem ser editados, mas mantendo os créditos viu?;

 Não copie códigos do layout do blog para fazer os seus códigos, para editar esses códigos que liberarei, porque se eu perceber isso, pararei de postar tutoriais e se ficar realmente brava até irei deixar os tutoriais em rascunho;

Tutorial: Efeito bordas (estilo moldura) - seis modelos de cores para vocês ☆

LIVE PREVIEW (´∇ﾉ｀*)ノ

Sabem o portfólio do blog? Esse é o efeito que gera as bordas nas imagens. Ele é uma versão aprimorada do que usei no portfolio. Fiz alguns modelos de cores, com o hover bem simples. As cores foram as mesmas dos menus que postei antes. Mas se você gostar e for usar, pode editar à vontade, misturar cores, etc. Espero que gostem.

1) Siga as instruções de acordo com a cor de borda que escolheu (se for usar as suas cores, pegue qualquer um e altere, deixei indicado qual código é para cada borda ^^).
2) Para usar o efeito, você deve - deve, se não não dá - colocar o código (aframe, bframe, cframe... e os outros) separado da imagem, ficando assim: <div class="aframe"><img src="URLDAIMAGEM"/></div>. O código não funcionará se o class="aframe" ficar na tag img!

Cinza

1) Procure por ]]></b:skin>

2) Acima deste código, cole a base do menu que está no código abaixo:

/*Efeito borda estilo moldura - por Lovely Milkshake*/
.aframes img{
  margin: 3px; /*distância das caixas, deixe no mínimo o 3*/
  padding: 3px; /*não altere*/
  outline: #999 solid 1px; /*primeira borda*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #bbb, 3px 3px 0 #bbb, -3px 3px 0 #bbb, 3px -3px 0 #bbb; /*altere apenas a parte da cor e todas elas, é a cor da segunda borda*/
  border: 2px #fff solid; /*cor da terceira borda*/
  background: #ccc; /*cor da quarta borda*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.aframes img:hover{
  outline: #626262 solid 1px; /*primeira borda (hover)*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #818181, 3px 3px 0 #818181, -3px 3px 0 #818181, 3px -3px 0 #818181; /*segunda borda (hover)*/
  border: 2px #fff solid; /*terceira borda (hover)*/
  background: #aaa; /*quarta borda (hover)*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

Rosa

1) Procure por ]]></b:skin>

2) Acima deste código, cole a base do menu que está no código abaixo:

/*Efeito borda estilo moldura - por Lovely Milkshake*/
.bframes img{
  margin: 3px; /*distância das caixas, deixe no mínimo o 3*/
  padding: 3px; /*não altere*/
  outline: #F1BED0 solid 1px; /*primeira borda*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #F5CDDB, 3px 3px 0 #F5CDDB, -3px 3px 0 #F5CDDB, 3px -3px 0 #F5CDDB; /*altere apenas a parte da cor e todas elas, é a cor da segunda borda*/
  border: 2px #fff solid; /*cor da terceira borda*/
  background: #F7D7E2; /*cor da quarta borda*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.bframes img:hover{
  outline: #EB9EB9 solid 1px; /*primeira borda (hover)*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #F1BED0, 3px 3px 0 #F1BED0, -3px 3px 0 #F1BED0, 3px -3px 0 #F1BED0; /*segunda borda (hover)*/
  border: 2px #fff solid; /*terceira borda (hover)*/
  background: #F4CAD9; /*quarta borda (hover)*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

Laranja

1) Procure por ]]></b:skin>

2) Acima deste código, cole a base do menu que está no código abaixo:

/*Efeito borda estilo moldura - por Lovely Milkshake*/
.cframes img{
  margin: 3px; /*distância das caixas, deixe no mínimo o 3*/
  padding: 3px; /*não altere*/
  outline: #EFBE92 solid 1px; /*primeira borda*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #F4D3B5, 3px 3px 0 #F4D3B5, -3px 3px 0 #F4D3B5, 3px -3px 0 #F4D3B5; /*altere apenas a parte da cor e todas elas, é a cor da segunda borda*/
  border: 2px #fff solid; /*cor da terceira borda*/
  background: #F9E4D2; /*cor da quarta borda*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.cframes img:hover{
  outline: #E9A669 solid 1px; /*primeira borda (hover)*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #EFBF94, 3px 3px 0 #EFBF94, -3px 3px 0 #EFBF94, 3px -3px 0 #EFBF94; /*segunda borda (hover)*/
  border: 2px #fff solid; /*terceira borda (hover)*/
  background: #F4D3B5; /*quarta borda (hover)*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

Azul

1) Procure por ]]></b:skin>

2) Acima deste código, cole a base do menu que está no código abaixo:

/*Efeito borda estilo moldura - por Lovely Milkshake*/
.dframes img{
  margin: 3px; /*distância das caixas, deixe no mínimo o 3*/
  padding: 3px; /*não altere*/
  outline: #8CC8E8 solid 1px; /*primeira borda*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #BEDFF1, 3px 3px 0 #BEDFF1, -3px 3px 0 #BEDFF1, 3px -3px 0 #BEDFF1; /*altere apenas a parte da cor e todas elas, é a cor da segunda borda*/
  border: 2px #fff solid; /*cor da terceira borda*/
  background: #DAEDF8; /*cor da quarta borda*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.dframes img:hover{
  outline: #8CC8E8 solid 1px; /*primeira borda (hover)*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #AED7EE, 3px 3px 0 #AED7EE, -3px 3px 0 #AED7EE, 3px -3px 0 #AED7EE; /*segunda borda (hover)*/
  border: 2px #fff solid; /*terceira borda (hover)*/
  background: #CDE7F5; /*quarta borda (hover)*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

Verde

1) Procure por ]]></b:skin>

2) Acima deste código, cole a base do menu que está no código abaixo:

/*Efeito borda estilo moldura - por Lovely Milkshake*/
.eframes img{
  margin: 3px; /*distância das caixas, deixe no mínimo o 3*/
  padding: 3px; /*não altere*/
  outline: #C6D694 solid 1px; /*primeira borda*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #D8E3B6, 3px 3px 0 #D8E3B6, -3px 3px 0 #D8E3B6, 3px -3px 0 #D8E3B6; /*altere apenas a parte da cor e todas elas, é a cor da segunda borda*/
  border: 2px #fff solid; /*cor da terceira borda*/
  background: #E4ECCE; /*cor da quarta borda*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.eframes img:hover{
  outline: #B4C972 solid 1px; /*primeira borda (hover)*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #CDDBA2, 3px 3px 0 #CDDBA2, -3px 3px 0 #CDDBA2, 3px -3px 0 #CDDBA2; /*segunda borda (hover)*/
  border: 2px #fff solid; /*terceira borda (hover)*/
  background: #DCE7C0; /*quarta borda (hover)*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

Lilás

1) Procure por ]]></b:skin>

2) Acima deste código, cole a base do menu que está no código abaixo:

/*Efeito borda estilo moldura - por Lovely Milkshake*/
.fframes img{
  margin: 3px; /*distância das caixas, deixe no mínimo o 3*/
  padding: 3px; /*não altere*/
  outline: #D3CAEE solid 1px; /*primeira borda*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #E3DBF9, 3px 3px 0 #E3DBF9, -3px 3px 0 #E3DBF9, 3px -3px 0 #E3DBF9; /*altere apenas a parte da cor e todas elas, é a cor da segunda borda*/
  border: 2px #fff solid; /*cor da terceira borda*/
  background: #EFEAFB; /*cor da quarta borda*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.fframes img:hover{
  outline: #B09EE0 solid 1px; /*primeira borda (hover)*/
  outline-offset: 2px; /*não altere*/
  box-shadow: -3px -3px 0 #D8CCF7, 3px 3px 0 #D8CCF7, -3px 3px 0 #D8CCF7, 3px -3px 0 #D8CCF7; /*segunda borda (hover)*/
  border: 2px #fff solid; /*terceira borda (hover)*/
  background: #E7DFF9; /*quarta borda (hover)*/
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

Esse foi o tutorial, espero que tenham gostado ♥ Digam o que acharam aqui nos comentários viu? Até amanhã queridos <3 ~vou postar amanhã mas vou falar aqui também porque sou rebelde -n Feliz Dia das Mães para todas as mães desse Universo ♥~ Ah, coisa aleatória que lembrei agora, acho que enfim descobri o significado do meu nome. Minha irmã estava vendo que o nome da Mizuno Ami, de Sailor Moon, tem o "Ami" com o mesmo kanji que o meu, e o nome dela significa: "beleza da água/do mar", e água/mar é relacionado à Mizuno, portanto, é provável que Ami/Amy seja beleza ~ui, sou bela -q~ se alguém souber algo sobre isso, me avise please~