seen from Germany
seen from United States
seen from Vietnam
seen from United States
seen from United States
seen from United Kingdom
seen from Japan
seen from Malaysia
seen from Russia
seen from Singapore
seen from Italy
seen from France
seen from Poland
seen from France
seen from United States
seen from United States
seen from China
seen from China
seen from China
seen from Malaysia
Bg-Clip Text Effect - gradient
Galera, achei um código super legal em CSS3, que não tem suporte em todos os navegadores, então talvez não funcione em algumas versões de navegadores mais antigos. Veja o efeito clicando aqui
Gostou? E é bem simples o código.
Efeito Marquee & Rotate
Estava passeando pelos blogs da vida, quando me deparo com o http://euamohtml.blogspot.com.br e um super tutorial de um efeito bem bonitinho para usar em parcerias/afiliados. Esse nome é ela quem deu, pois foi ela quem inventou esse efeito. Clique para ver.
Legal né? E o código é bem simples:
CSS
.isa-cute-rotate{border-radius: 15px; opacity:0.6; -webkit-transition-duration: .80s;} .isa-cute-rotate:hover {opacity:1.0; -WEBKIT-TRANSFORM: ROTATE(-720DEG) SCALE(0.8); -webkit-transition-duration: .80s;}
HTML
<marquee behavior="alternate" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="3"> <a href="LINK" title="TÍTULO"><img class="isa-cute-rotate" src="IMAGEM" /></a> <a href="LINK" title="TÍTULO"><img class="isa-cute-rotate" src="IMAGEM" /></a> <a href="LINK" title="TÍTULO"><img class="isa-cute-rotate" src="IMAGEM" /></a> </marquee>
O css é só por entre as tags <style> e </style> e o HTML você põe onde quer que as imagens vão ficar passando. Você pode também por links, awards e o que mais quiser que passe ali.
Gostou? Curte ai. Usou? Credite ao euamohtml.blogspot.com.br
Efeito giro 360º
Esse efeito pode ser usado tanto em imagens, icons, quanto em links, palavras ou até textos. É recomendável que use apenas em pequenas e necessárias coisas. Exemplo é o bottom 'parceiros' que eu uso. E esse aqui:
(efeito só pode ser visualizado aqui no htmlrules)
Gostou? Simples! Basta por esse código no seu css:
.mudahr{ -webkit-transition-duration: 1.20s; width:auto;} .mudahr:hover{ -webkit-transform: rotateY(360deg); }
E agora usar esta div quando for usar:
<div class="mudahr"> imagem/frase/link </div> ou <img src="LINK-DA-IMAGEM" class="mudahr">
Enquanto que o primeiro codigo dá para qualquer tipo de material e o segundo é o mais indicado para imagem, pois ~economiza~ codigo e tamanho, o que melhora o desempenho do seu site.
Gostou? Curta e de reglog, se for util ou tiver pego!
Não compartilhe sem os créditos ao HTMLrules ;)
Efeito Gira e Aumenta
Exemplo do efeito: &&
Legal né? E é simples de fazer! Vamos lá?
Copie o css e coloonde quiser entre as tags <style> e </style>
<!--- MENU GIRA E AUMENTA POR HTMLRULES ---> #girahr { background-color: #eee; // cor do bg normal -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; width: 300px; //tamanho da caixinha } #girahr:hover { background-color: #fc3; //cor do bg de quando aumentar -webkit-transform: rotate(360deg) scale(2); -moz-transform: rotate(360deg) scale(2); -o-transform: rotate(360deg) scale(2); -ms-transform: rotate(360deg) scale(2); transform: rotate(360deg) scale(2); }
Agora o html, que também é simples. É só colar no que quiser que tenha esse efeito:
<div id="girahr"> o que quiser aqui</div>
Pronto, agora você vai ter o efeito. Você pode brincar com os valores, lembrando que todos os 'tranform' são importantes SIM, pra que faça o efeito acontecer em todos os browsers, ok?
Gostou? Dá coraçãozinho, compartilha e use :) Mas não tire os créditos!!
