
Post-its são aqueles pequenos papéis com um adesivo atrás para serem colados em qualquer superfície, que são geralmente usados para lembretes, quem trabalha com Internet utiliza muito isso, e hoje, vamos aprender de uma maneira muito simples a fazê-los com CSS. Primeiramente esse tutorial não foi originalmente desenvolvido por mim, essa técnica foi originalmente desenvolvida por GiorgosK.
Para esse tutorial faremos o uso de uma imagem PNG que utilizaremos como background, e de uma artimanha para fazer a transparência da imagem PNG funcionar no IE6 e menores, que um dia eu explico aqui como funciona.
HTML
<div id="postit">
<p>Post its com CSS</p>
</div>
CSS
#postit {
width:188px;
height:188px;
padding:40px;
color:#663333;
text-align:left;
background:url(postit.png) no-repeat left top;
}
Para que a imagem fique com fundo transparente no IE, crie um novo arquivo CSS com o seguinte conteúdo:
#postit { azimuth: expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}
E chame na sua página o seguinte css para browsers que sejam IE:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<![endif]-->
Não se esqueçam de salvar na mesma pasta em que salvou o CSS um gif transparente que faz com que o IE processe a transparência.
Tudo ok agora é só ver como ficou nosso post-it, bem legal para você colocar lembretes no blog.