Efeito Css3 - Texto Refletido

Boa noite õ/

Trouxe este tutorial por que ele é bem legal, antes eu pensava que só poderia refletir textos com Photoshop, Photofiltre e outros editores, mais não, que aprender ?

Então vamos !

Acima de ]]></b:skin> cole o código abaixo

.oi{font-family:'cap'; font-size:54px; text-shadow:0 0 0 1px #03C;-webkit-box-reflect:below -25px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(white));}
@font-face {font-family: "cap";src: url('http://static.tumblr.com/5dbytsa/kBbmdi6s2/capsuula.ttf'); format("truetype"); }

E para poder usa-lo é só usar o código abaixo:

<div class="oi">Conteúdo</div> 

Não é fácil ? 

Créditos: ♥♥♥

Efeito Css3 - CoolShadow

Novo layout está quase pronto e adivinha quem é a Diva da vez, tchã tchã tchã tchãa

Olá galerinha, desculpa pela falta de posts da minha parte, é que eu fui viajar acabei caindo e machuquei a perna, ai não deu para mim fazer nenhum post, fiquei três dias sem sair de casa.
Então hoje eu trago para vocês um efeito bem legal, eu achei ele lá no CH, vocês podem visualizar o efeito aqui.
Olharam ? Gostaram ?
Então vamos ao tutorial :)

Efeito Css3 - Sipt

Olá Galerinha, olha eu aqui de novo.

Dessa vez trouxe um tutorial bem legal, e é útil para ser usado no gadget Equipe.
Usei a base do efeito Four Sides do Great Help e criei ele.

Visualizem aqui.

Agora procure por ]]></b:skin>

E acima dela cole o seguinte código, alterando os lugares marcados.

#spit{
display: inline-block;
margin-left: 15px;
background-image: url('http://static.tumblr.com/sxeyvs3/7F5mf87po/1.png'),  url('http://static.tumblr.com/sxeyvs3/34bmf87q1/2.png'), url('http://25.media.tumblr.com/fdf4a1e6de6ad20af51276ce03f82019/tumblr_mf53u8DPTn1rxdy7io1_250.png');
background-repeat: no-repeat; background-position: 0px; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;
background-position: -100px 0px, 100px 0px, 0px 0px;
}
#spit:hover {background-position: -100px 200px, 100px -200px, 0px 0px;
-webkit-transform: rotate(360deg);
}
.hover{border-radius: 100px;height: 200px; width: 200px;}

Agora para você poder usá-lo, adicione o código abaixo em um gadget Javascript/HTML.

<div id="spit" class="hover"></div>

Pronto, Beijos ;*

Efeito CSS3 - Foursides

Essse tutorial é muito legal, é la do Great Help.
Ele se divide em 4 e muda a imagem, espero que vocês gostem :)

 Visualizem o efeito aqui: ••••

#twist{ background-image: url('LINK DA IMAGEM QUE COBRE'), url('http://static.tumblr.com/5dbytsa/Rf8mej57q/fundo2.png'), url('LINK DA IMAGEM QUE COBRE'), url('LINK DA IMAGEM QUE COBRE'), url('Imagem no hover'); background-repeat: no-repeat; background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px; -webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg); -o-transform:rotate(-90deg);-ms-transform:rotate(-90deg); transform:rotate(-90deg); -webkit-transition: background-position .6s ease-in-out, -webkit-transform .3s ease;-moz-transition: background-position .6s ease-in-out, -moz-transform .3s ease; -o-transition: background-position .6s ease-in-out, -o-transform .3s ease;-ms-transition: background-position .6s ease-in-out, -ms-transform .3s ease;transition: background-position .6s ease-in-out, transform .3s ease;} #twist:hover {background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);} .hover{border-radius: 103030px;height: 200px; width: 200px;}

Para usa-lo use o código abaixo:

<div id="twist" class="hover"></div>

 Prontinho, Beijos ;*