Exemplo 1
Exemplo 2
CSS
O código CSS, é o que comanda o efeito, é importante deixar entre o <style> </style>, e a hashtag + a sequência de 6 números, #F781F3 é a cor do efeito.
<style>
.link-rosa a {font-weight: 500;perspective: 600px;perspective-origin: 50% 100%;transition: color 0.3s;}.link-rosa a:hover,.link-rosa a:focus {color: #fff;}.link-rosa a::before,.link-rosa a::after {position: absolute;width: 100%;height: 100%;top: 0;left: -4px;z-index: -1;box-sizing: content-box;padding: 0 4px;content: '';}.link-rosa a::before {background-color: #F781F3;transition: transform 0.2s;transition-timing-function: cubic-bezier(0.7,0,0.3,1);transform: rotateX(90deg);transform-origin: 50% 100%;}.link-rosa a:hover::before,.link-rosa a:focus::before {transform: rotateX(0deg);}.link-rosa a::after {border-bottom: 2px solid transparent;}
</style>
HTML
<section class="link-rosa">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #7f6000;">
Esse espaço, é para escrever redação, matéria, história ou até mesmo um tutorial detalhado, é sempre importante destacar alguma palavra em especial, e até redirecionar para para o assunto em pauta.
</span>
<a href="http://en.wikipedia.org/wiki/Field_gun"><span style="color: white;">PALAVRA EM DESTAQUE</span></a>
<span style="color: #7f6000;">
O ID link-rosa acima, dentro do section class, é o ID que será identificado pelo código CSS, cada cor terá o seu ID diferente.
</span>
<a href="http://manualnarede.blogspot.com.br/2015/03/grafico-de-cores-html.html">
<span style="color: white;">PALAVRA EM DESTAQUE</span></a>
<span style="color: #7f6000;">
Terminando de editar o código HTML, caso deseja alterar a cor, é só escolher no painél e fazer as alterações.
</span>
<br />
</section>
E para completar, coloque esse link abaixo do <head> do seu Editor Html do blogger
<link href='https://googledrive.com/host/0B1tpOE0JPK2obGpObHFQOHQwRTQ' rel='stylesheet' type='text/css'/>
|
|
|
|
|
|
Vamos para o outro modelo ?
|
|
|
|
|
|
