Post-its com CSS
Postado por: Pedro Rogério em
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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Bom dia, desculpe estar fugindo do assunto em pauta, mas me deparei com um bug que eu nunca havia visto, e ele ocorre somente no bom e velho IE6.
Tirei um printscreen dao bug, esta nesse link:
http://i33.photobucket.com/albums/d52/Erro_Humano/bug.png
Se souber algo a respeito e quiser compartilhar, rodei a internet atrás de soluções e não encontrei nada semelhante.
Desde já muito obrigado pela atenção, e continue com esse site sensacional.
@Rafael,
Me mostre o link da página que esse bug nem eu entendi!!!!
AEw Rafael Feliz
Isso ae parece ser IFRAME kra, qndo uma página tem iframe, o IECA sempre dah esses lag ai oh
Boa tarde Pedro.
O arquivo transparent.gif não está abrindo.
Abraços…
@Vítor,
Agora a imagem está Ok. Abraços.
Tenta dar um clear:both depois desse elemento ou retirar o ‘float’ dos elementos, se tiver.
Estou chutando uma solução. Já aconteceu esse bug comigo, mas infelizmente não me lembro como resolvi.
Eu me deparei com um probleminha no IE, utilizando essa ideia do PNG transparente, quando tem um banner(normal ou flash), ou um link em cima de uma div que tem como background um png utilizando esse recurso de transparência o link não funciona, mas no Firefox sim … tem alguma sugestão? obrigado
@José Carlos,
Tenta colocar position:relative pra ver se funciona. Se não funcionar, tente display:inline-block. Abraços
Valew Pedrão… nunca imaginei q iria usar ou precisar disso, rs… surgiu uma necessidade de colocar em um site freela, lá vou eu utilizar esse tuto…
Abs.
Muito bom.
Muitos parabéns pelos artigos e por todo o site.
É uma ideia simples que andava a procura para um site que estou a construir…
abraço
Muito bom.
Muitos parabéns pelos artigos e por todo o site.
É uma ideia simples que andava a procura para um site que estou a construir…
abraço
estou estudando agora ciencias da computação……. parabens pelo material colocado nesse site …..abraços….