Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/milenacarecho/30diasdecss

Desafio criar 30 mini projetos utilizando HTML e CSS em 30 dias
https://github.com/milenacarecho/30diasdecss
css css3 css3-animations css3-flexbox css3-transitions html5
Last synced: 1 day ago
JSON representation
Desafio criar 30 mini projetos utilizando HTML e CSS em 30 dias
Host: GitHub
URL: https://github.com/milenacarecho/30diasdecss
Owner: MilenaCarecho
License: mit
Created: 2020-07-13T16:57:37.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2021-07-07T23:05:50.000Z (over 3 years ago)
Last Synced: 2024-12-13T23:04:40.422Z (8 days ago)
Topics: css, css3, css3-animations, css3-flexbox, css3-transitions, html5
Language: CSS
Homepage:
Size: 16.9 MB
Stars: 2,909
Watchers: 69
Forks: 306
Open Issues: 11
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        ## 🚀 30diasDeCSS 🚀

 

 Fala Devs, beleza? 🖖

 30 dias de CSS3, é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos diarios utilizando HTML5 e CSS3 

 ## Objetivo

30 dias de CSS3 é um desafio que vou aceitar (e você também pode participar) a partir de 20 de Julho de 2020, que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de projetos 

***Se você chegou agora e quer começar o desafio, fique a vontade, o desafio não tem data de inicio fixa, cada um faz os seus 30 dias, eu ficarei honrada com sua participação 😉***

## Regras gerais

* Realizar um projeto por dia

* Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasDeCSS

* O projeto deve ser concluído até 23:59

## Regras pra mim 

Eu criei algumas regras para mim que não quero impor a ninguém, mas fique à vontade para fazer o mesmo, se quiser!

