Como raramente escrevo alguma coisa relacionada a CSS resolvi publicar esse post reproduzindo o artigo publicado pelo site Six Revisions onde é listado 30 tecnicas e exemplos do uso do CSS. A maioria é muito interessate outras não muito recomendadas mas de qualquer forma sempre se aprende alguma coisa com elas.

Selecionei 12 dos 30 exemplos publicados, pois alguns links não estavam funcionando e outros não achei muito interessantes. Mas quem se interessar, pode ver a lista completa aqui.

1. Hoverbox Image Gallery
Galeria de fotos em CSS. Ao passar o ponteiro do mouse, a imagem “aumenta”.



2. Advanced CSS Menu
Esquema de navegação. É o mesmo que utilizo nos menus do meu site.



3. Sliding Photograph Galleries
Efeito “acordeon” sobre as imagens.



4. Drop shadow em imagem
Exemplo de efeito de sombra sob imagem baseado em “CSS Drop shadows“.



5. CSS Photo Zoom
Uso de uma única imagem e ajuste do atributo background-position.



6. Sticky Footer
Rodapé fixo.



7. Pushbutton Links
Links estilizados como botões sem uso de imagem.



8. Content Overlay with CSS
Ao passar o cursor do mouse sobre a imagem é mostrada uma nova div com um novo conteúdo.



9. A CSS styled table version 2
Tabela em CSS muito bem estilizada usando a semantica e imagens de background.



10. PNG Overlay
Mais um exemplo de como adicionar efeitos como bordas e sobras em imagens.



11. Showing Hyperlink Cues with CSS
Como adicionar icones diferentes a diferentes tipos de links



12. Sitemap Celebration
Uma ótima solução para exibir sitemap.



13. Curved corners 2
Divs com cantos arredondados.



14. Creating a graph using percentage background images
Itens usando porcentagem com imagens.



15. CSS Bar Graphs: Examples
3 exemplos de graficos em barras.



16. A CSS-based Form Template
Exemplos de formulários acessiveis.



17. CSS Gradient Text Effect
Use imagens sobrepostas para criar efeitos de degrade no seu texto.



Via: Six Revisions