{"id":83803,"url":"https://github.com/marcelabomfim/cssehfoda","name":"cssehfoda","description":"Lista de links fodas sobre css","projects_count":73,"last_synced_at":"2026-08-28T11:00:25.242Z","repository":{"id":78841708,"uuid":"106311994","full_name":"marcelabomfim/CSSEHFODA","owner":"marcelabomfim","description":"Lista de links fodas sobre css","archived":false,"fork":false,"pushed_at":"2022-07-22T03:13:57.000Z","size":60,"stargazers_count":42,"open_issues_count":1,"forks_count":18,"subscribers_count":5,"default_branch":"master","last_synced_at":"2026-08-09T02:40:36.796Z","etag":null,"topics":["awesome-list","css"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcelabomfim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-10-09T17:09:58.000Z","updated_at":"2025-06-05T08:04:44.000Z","dependencies_parsed_at":"2023-04-16T03:14:57.826Z","dependency_job_id":null,"html_url":"https://github.com/marcelabomfim/CSSEHFODA","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marcelabomfim/CSSEHFODA","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelabomfim%2FCSSEHFODA","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelabomfim%2FCSSEHFODA/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelabomfim%2FCSSEHFODA/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelabomfim%2FCSSEHFODA/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcelabomfim","download_url":"https://codeload.github.com/marcelabomfim/CSSEHFODA/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelabomfim%2FCSSEHFODA/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36955094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-22T15:14:58.755Z","status":"online","status_checked_at":"2026-08-28T02:00:06.244Z","response_time":114,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2025-01-27T05:28:46.395Z","updated_at":"2026-08-28T11:00:25.242Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Frameworks","Livros","Guidelines","Metodologias e Arquiteturas","Jogos","Ferramentas","Desafios","Pré-processadores","Artigos","Vídeos","Podcasts","Tutoriais","Pens e Inspirações","Colaboradores","Novidades"],"sub_categories":[],"readme":"# CSSEHFODA\n\n\u003e Depois de um [post no meu blog](https://marcelabomfim.github.io/blog/CSS-EH-FODA), falando um pouco sobre a minha relação com CSS e como ele me faz brilhar os olhinhos, resolvi criar esse repositório para guardar links fodas de CSS, como outros posts, dicas, frameworks, tutoriais e outras coisas legais...\n\n``` css\n.CSSEHFODA:after {\n    content: 'pra caralho!';\n}\n```\n\n## Índice\n\n\u003cdetails\u003e\n\n\u003c!-- toc --\u003e\n\n- [Artigos](#artigos)\n- [Vídeos](#vídeos)\n- [Livros](#livros)\n- [Tutoriais](#tutoriais)\n- [Desafios](#desafios)\n- [Jogos](#jogos)\n- [Pens e Inspirações](#pens-e-inspirações)\n- [Frameworks](#frameworks)\n- [Pré-processadores](#pré-processadores)\n- [Metodologias e Arquiteturas](#metodologias-e-arquiteturas)\n- [Novidades](#novidades)\n- [Ferramentas](#ferramentas)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## Artigos\n\n\u003e Artigos sobre CSS que valem a pena a leitura\n\n#### 2017\n\n - [CSS EH FODA](https://marcelabomfim.github.io/blog/CSS-EH-FODA/) por [Marcela Bomfim](https://twitter.com/cecelabomfim)\n - [How to create fancy revealing animations with these simple CSS tricks - Hackernoon](https://hackernoon.com/how-to-create-fancy-revealing-animations-with-these-simple-css-tricks-5b34614ae69a) - [pen inspirado no artigo](https://codepen.io/mibsbalsante/pen/VzgJjJ)\n - [15 Useful CSS Tricks You Might Have Overlooked](http://www.hongkiat.com/blog/useful-css-tricks-you-might-have-overlooked/) por [Preethi Ranjit](http://www.hongkiat.com/blog/author/preethi/)\n\n#### 2016\n\n- [Falando sobre RSCSS](https://willianjusten.com.br/falando-sobre-rscss/) por [Willian Justen](https://github.com/willianjusten)\n\n#### 2015\n\n- [Alguns seletores css importantes para aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) por [Willian Justen](https://github.com/willianjusten)\n\n- [8 Rules to Improve Your CSS](https://www.netguru.co/blog/8-rules-improve-css) por [Mateusz Czajka](https://github.com/czajkovsky)\n\n#### 2011\n\n - [Os 30 Seletores CSS Que Você Deve Memorizar](https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048) por [Jeffrey Way](https://twitter.com/jeffrey_way) - traduzido por [Erick Patrick](https://twitter.com/erickpatrick)\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Vídeos\n\n\u003e Vídeos tutoriais, talks, entrevistas ...\n\n#### 2017\n\n - [Hangout: Acelerando o tempo com CSS Grid Layout](https://www.youtube.com/watch?v=37DyAAdRiPs) duração: `1h07m05s` por [Simone Amorim](https://twitter.com/samorim02)\n - [Raphael Fabeni - CSS Tips](https://youtu.be/Y7NvSAhbXlc) duração: `48m24s`\n - [Diogo Moretti - CSS {Grid} Layout: It's evolution baby](https://youtu.be/94aYg5D8N0s) duração: `40m24s`\n#### 2014\n\n- [Raphael Fabeni - Os Paranauês do CSS3](https://www.youtube.com/watch?v=udV_GD5QNsI)\n\n\n#### 2012\n\n- [Bernard De Luna - Performance em CSS](https://www.youtube.com/watch?v=m1iV2C44Duc)\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Podcasts\n\u003e Podcasts, episódios específicos, entrevistas ...\n\n#### 2016\n\n- [CSS: Cansei de Ser Simples – Hipsters #09](https://hipsters.tech/css-cansei-de-ser-simples-hipsters-09/?submit=Ver) - duração `49m` por - [Hipsters ponto Tech](https://hipsters.tech/), com [Diego Eis](https://twitter.com/diegoeis) e [Sergio Lopes](https://twitter.com/sergio_caelum).\n\n#### 2014\n\n - [Hack ‘n’ Cast – HTML \u0026 CSS](https://imasters.com.br/front-end/html/hack-n-cast-html-css/?trace=1519021197\u0026source=single) - duração `1h03m07s`\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Livros\n\n\u003e Pra quem gosta de ler sobre assuntos técnicos também\n\n- [CSS Guidelines](https://cssguidelin.es/)\n- [Transforms In CSS: Revamp The Way You Design](http://www.oreilly.com/free/transforms-in-css.csp)\n- [Enduring CSS](http://ecss.io/)\n- [CSS3 Succinctly](https://www.syncfusion.com/resources/techportal/details/ebooks/css3)\n- [Learn CSS Layout. The Pedantic Way](http://book.mixu.net/css/index.html)\n- [The Magic Of CSS](http://adamschwartz.co/magic-of-css/)\n- [A Pocket Guide To CSS Animations](http://cssanimationspocketguide.com/)\n- [Scalable And Modular Architecture For CSS](https://smacss.com/)\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Tutoriais\n\n\u003e Aprenda e pratique CSS da melhor maneira\n\n- [Flexbox do jeito certo](https://gustavoquinalha.github.io/flexbox/)\n- [Um mundo de possibilidades com flexbox](https://gustavoquinalha.github.io/um-mundo-de-possibilidades-com-flexbox/)\n- [O maravilhoso mundo do CSS](https://gustavoquinalha.github.io/o-maravilhoso-mundo-do-css/)\n- [As funcionalidades CSS para shapes, clipping e masking](http://maujor.com/tutorial/css-shapes-clipping-and-masking.php)\n- [Mastering the :nth-child](http://nthmaster.com/)\n- [Aprenda Layout com CSS](http://pt-br.learnlayout.com/)\n- [O fodástico :not()](https://www.felipefialho.com/blog/2016/css-o-fodastico-not)\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Desafios\n\n\u003e Aprenda e pratique CSS da melhor maneira\n\n - [100dayscss](https://100dayscss.com/)\n - [Daily CSS Images](http://dailycssimages.com/)\n - [Enjoy CSS](http://enjoycss.com/)\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Jogos\n\n\u003e Aprenda e pratique CSS da melhor maneira\n\n - [CSS Dinner](https://flukeout.github.io/)\n - [Flexbox Froggy](http://flexboxfroggy.com/)\n - [Flexbox Defense](http://www.flexboxdefense.com/)\n - [Grid Garden](http://cssgridgarden.com/)\n - [Flexplorer](http://bennettfeely.com/flexplorer/)\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Pens e Inspirações\n\n\u003e Quando você olha e pensa: \"Como essa pessoa fez isso?\"\n\n - [Bandeira do Brasil com CSS](https://codepen.io/BritoMari/pen/rzeyZG) por [Mariana Brito](https://twitter.com/briitomari)\n - [Bart Simpson in pure css](https://codepen.io/flopreynat/pen/ntmsv) por [Flo Preynat](https://codepen.io/flopreynat/)\n - [Gato com CSS](https://codepen.io/BritoMari/pen/veeLJL) por [Mariana Brito](https://twitter.com/briitomari)\n - [Cat Swinging on String](https://codepen.io/davidkpiano/pen/Xempjq) por [David Khourshid](https://codepen.io/davidkpiano/)\n - [Meshi the CSS Dog](https://codepen.io/davidkpiano/pen/kkpGWj) por [David Khourshid](https://codepen.io/davidkpiano/)\n - [X-Men](https://codepen.io/rspilhaus/pen/LWZYOp) por [Ryan Spilhaus](https://codepen.io/rspilhaus/)\n - [Batman vs Twitter](https://codepen.io/BritoMari/full/MEzZWm) por [Mariana Brito](https://twitter.com/briitomari)\n - [Pure CSS Animated Eric Cartman](http://alinebastos.github.io/css-eric-cartman/) por [Aline Bastos](https://twitter.com/AlineBastos)\n - [StarWars BB-8 CSS Illustration + Animation](https://codepen.io/devtips/pen/xZdJaE/) por [Dev Tips](https://codepen.io/devtips/)\n - [Duck Hunt](http://zofiakorcz.pl/DuckHunt/) por [Zosia Korcz](http://zofiakorcz.pl/case-study-duck-hunt)\n\n## Frameworks\n\n\u003e Para facilitar no seu desenvolvimento\n\n - [Bootstrap](http://getbootstrap.com/) - The most popular HTML, CSS, and JS framework.\n - [Zurb Foundation](https://foundation.zurb.com/) - The most advanced responsive front-end framework in the world.\n - [Bulma](https://bulma.io/) - A modern CSS framework based on Flexbox.\n - [Pure.css](http://purecss.io/) - A set of small, responsive CSS modules that you can use in every web project.\n - [Materialize](http://materializecss.com/) - A modern responsive front-end framework based on Material Design\n - [Semantic UI](https://semantic-ui.com/) - A UI component framework based around useful principles from natural language.\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Pré-processadores\n\n\u003e Mais produtividade para você\n\n - [Sass](https://github.com/sass/sass) - Mature, stable, and powerful professional grade CSS extension language.\n - [LESS](https://github.com/less/less.js) - Backwards compatible with CSS and the extra features it adds use existing CSS syntax.\n - [PostCSS](https://github.com/postcss/postcss) - Transforming CSS with JS plugins.\n - [Stylus](http://stylus-lang.com/) - EXPRESSIVE, DYNAMIC, ROBUST CSS\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Metodologias e Arquiteturas\n\n\u003e Como você organiza o seu CSS ?\n\n - [BEM](https://en.bem.info/)\n - [ITCSS](https://itcss.io/)\n - [RSCSS](http://rscss.io/) - [(ptbr)](https://silvamateus.gitbooks.io/rscss/content/)\n - [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/)\n - [CSS Sustentável](http://csssustentavel.com.br)\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n\n## Guidelines\n\n\u003e Como seguir um padrão no CSS ?\n\n - [Airbnb](https://github.com/airbnb/css)\n - [Cssguidelines](https://cssguidelin.es/)\n - [CSS-TRICKS](https://css-tricks.com/css-style-guides/)\n - [Wordpress](https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/)\n - [Google](https://google.github.io/styleguide/htmlcssguide.html)\n - [Sass Guideline](https://sass-guidelin.es/pt/)\n - [Codeguide](http://codeguide.co/)\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Novidades\n\n\u003e Twitter, newsletter, blogs... Saiba como ficar por dentro das novidades sobre CSS\n\n - [CSS Animation Weekly](https://cssanimation.rocks/weekly/) - Newsletter semanal com animações em CSS\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n## Ferramentas\n\n\u003e Conteúdo que auxilia a criação dos seus estilos\n\n - [Animista](http://animista.net) - Animações sob demanda\n - [Clippy](https://bennettfeely.com/clippy/) - Gere valores para serem usados na propriedade clip-path\n\n\u003csub\u003e[⇧ voltar](#indice)\u003c/sub\u003e\n\n---\n\n## Colaboradores\n\n[@marcelabomfim](https://github.com/marcelabomfim), [@BritoMari](https://github.com/BritoMari), [@safirelauene](https://github.com/safirelauene), [@alinebastos](https://github.com/alinebastos), [@gustavoquinalha](https://github.com/gustavoquinalha), [@tjoaquini](https://github.com/tjoaquini), [@G4brym](https://github.com/g4brym), [@anderson-sousa](https://github.com/anderson-sousa) e *você!*\n\n**Sinta-se livre para participar! Abra uma issue ou envie um Pull Request.**\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/marcelabomfim%2Fcssehfoda/projects"}