Tutorial - 3 tipos de bordas hover

Olá meus queridos Candies ~ Aqui estou eu, mais uma vez, fazendo um post para vocês. Sábado fiz um post sobre uma tag que me marcaram mas fiquei me sentindo um pouco estranha, achei o post bem vazio e procurei trazer outra coisa. Acho até que ninguém chegou a ler aquele post (as visualizações foram bem baixas), mas uma vez o post publicado, ele aparece na lista de leitura, então pensei em explicar o que ocorreu. Mas claro, aquele post será publicado sim, mas em breve. Vou pensar em trazer outra coisa junto com ele, nem que seja icons. Aliás, vocês gostariam que eu começasse a postar icons aqui no SF? Se sim, de quem? Ou se preferirem, capas de facebook ou de twitter. Se caso quiserem alguma coisa, é só pedirem ♥.

Fiquei ontem um tempão tentando fazer algumas coisas no HTML. No começo do blog, disse que o SF teria posts de tutoriais mas isso raramente tem. Não é porque eu esqueço e sim porque não sei. O que eu sei de HTML é muito pouco para fazer algo inovador. Ontem, fiquei reciclando as únicas coisas exclusivas que tinha feito para fazer outras coisas. No fim, consegui fazer 3 menus bem comuns e 3 tipos de bordas. Eu não posso prometer que irei melhorar no HTML, ja que eu precisaria fazer curso. Mas eu prometo que vou tentar reciclar mais um pouco os códigos que eu criei e tentar chegar em alguma coisa. No post de hoje estarei disponibilizando 3 tipos de bordas hovers super fofas que fiz na maior "cagada" (essa palavra é feia, eu sei, mas foi exatamente o que eu fiz). Espero que gostem ~.


Borda hover 1

Colar acima de ]]></b:skin> :

.borda img{
width: 60px;
height: 60px;
margin: 1px;
padding: 3px;
border: 2px #b8dbf9 solid;
background: #98caf3;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
.borda img:hover{
border: 2px #b8dbf9 solid;
background: #98caf3;
-moz-box-shadow:inset 0px 0px 0px 5px #fff ;
-webkit-box-shadow:inset 0px 70px 0px 0px #fff ;
-o-box-shadow:inset 0px 0px 0px 5px #fff ;
-ie-box-shadow:inset 0px 0px 0px 5px #fff ;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}

E para usar, basta colocar em um gagdget HTML:

<div class="borda"><img src="imagem"/></div>

Borda hover 2

Colar acima de ]]></b:skin> :

.borda2 img{
width: 60px;
height: 60px;
margin: 1px;
padding: 3px;
border: 2px #b8dbf9 solid;
background: #98caf3;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
.borda2 img:hover{
border: 2px #b8dbf9 solid;
background: #98caf3;
-moz-box-shadow:inset 0px 0px 0px 40px #fff ;
-webkit-box-shadow:inset 0px 0px 0px 40px #fff ;
-o-box-shadow:inset 0px 0px 0px 40px #fff ;
-ie-box-shadow:inset 0px 0px 0px 40px #fff ;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}

E para usar, basta colocar em um gagdget HTML:

<div class="borda2"><img src="imagem"/></div>

Borda hover 3

Colar acima de ]]></b:skin> :

