Ribbon's na Sidebar

Yoo ~~

Estou com preguiça de pensar em algo para por na introdução,então só vou escrever isso.

Hoje trago o tutorial de como colocar ribbons na sidebar.Não sabe como fica? Vá no Kawaii World  e veja os gadgets.Neles têm uma faixinha,não?Então é isso.

1-Vá no gadget em que deseja colocar a "faixa" e cole antes de tudoo código a seguir:

<div style="position: absolute; margin-top: -13px; left: -10px;"> <img src="URL DA IMAGEM" /></div><br /><br /><br /><br />

Entendendo:

margin-top: -13px; corresponde à altura que desejas que a faixa fique,quanto maior o número que colocar,a boxside vai descer.

 left: -10px; corresponde à quanto a box vai para a esquerda,quanto maior o número,mais ela vai para a direita.

2-Para adicionar nos seguidores e no Arquivo,deixe o título,e depois,crie um novo gadget,cole o código,e vá ajustando!

Kisses

Swing Effect

Olá lindjos

How Are You?Tomara que bem misturando idiomas. Trago hoje um efeito bem legal,que encontrei lá no Gold HTML,já que não sei criar bons efeitos.

Se quer ver se vai valer a pena ver o tutorial,vá aqui.

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 ;*