04/01/2013

Tutorial: Efeito Round

||

Yo meus amores, como vão? Hoje ta um frio gostoso aqui no RJ rsrs que da ate preguiça de postar, então decidi fazer uns tutoriais que são mais fáceis para mim e uteis para vocês. Desta vez trago o efeito Round, eu o encontrei em um blog mas como pedi o endereço colocarei créditos para o KW. Preview Aqui.
Vá até seu HTML e procure por ]]></b:skin>. Acima desta tag, cole o seguinte código:

.efeitoround  {
background: #CORDOFUNDO;
border: 5px solid #CORDABORDA;
display: inline-block;
font: 20px 'Chela One', cursive;
width: 50px;
height: 40px;
color: #CORDAFONTE;
padding-top: 10px;
margin: 5px;
-webkit-border-radius: 50px;
-webkit-transition: 1s linear;
}
.efeitoround:hover {
background: #e7a6c0;
-webkit-box-shadow: inset 0px 60px 10px #CORDOFUNDOHOVER;
border-radius: 0px;
color: #ffffff;
text-decoration: none;
-webkit-border-radius: 50px;
-webkit-transition: 1s linear;
}

Arrume as partes em negrito, como se pede e então salve. Siga ate seu Layout e em um gadget de HTML/JavaScript, cole o seguinte código:

<a href="LINK" class="efeitoround" title="NOME INTEIRO DO BLOG">SIGLA DO BLOG</a>

Se quiser adicionar uma fonte diferente como eu coloquei, basta usar este tutorial. E então a onde esta escrito font: 20px 'Chela One', cursive; você coloca o nome da fonte que você escolheu.

2 comentários:

  1. Eu adorei esse tuto,foi muito útil para mim,estou usando no meu blog,obrigada!
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram