clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

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. Anônimo1/5/13

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

    ResponderExcluir