.borda3 img{
width: 60px;
height: 60px;
margin: 1px;
padding: 3px;
border: 2px #b8dbf9 solid;
background: #98caf3;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
.borda3 img:hover{
border: 2px #b8dbf9 solid;
background: #98caf3;
-moz-box-shadow:inset 0px 0px 0px 5px #fff ;
-webkit-box-shadow:inset 70px 0px 0px 0px #fff ;
-o-box-shadow:inset 0px 0px 0px 5px #fff ;
-ie-box-shadow:inset 0px 0px 0px 5px #fff ;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}

E para usar, basta colocar em um gagdget HTML:

<div class="borda3"><img src="imagem"/></div>

Caso usarem uma das três bordas, por favor, creditem. E não usem esses códigos como base para criar o código de vocês. Só com a minha permissão.

Foi esse o post de hoje minha gente. Nos vemos em breve ♥.

Chu~

12 comentários:

  1. Olá ~
    Primeiramente, este layout está mara ~
    Acho uma boa ideia trazer icons ou então favicons, são ótimos para fazer como imagens de afiliados <3 ~
    Eu também sei bem pouco sobre HTML, mas achei esses efeitos fofos e legais, usaria <3

    kissu ♥
    ♡ Buquê de Flores ♡ ~ ❀ Jardim Secreto ❀

    ResponderExcluir
    Respostas
    1. Olá ~
      Obrigada ♥
      Ok, irei trazer alguns icons e procurar alguns favicons, obrigada pela ideia ♥.
      Fico feliz que tenha gostado ♥

      Excluir
  2. Simples e muito lindo. Estou preparando um layout ai, e já anotei aqui! haha

    Voltei agora com meu blog, será que pode da uma passadinha la?

    priincemodern.blogspot.com

    ResponderExcluir
  3. Olá Gio <33 Desculpe o sumiço, você postou a tag e eu nem comentei. Já já irei ler! Seria legal que você postasse icons. Seus icons são muito bem feitinhos! As bordas são boas para serem usadas. No próximo layout do Snack Cheese, acho que irei usar as bordas. Ficará lindo <33 Obrigada por ter postado. Você está acompanhando os teaser de The Velvet de Red Velvet? Qual tua bias??

    Bye bye (^-^)//
    O Snack Cheese foi pra escola~| Clique aqui, e vá ao encontro do SC! (´ω`♡%)

    ResponderExcluir
    Respostas
    1. Olá Yuka ♥ Tudo bem, outro dia você lê e comenta (quando eu postar) ♥. Ok, irei fazer alguns icons <3. Ficarei feliz se usar uahsuhas ♥ Eu estou acompanhando sim (nessas alturas ja saiu até o MV, desculpa a demora para responder T^T). Minha bias é a Irene ♥

      Excluir
  4. Olá, Gio! ♥ Eu não curto muito fazer tags também, embora goste de ler, então sei como se sente. Enfim, eu adoraria ver icons por aqui... Que tal alguns de XiuHan (tava vendoi uns gifs no tumblr, bateu saudade) ou qualquer outros ships que você goste? *w*

    Poxa, se eu fosse "ruim" no HTML como você, estaria feliz. Haha! Adorei tanto os modelinhos de menu como os de borda, sendo o primeiro o meu favorito. <3 Continue trazendo goodies, Gio, eu adoro e você manda super bem.

    Carinhosamente, Jheni.
    [empire k.] [15 outonos] [stupide]

    ResponderExcluir
    Respostas
    1. Olá ♥ Eu gosto de fazer tag mas sempre flopa :c. Procurarei fazer então, obrigada pela dica ♥ Sou ruim com ships, não tenho muitos aushuahs, mas vou fazer sim <3.

      ushuahs ♥. Fico feliz que tenha gostado ♥ Vou procurar trazer mais coisas, isso é um pouco difícil mas vou tentar. Obrigada ♥♥.

      Excluir
  5. Olá Gio do Sugar Free! Entendo o lance da tag. Acho que seria uma ótima ideia postar icons aqui no Sugar Free, eu acho que gostaria de ver da banda: Red Velvet na época do Ice Cream Cake, porque eu adoro essa música e o clipe também. Eu acho que você é boa no HTML, tu consegue fazer códigos que eu não consigo. Tenta fazer tutoriais que envolvam tipo, borda que envolva imagem (quero dizer uma borde de imagem) sendo que por HTML. Os modelos ficaram lindos, acho que posso usa-los num layout free. Cagada? smaushauhsuahsuashausa. Eu amei esses icons da Taeyeon. Inclusive novamente digo que seria uma ótima ideia postar icons. Tu podia postar icons também da Taeyeon! Me deu vontade de comer canjica agora! Não fica muito assim dizendo que sabe pouco, que tu já sabe umas "coisinha" muito boa! Vim aqui continuar prestando meu apoio ao Sugar Free, adoro demais esse blog. Continua Gioooooooo! Irei aguardar seus posts!
    O Snack Cheese foi pra escola~| Clique aqui, e vá ao encontro do SC! (´ω`♡%)

    ResponderExcluir
    Respostas
    1. Olá Iza <3. Irei procurar fazer os icons, em breve eles aparecem no blog, obrigada pela sugestão <3. Obrigada ahsuhas. Eu gostaria de ver você usando <3. Obrigada por apoiar o Sugar Free, serio <33.

      Excluir
  6. Great post. Sugar free is good for health to be stay for healthy life. This blog giving idea about the sweetness and taste of sugar but with negligible calories. Thanks!!!

    ResponderExcluir

Obrigada por comentar, mas entenda algumas coisas:
» Por favor, comente algo sobre o assunto do post.
» Não tenho problemas com palavrões, mas seja educado.
» Aceito pedido de afiliações.
» Respeite minha opinião.