HTML/CSS -Como fazer uma “etiqueta” para seu site ou blog

Etiqueta no website/blog

Há alguns dias estava teclando com o Bruno Palermo (um amigo  game designer) sobre algo que fosse simples de implementar (apenas com HTML/CSS) e  ao mesmo tempo desse um efeito bonito nas páginas, então ele teve a idéia das “etiquetas”. A coisa é tão simples que você se pergunta como não pensou nisso antes. O segredo está em deixar uma imagem fixa na lateral com um z-index alto para que se sobreponha sobre todo o conteúdo do site. Como o meu logo (também idéia do Bruno) que fica aqui na lateral direita do blog. Bora lá…

No CSS:

#etiqueta {    
position: fixed;    
top: 250px;    
width: 40px;/*largura na imagem*/    
z-index: 100;    
right: 2px;}

No HTML
<p>
<br />
<div id="etiqueta">
<img alt="" title="" src="endereco da sua imagem"/>
</div>
<br />
</p>

Não é fácil?
Eu coloque imediatamente após a tag, mas não faz diferença pois o z-index mais alto que todo o conteúdo garante que ele não interfira com nada (claro que você deve garantir que ele não fique em cima de textos etc)
Até a próxima…

Foi útil? Divulgue.Tweet about this on TwitterShare on FacebookShare on Google+Email this to someone