Neste artigo, eu juntei 30 Excelentes técnicas CSS e exemplos de design Isso mostra as capacidades e a robustez do CSS. Você verá uma variedade de técnicas, como galerias de imagens, sombras solteiras, botões escaláveis, menus e muito mais – todos Usando apenas CSS e HTML. Clicar no título direcionará você para a documentação/tutorial, enquanto clica na imagem que o acompanha o direcionará para a página de demonstração se for separada da documentação.
1. Galeria de imagens Hoverbox
Uma galeria pura baseada em CSS; Passando sobre uma imagem o amplia. 
2. Menu CSS avançado
Um esquema de navegação criativo e complexo. 
3. Galerias de fotografias deslizantes
Um efeito de acordeão; Passando sobre uma imagem o expande. 
4 slides de caixa de luz
Parte de um artigo intitulado “SuperCharge Your Image Borders” mostrando como você pode usar os estilos CSS para projetar imagens parecem mais interessantes. 
5. Drop Shadow em uma imagem
Uma demonstração e discussão de efeito de imagem com base em um artigo de uma lista, intitulado “CSS Drop Shadows“. 
6. Galeria de fotografia de várias páginas do navegador cruzado
O mouse sobre as guias altera a categoria, enquanto o mouse sobre uma imagem o amplia. 
7. Zoom de foto CSS
Usa uma única imagem e ajuste do background-position atributo. 
8. Layout da galeria CSS – Smells como uma mesa
Imita um layout de tabela, mas usa listas. A galeria também tem largura de fluido. 
9. Footeiro pegajoso
Um rodapé estático com muito pouco XHTML necessário. 
10. Seja como for: Passe o mouse
Um menu de navegação que imita o menu Iniciar da janela. 
11. Efeito de acordeão somente CSS
Um efeito de acordeão usando DIV e :hover; O efeito do acordeão pode ser vertical ou horizontal. 
12. Botões CSS escaláveis usando PNG e cores de fundo
Uma técnica que aborda a escala vertical, o uso de muitas imagens e a falta de um efeito de pairar. 
13. Links de botão
Links que são estilizados para parecer botões sem usar imagens. 
14. Tabela rolável com cabeçalho fixo
As legendas da mesa ficam paradas, o que é excelente para mesas longas. 
15. Sobreposição de conteúdo com CSS
Quando você passa o mouse sobre a imagem, a div contêiner é mostrada com mais texto. 
16. Uma tabela de estilo CSS versão 2
Uma mesa lindamente estilizada com marcação semântica-usa uma imagem de fundo. 
17. Sobreposição de PNG
Outra maneira de adicionar flare às imagens (arredonde os cantos e adiciona uma borda e uma sombra de soltar) para criar uma imagem ainda mais eficaz. 
18. mostrando pistas de hiperlink com CSS
Tutorial simples sobre como adicionar ícones a diferentes tipos de links. 
19. Caixas CSS de canto arredondadas simples
Usa apenas uma imagem e muito poucas linhas de código e marcação. 
20. Celebração do sitemap
Navegação semelhante a uma árvore usando listas aninhadas, ótimas para páginas do sitemap. 
21. Fácil transparência de navegador transversal
Técnica de opacidade sem o uso de JavaScript (mas com o custo do uso de código XHTML não valido). 
22. Cantos curvos 2
Largura do fluido e altura divs com cantos arredondados. 
23. Criando um gráfico usando imagens percentuais de fundo
Liste itens
24. CSS Bar Graphs: Exemplos
Exemplos de gráficos de 3 barras – “Gráfico básico de barra CSS”, “Gráfico complexo de barras CSS” e “gráfico vertical de barras CSS” usando tags de DIV e listas de definição. 
25. Arrow de rolagem animada
A seta segue toda a largura da barra de navegação sem problemas, sem o uso de JavaScript ou GIF animado. 
26. Um modelo de formulário baseado em CSS
Mostra um formulário da web acessível. 
27. CSS Image Text Wrap
Usando divisos de espaçador vazio, o texto da página imita um efeito de embalagem em torno da imagem em segundo plano. 
28. Antes de seus olhos-uma imagem de desbotamento
Uma demonstração usando opacidade e uma única imagem que desaparece gradualmente para cobrir o texto. 
29. Pop-ups CSS puros
Uma técnica pop-up que funciona mesmo no IE 5 Mac. 
30. Efeito de texto do gradiente CSS
Usa sobreposições de imagem em segundo plano e tag de span de vazão, e position: absolute Para criar um efeito de gradiente no texto. 
FAQ
1. Como criar uma galeria de imagens com efeito Hoverbox?
Para criar uma galeria de imagens com efeito Hoverbox, você pode seguir o tutorial disponível no artigo e utilizar apenas CSS e HTML para implementar essa técnica.
2. Como criar um menu CSS avançado?
Para criar um menu CSS avançado, você pode consultar o esquema de navegação criativo e complexo disponível no artigo e seguir as instruções para implementar essa técnica em seu projeto.
3. Como criar uma galeria de fotografias deslizantes com efeito de acordeão?
Para criar uma galeria de fotografias deslizantes com efeito de acordeão, você pode seguir o tutorial disponível no artigo e utilizar o CSS para expandir as imagens ao passar o mouse sobre elas.
4. Como adicionar drop shadow em uma imagem usando CSS?
Para adicionar drop shadow em uma imagem utilizando CSS, você pode seguir a demonstração e discussão disponíveis no artigo e aplicar as propriedades CSS necessárias para criar esse efeito visual.
5. Como criar um layout de galeria CSS com largura fluida?
Para criar um layout de galeria CSS com largura fluida, você pode se inspirar no exemplo disponível no artigo que imita um layout de tabela, mas utiliza listas e CSS para criar um design responsivo e fluído.
