53 Técnicas de CSS que você não pode viver sem conhecer

53 Técnicas de CSS que você não pode viver sem conhecer

O CSS vem se difundindo cada vez mais entre os desenvolvedores web. Na primeira vez que aprendi, juro que pensei: “Que coisa inútil” mas hoje não consigo fazer nada na web sem utilizar CSS.

Desenvolver em CSS oferece diversas vantagens, como fazer um site completamente sem tabelas, o que já é uma boa otimização pros buscadores (SEO), e o mais importante é que separa o layout da programação e da informação do site, tornando muito mais fácil a modificação de temas e layout de uma página.

Eu sempre vejo inúmeros artigos sobre CSS, e até indico um ótimo site que inclusive, é do professor da empresa onde aprendi realmente o início do CSS e a utilizar Tableless, o site Tableless.

E como o CSS chegou para ajudar, mostro abaixo 53 técnicas de CSS muito boas e que facilitam bastante a vida de qualquer desenvolvedor. Achado no Smashing Magazine, um dos melhores sites de design que conheço.

 

1. Menu em CSS

CSS-Technique

2. Navegação Matrix Reloaded

CSS-Technique

3. Abas em CSS

CSS-Technique

4. Gráfico de Barras em CSS (CSS For Bar Graphs)

CSS-Technique

5. Tabelas que se abrem

CSS-Technique

6. Método Adams de customização de Radio e Checkbox

CSS-Technique

7. CSS Image Replacement

CSS-Technique

8. Sombras com CSS (CSS Shadows Roundup)

CSS-Technique

9. Cantos redondos em CSS (Nifty Corners)

CSS-Technique

10. Drop Cap – Letras iniciais maiores em CSS

CSS-Technique

11. Definir opacidade da imagem com CSS

CSS-Technique

12. Como criar um efeito HOVER numa lista de blocos de links

CSS-Technique

13. Citações em CSS (Citações automáticas com JavaScript e CSS)

CSS-Technique

14. Diagramas em CSS

CSS-Technique

15. Curvas com CSS

CSS-Technique

16. Footer Stick permite que o rodapé da página apareça tanto no final da janela do browser como no final do conteúdo da página.

CSS-Technique

17. CSS Image Map

CSS-Technique

18. CSS Image Pop-Up

CSS-Technique

19. CSS Image Preloader

CSS-Technique

20. CSS Image Replacement para botões

CSS-Technique

21. Thumbnail para links

CSS-Technique

22. CSS Map Pop

CSS-Technique

23. Troca de folha de estilo baseada em PHP

CSS-Technique

24. Calendário CSS com lista não ordenada (CSS Styled Calender)

CSS-Technique

25. Técnicas de formulários em CSS

CSS-Technique

26. Técnicas de tabelas em CSS:

CSS-Technique

27. Imprimindo documentos Web em CSS

CSS-Technique

28. Melhorando o design de como os links são mostrados para impressão com CSS

CSS-Technique

29. Botões Submit em CSS

CSS-Technique

30. CSS Teaser Box

CSS-Technique

31. Dicas de marcadores personalizados em CSS

CSS-Technique

32. Ticked Off Links Reloaded

CSS-Technique

33. Zoom com CSS

CSS-Technique

34. Criando uma votação com estrelas usando CSS

CSS-Technique

35. Modos de estilizar links visitados

CSS-Technique

36. Estilizando links para arquivos PDF, ZIP, DOC

CSS-Technique

37. Displaying Percentages with CSS

CSS-Technique

38. Image Floats sem moldar o texto

CSS-Technique

39. Deixe o visitante escolher se quer abrir o link em uma nova janela

CSS-Technique

40. Acessando links externos facilmente

CSS-Technique

41. Tabela zebrada com JavaScript e CSS

CSS-Technique

42. Alinhamento central com CSS (Horizontal e Vertical)CSS-Technique

43. Notas de páginas não intrusivas

CSS-Technique

44. Legenda de imagens com CSS (Styled Images com legenda)

CSS-Technique

45. Gráfico de torta dinâmico com CSS

CSS-Technique

46. Notas de rodapé  com CSS

CSS-Technique

47. Sitemaps hierárquicos com CSS

CSS-Technique

48. Snook’s Resizable Underlines

CSS-Technique

49. Switchy McLayout: Técnica de adaptação de layoutCSS-Technique

50. StyleMap: CSS+HTML Visual Sitemap

CSS-Technique

51. Tamanho personalizado de leitura

CSS-Technique

52. Mensagem de alerta em CSS

CSS-Technique

53. CSS Production Notes

CSS-Technique

Ralph Almeida
nosfer@gmail.com

UI/UX Designer e front-end developer • Campinas/SP Com formação acadêmica em TI e pós-graduado em Design Thinking Focado em design de interfaces e experiência do usuário (UI/UX), tendo trabalhado com design de aplicativos mobile (iOS e Android), grandes sites, sistemas web e aplicações desktop.

6 Comentários
  • Gabriel Novaes
    Posted at 10:52h, 15 dezembro Responder

    Maneiro esse post, um resumão de mta coisa que um dia vc ainda vai precisar.

    Parabéns

  • Alison_PC
    Posted at 11:40h, 25 janeiro Responder

    muito bom o post, realmente, mas há muitos links ai offline

  • Bardo
    Posted at 10:10h, 09 julho Responder

    Articles like these put the consumer in the driver seat—very imroptant.

  • luiz
    Posted at 13:54h, 08 outubro Responder

    nossa muito bom post

  • Osvaldo
    Posted at 06:51h, 08 novembro Responder

    Está faltando certos links. Por exemplo a dica 37 – Displaying Percentages with CSS nem sequer é um link. Mas a dica fica a critério de uma busca no google rs. Outros não apontam mais para onde esperamos. De qualquer jeito esa página valeu mito a pena. Valeu pela seleção de dicas! Estava fazendo uma tb…

  • Qaiq Alves
    Posted at 19:09h, 28 março Responder

    Tá quase tudo offline.

Postar um comentário