* Se eu não concluir o projeto do dia, as 5 primeiras pessoas a apontar no Twitter [@MilenaCarecho](https://twitter.com/MilenaCarecho) receberão R$5 via PicPay (total de R$25). Adicionando um pouco de motivação para mim! 😉 (Antes de solicitar qualquer coisa, verifique primeiro a hora no meu fuso horário - para mim, o fuso horário é Brasília - DF (GMT-3)) 💸

* Vou criar um artigo tutorial no [medium](https://medium.com/@MilenaCarecho) para todos os projetos 

Gostou da ideia? 

[Clique aqui](https://github.com/MilenaCarecho/30diasDeCSS/issues/1) para participar 

#### Youtube Referencias dos desafios

[Online Tutorials](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog) - 

[Creative Creations](https://www.youtube.com/channel/UCOKmVksbzoKJKmtu7rlEM1A) - 

[DarkCode](https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw)

* [Dia 01 - Ícone de mídia social em camadas](#id01)

* [Dia 02 - Loader animado](#id02)

* [Dia 03 - Mudança de cor de texto quando entra em outra div](#id03)

* [Dia 04 - Botão com efeito](#id04)

* [Dia 05 - Efeito pulsar](#id05)

* [Dia 06 - Efeito lightning text](#id06)

* [Dia 07 - Preloader animado](#id07)  

* [Dia 08 - Coração batendo](#id08)

* [Dia 09 - Pendulo de Newton](#id09)

* [Dia 10 - Animação texto alternando](#id10)

* [Dia 11 - Botão com efeito hover](#id11)

* [Dia 12 - Efeito de preenchimento ao passar o mouse](#id12)

* [Dia 13 - Loading com efeito](#id13)

* [Dia 14 - Fundo de texto animado](#id14)

* [Dia 15 - Texto flutuante](#id15)

* [Dia 16 - Botão com efeito](#id16)

* [Dia 17 - Loader animado](#id17)

* [Dia 18 - Texto esfumaçado](#id18)

* [Dia 19 - Efeitos de animação de fundo de partículas](#id19)

* [Dia 20 - Botão com efeito](#id20)

* [Dia 21 - Esferas quicando](#id21)

* [Dia 22 - Icones com efeito](#id22)

* [Dia 23 - Botão com efeito hover](#id23)

* [Dia 24 - Preloader animado](#id24)

* [Dia 25 - Checkbox animado](#id25)

* [Dia 26 - Loading com efeito](#id26)

* [Dia 27 - Efeito pulsar](#id27)

* [Dia 28 - Cor do background mudando](#id28)

* [Dia 29 - Menu responsivo com Media Queries](#id29)

* [Dia 30 - Fogos de artificio](#id30)

##  Desafio dia 01 - Ícone de mídia social em camadas 

![Dia 01](https://user-images.githubusercontent.com/37448340/88348819-d38d7000-cd24-11ea-99d1-39b04afb77f2.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2001)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn](https://www.linkedin.com/posts/milenacarecho_30diascss-html5-css3-activity-6690824691449413632-7vau) 

##### O que eu aprendi

* *Criar as camadas utilizando a tag ``*

* *tranformação 2D ou 3D de um elemento [aqui](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

* *[Transições CSS](https://www.w3schools.com/css/css3_transitions.asp)*

* *[Opacidade / transparência do CSS](https://www.w3schools.com/css/css_image_transparency.asp)*

* *[hover](https://www.w3schools.com/cssref/sel_hover.asp)*

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

##  Desafio dia 02 - Loader animado 

![Dia 02](https://user-images.githubusercontent.com/37448340/88348825-d5573380-cd24-11ea-832c-989e091167b8.gif)

[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2002)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6691381608261464064/)

##### O que eu aprendi

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 03 - Mudança de cor de texto quando entra em outra div 



[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2003)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### Dicas

* *[CSS Overflow](https://www.w3schools.com/css/css_overflow.asp)* 

* *Use [animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 04 - Botão com efeito 

![dia 04](https://user-images.githubusercontent.com/37448340/88242961-38819100-cc65-11ea-82b3-b541ff8cb3d7.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2004)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6692115971647303681/)

##### O que eu aprendi

* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*

* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*

* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

##  Desafio dia 05 - Efeito pulsar 

![dia 05](https://user-images.githubusercontent.com/37448340/88354131-4d7a2500-cd36-11ea-800e-eec277f17737.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2005)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

##  Desafio dia 06 - Efeito lightning text 

![dia 06](https://user-images.githubusercontent.com/37448340/88449709-5d216880-ce1f-11ea-924b-18acde214ce9.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2006)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

##  Desafio dia 07 - Preloader animado 

![dia 07](https://user-images.githubusercontent.com/37448340/88490911-412fdb00-cf75-11ea-806c-c41df0d1727e.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/Dia%2007)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

##  Desafio dia 08 - Coração batendo 

![gif](https://user-images.githubusercontent.com/37448340/88534017-9c95b380-cfdd-11ea-9b54-b883fd9f9e77.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2008)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 09 - Pendulo de Newton 

![gif (1)](https://user-images.githubusercontent.com/37448340/88670759-d76e1900-d0bb-11ea-8158-edf1cdf41b97.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2009)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*

* *[first-child](https://www.w3schools.com/cssref/sel_firstchild.asp)*

* *[last-child](https://www.w3schools.com/cssref/sel_last-child.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 10 - Animação texto alternando 

![gif (2)](https://user-images.githubusercontent.com/37448340/88792562-caabfc80-d171-11ea-8c71-9756331e3ab6.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2010)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 11 - Botão com efeito hover 

![gif (3)](https://user-images.githubusercontent.com/37448340/88915715-29897880-d23b-11ea-9f58-8fe93214d3cc.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2011)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[Overflow](https://www.w3schools.com/css/css_overflow.asp)* 

* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*

* *[z-index](https://www.w3schools.com/cssref/pr_pos_z-index.asp)*

##  Desafio dia 12 - Efeito de preenchimento ao passar o mouse

![gif (4)](https://user-images.githubusercontent.com/37448340/89034283-05976700-d30f-11ea-983f-5b0171212a2a.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2012)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*

##  Desafio dia 13 - Loading com efeito

![gif (3)](https://user-images.githubusercontent.com/37448340/89111708-69b14c80-d42f-11ea-904b-1a4e5a1842e0.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2013)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

##  Desafio dia 14 - Fundo de texto animado

![gif (4)](https://user-images.githubusercontent.com/37448340/89136987-adc64f00-d50c-11ea-8ce7-97515b31ae0e.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2014)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[background-clip](https://www.w3schools.com/cssref/css3_pr_background-clip.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 15 - Texto flutuante

![gif (5)](https://user-images.githubusercontent.com/37448340/89242255-796b9500-d5d7-11ea-9e4f-4f4d499f5dc6.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2015)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 16 - Botão com efeito 

![gif (6)](https://user-images.githubusercontent.com/37448340/89361050-9a4bed00-d6a0-11ea-85c0-b331c7efcbed.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2016)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*

##  Desafio dia 17 - Loader animado

![gif (7)](https://user-images.githubusercontent.com/37448340/89480128-f2e7bc80-d76a-11ea-8aaa-6987ee30a1c7.gif)

[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2017)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 18 - Texto esfumaçado

![gif (9)](https://user-images.githubusercontent.com/37448340/89602896-2a736900-d83e-11ea-83d1-ddf210064771.gif)

[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2018)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 

##  Desafio dia 19 - Efeitos de animação fundo de partículas 

![gif (10)](https://user-images.githubusercontent.com/37448340/89700784-6b838000-d907-11ea-852b-d9b06fadd590.gif)

[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2019)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

* *[variáveis CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties)*

##  Desafio dia 20 - Botão com efeito 

![gif (13)](https://user-images.githubusercontent.com/37448340/89723734-8837ba80-d9d0-11ea-92ee-3cecf1da1647.gif)

[Meu código](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2020)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

* *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)*

##  Desafio dia 21 - Esferas quicando 

![gif (14)](https://user-images.githubusercontent.com/37448340/89748326-fd6ec280-da98-11ea-846f-cb7b68a1d777.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2021)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 22 - Icones com efeito 

![gif (15)](https://user-images.githubusercontent.com/37448340/89851135-2a3adc80-db62-11ea-8b59-c76672f08e0b.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2022)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)*

* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*

* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

##  Desafio dia 23 - Botão com efeito 

![gif (17)](https://user-images.githubusercontent.com/37448340/89967422-caa70480-dc27-11ea-8a1f-80adfbaea9d4.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2023)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 

* *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)*

##  Desafio dia 24 - Preloader animado 

![gif (18)](https://user-images.githubusercontent.com/37448340/90086193-3e144900-dcf0-11ea-94eb-39dbb4723e7a.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2024)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

## Desafio dia 25 - checkbox animado 

![gif (20)](https://user-images.githubusercontent.com/37448340/90207269-33bf8100-ddbc-11ea-9d30-e6cd44d2a120.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2025)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi 

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)* 

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

## Desafio dia 26 - Loading com efeito

![gif (21)](https://user-images.githubusercontent.com/37448340/90303547-1e625980-de85-11ea-82f9-b23d4fed96bc.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2026)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi 

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)* 

* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

## Desafio dia 27 - Efeito pulsar

![gif (22)](https://user-images.githubusercontent.com/37448340/90583617-fcc7e180-e1a6-11ea-904a-4cf74508b5a0.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2027)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi 

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)* 

* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

## Desafio dia 28 - cor do background mudando

![gif (23)](https://user-images.githubusercontent.com/37448340/90352994-61eecc00-e01b-11ea-90db-d0fabc5036ab.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2028)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi 

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*

## Desafio dia 29 - Menu responsivo com Media Queries

![gif (24)](https://user-images.githubusercontent.com/37448340/90464853-911d4000-e0e4-11ea-9328-2b481a304913.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/Dia%2029)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi 

* *[@media](https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media)*

## Desafio dia 30 - Fogos de artificio

![gif (25)](https://user-images.githubusercontent.com/37448340/90583437-85924d80-e1a6-11ea-98ad-db4fbf5f0739.gif)

[Meu codigo](https://github.com/MilenaCarecho/30diasDeCSS/tree/master/Desafios/dia%2030)

[Tutorial Medium]() *Ainda não disponivel*

[Post LinkedIn]()

##### O que eu aprendi 

* *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)*

* *[::before](https://www.w3schools.com/cssref/sel_before.asp)* 

* *[::after](https://www.w3schools.com/cssref/sel_after.asp)*

* *[animations](https://www.w3schools.com/css/css3_animations.asp)*