Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/marcelabomfim/cssehfoda

Lista de links fodas sobre css
https://github.com/marcelabomfim/cssehfoda

List: cssehfoda

awesome-list css

Last synced: 25 days ago
JSON representation

Lista de links fodas sobre css

Awesome Lists containing this project

README 

        
# CSSEHFODA



> 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...



``` css

.CSSEHFODA:after {

    content: 'pra caralho!';

}

```



## Índice



- [Artigos](#artigos)

- [Vídeos](#vídeos)

- [Livros](#livros)

- [Tutoriais](#tutoriais)

- [Desafios](#desafios)

- [Jogos](#jogos)

- [Pens e Inspirações](#pens-e-inspirações)

- [Frameworks](#frameworks)

- [Pré-processadores](#pré-processadores)

- [Metodologias e Arquiteturas](#metodologias-e-arquiteturas)

- [Novidades](#novidades)

- [Ferramentas](#ferramentas)



## Artigos



> Artigos sobre CSS que valem a pena a leitura



#### 2017



 - [CSS EH FODA](https://marcelabomfim.github.io/blog/CSS-EH-FODA/) por [Marcela Bomfim](https://twitter.com/cecelabomfim)

 - [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)

 - [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/)



#### 2016



- [Falando sobre RSCSS](https://willianjusten.com.br/falando-sobre-rscss/) por [Willian Justen](https://github.com/willianjusten)



#### 2015



- [Alguns seletores css importantes para aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) por [Willian Justen](https://github.com/willianjusten)



- [8 Rules to Improve Your CSS](https://www.netguru.co/blog/8-rules-improve-css) por [Mateusz Czajka](https://github.com/czajkovsky)



#### 2011



 - [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)



[⇧ voltar](#indice)



## Vídeos



> Vídeos tutoriais, talks, entrevistas ...



#### 2017



 - [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)

 - [Raphael Fabeni - CSS Tips](https://youtu.be/Y7NvSAhbXlc) duração: `48m24s`

 - [Diogo Moretti - CSS {Grid} Layout: It's evolution baby](https://youtu.be/94aYg5D8N0s) duração: `40m24s`

#### 2014



- [Raphael Fabeni - Os Paranauês do CSS3](https://www.youtube.com/watch?v=udV_GD5QNsI)



#### 2012



- [Bernard De Luna - Performance em CSS](https://www.youtube.com/watch?v=m1iV2C44Duc)



[⇧ voltar](#indice)



## Podcasts

> Podcasts, episódios específicos, entrevistas ...



#### 2016



- [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).



#### 2014



 - [Hack ‘n’ Cast – HTML & CSS](https://imasters.com.br/front-end/html/hack-n-cast-html-css/?trace=1519021197&source=single) - duração `1h03m07s`



[⇧ voltar](#indice)



## Livros



> Pra quem gosta de ler sobre assuntos técnicos também



- [CSS Guidelines](https://cssguidelin.es/)

- [Transforms In CSS: Revamp The Way You Design](http://www.oreilly.com/free/transforms-in-css.csp)

- [Enduring CSS](http://ecss.io/)

- [CSS3 Succinctly](https://www.syncfusion.com/resources/techportal/details/ebooks/css3)

- [Learn CSS Layout. The Pedantic Way](http://book.mixu.net/css/index.html)

- [The Magic Of CSS](http://adamschwartz.co/magic-of-css/)

- [A Pocket Guide To CSS Animations](http://cssanimationspocketguide.com/)

- [Scalable And Modular Architecture For CSS](https://smacss.com/)



[⇧ voltar](#indice)



## Tutoriais



> Aprenda e pratique CSS da melhor maneira



- [Flexbox do jeito certo](https://gustavoquinalha.github.io/flexbox/)

- [Um mundo de possibilidades com flexbox](https://gustavoquinalha.github.io/um-mundo-de-possibilidades-com-flexbox/)

- [O maravilhoso mundo do CSS](https://gustavoquinalha.github.io/o-maravilhoso-mundo-do-css/)

- [As funcionalidades CSS para shapes, clipping e masking](http://maujor.com/tutorial/css-shapes-clipping-and-masking.php)

- [Mastering the :nth-child](http://nthmaster.com/)

- [Aprenda Layout com CSS](http://pt-br.learnlayout.com/)

- [O fodástico :not()](https://www.felipefialho.com/blog/2016/css-o-fodastico-not)



[⇧ voltar](#indice)



## Desafios



> Aprenda e pratique CSS da melhor maneira



 - [100dayscss](https://100dayscss.com/)

 - [Daily CSS Images](http://dailycssimages.com/)

 - [Enjoy CSS](http://enjoycss.com/)



[⇧ voltar](#indice)



## Jogos



> Aprenda e pratique CSS da melhor maneira



 - [CSS Dinner](https://flukeout.github.io/)

 - [Flexbox Froggy](http://flexboxfroggy.com/)

 - [Flexbox Defense](http://www.flexboxdefense.com/)

 - [Grid Garden](http://cssgridgarden.com/)

 - [Flexplorer](http://bennettfeely.com/flexplorer/)



[⇧ voltar](#indice)



## Pens e Inspirações



> Quando você olha e pensa: "Como essa pessoa fez isso?"



 - [Bandeira do Brasil com CSS](https://codepen.io/BritoMari/pen/rzeyZG) por [Mariana Brito](https://twitter.com/briitomari)

 - [Bart Simpson in pure css](https://codepen.io/flopreynat/pen/ntmsv) por [Flo Preynat](https://codepen.io/flopreynat/)

 - [Gato com CSS](https://codepen.io/BritoMari/pen/veeLJL) por [Mariana Brito](https://twitter.com/briitomari)

 - [Cat Swinging on String](https://codepen.io/davidkpiano/pen/Xempjq) por [David Khourshid](https://codepen.io/davidkpiano/)

 - [Meshi the CSS Dog](https://codepen.io/davidkpiano/pen/kkpGWj) por [David Khourshid](https://codepen.io/davidkpiano/)

 - [X-Men](https://codepen.io/rspilhaus/pen/LWZYOp) por [Ryan Spilhaus](https://codepen.io/rspilhaus/)

 - [Batman vs Twitter](https://codepen.io/BritoMari/full/MEzZWm) por [Mariana Brito](https://twitter.com/briitomari)

 - [Pure CSS Animated Eric Cartman](http://alinebastos.github.io/css-eric-cartman/) por [Aline Bastos](https://twitter.com/AlineBastos)

 - [StarWars BB-8 CSS Illustration + Animation](https://codepen.io/devtips/pen/xZdJaE/) por [Dev Tips](https://codepen.io/devtips/)

 - [Duck Hunt](http://zofiakorcz.pl/DuckHunt/) por [Zosia Korcz](http://zofiakorcz.pl/case-study-duck-hunt)



## Frameworks



> Para facilitar no seu desenvolvimento



 - [Bootstrap](http://getbootstrap.com/) - The most popular HTML, CSS, and JS framework.

 - [Zurb Foundation](https://foundation.zurb.com/) - The most advanced responsive front-end framework in the world.

 - [Bulma](https://bulma.io/) - A modern CSS framework based on Flexbox.

 - [Pure.css](http://purecss.io/) - A set of small, responsive CSS modules that you can use in every web project.

 - [Materialize](http://materializecss.com/) - A modern responsive front-end framework based on Material Design

 - [Semantic UI](https://semantic-ui.com/) - A UI component framework based around useful principles from natural language.



[⇧ voltar](#indice)



## Pré-processadores



> Mais produtividade para você



 - [Sass](https://github.com/sass/sass) - Mature, stable, and powerful professional grade CSS extension language.

 - [LESS](https://github.com/less/less.js) - Backwards compatible with CSS and the extra features it adds use existing CSS syntax.

 - [PostCSS](https://github.com/postcss/postcss) - Transforming CSS with JS plugins.

 - [Stylus](http://stylus-lang.com/) - EXPRESSIVE, DYNAMIC, ROBUST CSS



[⇧ voltar](#indice)



## Metodologias e Arquiteturas



> Como você organiza o seu CSS ?



 - [BEM](https://en.bem.info/)

 - [ITCSS](https://itcss.io/)

 - [RSCSS](http://rscss.io/) - [(ptbr)](https://silvamateus.gitbooks.io/rscss/content/)

 - [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/)

 - [CSS Sustentável](http://csssustentavel.com.br)



[⇧ voltar](#indice)



## Guidelines



> Como seguir um padrão no CSS ?



 - [Airbnb](https://github.com/airbnb/css)

 - [Cssguidelines](https://cssguidelin.es/)

 - [CSS-TRICKS](https://css-tricks.com/css-style-guides/)

 - [Wordpress](https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/)

 - [Google](https://google.github.io/styleguide/htmlcssguide.html)

 - [Sass Guideline](https://sass-guidelin.es/pt/)

 - [Codeguide](http://codeguide.co/)



[⇧ voltar](#indice)



## Novidades



> Twitter, newsletter, blogs... Saiba como ficar por dentro das novidades sobre CSS



 - [CSS Animation Weekly](https://cssanimation.rocks/weekly/) - Newsletter semanal com animações em CSS



[⇧ voltar](#indice)



## Ferramentas



> Conteúdo que auxilia a criação dos seus estilos



 - [Animista](http://animista.net) - Animações sob demanda

 - [Clippy](https://bennettfeely.com/clippy/) - Gere valores para serem usados na propriedade clip-path



[⇧ voltar](#indice)



---



## Colaboradores



[@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ê!*



**Sinta-se livre para participar! Abra uma issue ou envie um Pull Request.**