├── .github ├── gifts │ ├── Dia1.gif │ ├── Dia10.gif │ ├── Dia11.gif │ ├── Dia12.gif │ ├── Dia13.gif │ ├── Dia14.gif │ ├── Dia15.gif │ ├── Dia16.gif │ ├── Dia17.gif │ ├── Dia18.gif │ ├── Dia19.gif │ ├── Dia2.gif │ ├── Dia20.gif │ ├── Dia21.gif │ ├── Dia22.gif │ ├── Dia23.gif │ ├── Dia24.gif │ ├── Dia25.gif │ ├── Dia26.gif │ ├── Dia27.gif │ ├── Dia28.gif │ ├── Dia29.gif │ ├── Dia3.gif │ ├── Dia30.gif │ ├── Dia4.gif │ ├── Dia5.gif │ ├── Dia6.gif │ ├── Dia7.gif │ ├── Dia8.gif │ └── Dia9.gif └── img_github.png ├── .vscode └── settings.json ├── Dia1 ├── README.md ├── index.html └── style.css ├── Dia10 ├── README.md ├── icons │ ├── computer-line.svg │ ├── cup-line.svg │ └── fries-line.svg ├── index.html └── style.css ├── Dia11 ├── README.md ├── index.html └── style.css ├── Dia12 ├── README.md ├── index.html └── style.css ├── Dia13 ├── README.md ├── index.html └── style.css ├── Dia14 ├── README.md ├── index.html └── style.css ├── Dia15 ├── README.md ├── icons │ ├── sea-blue-sky.png │ └── ship-boat-illustration-vector.png ├── index.html └── style.css ├── Dia16 ├── README.md ├── index.html └── style.css ├── Dia17 ├── README.md ├── index.html └── style.css ├── Dia18 ├── README.md ├── index.html └── style.css ├── Dia19 ├── README.md ├── index.html └── style.css ├── Dia2 ├── README.md ├── index.html └── style.css ├── Dia20 ├── README.md ├── index.html └── style.css ├── Dia21 ├── README.md ├── index.html └── style.css ├── Dia22 ├── README.md ├── index.html └── style.css ├── Dia23 ├── README.md ├── index.html └── style.css ├── Dia24 ├── README.md ├── index.html └── style.css ├── Dia25 ├── README.md ├── index.html └── style.css ├── Dia26 ├── README.md ├── index.html └── style.css ├── Dia27 ├── README.md ├── index.html └── style.css ├── Dia28 ├── README.md ├── index.html └── style.css ├── Dia29 ├── README.md ├── index.html └── style.css ├── Dia3 ├── README.md ├── index.html └── style.css ├── Dia30 ├── README.md ├── index.html └── style.css ├── Dia4 ├── README.md ├── index.html └── style.css ├── Dia5 ├── README.md ├── index.html └── style.css ├── Dia6 ├── README.md ├── index.html └── style.css ├── Dia7 ├── README.md ├── index.html └── style.css ├── Dia8 ├── README.md ├── index.html └── style.css ├── Dia9 ├── README.md ├── index.html └── style.css └── README.md /.github/gifts/Dia1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia1.gif -------------------------------------------------------------------------------- /.github/gifts/Dia10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia10.gif -------------------------------------------------------------------------------- /.github/gifts/Dia11.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia11.gif -------------------------------------------------------------------------------- /.github/gifts/Dia12.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia12.gif -------------------------------------------------------------------------------- /.github/gifts/Dia13.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia13.gif -------------------------------------------------------------------------------- /.github/gifts/Dia14.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia14.gif -------------------------------------------------------------------------------- /.github/gifts/Dia15.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia15.gif -------------------------------------------------------------------------------- /.github/gifts/Dia16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia16.gif -------------------------------------------------------------------------------- /.github/gifts/Dia17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia17.gif -------------------------------------------------------------------------------- /.github/gifts/Dia18.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia18.gif -------------------------------------------------------------------------------- /.github/gifts/Dia19.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia19.gif -------------------------------------------------------------------------------- /.github/gifts/Dia2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia2.gif -------------------------------------------------------------------------------- /.github/gifts/Dia20.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia20.gif -------------------------------------------------------------------------------- /.github/gifts/Dia21.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia21.gif -------------------------------------------------------------------------------- /.github/gifts/Dia22.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia22.gif -------------------------------------------------------------------------------- /.github/gifts/Dia23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia23.gif -------------------------------------------------------------------------------- /.github/gifts/Dia24.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia24.gif -------------------------------------------------------------------------------- /.github/gifts/Dia25.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia25.gif -------------------------------------------------------------------------------- /.github/gifts/Dia26.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia26.gif -------------------------------------------------------------------------------- /.github/gifts/Dia27.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia27.gif -------------------------------------------------------------------------------- /.github/gifts/Dia28.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia28.gif -------------------------------------------------------------------------------- /.github/gifts/Dia29.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia29.gif -------------------------------------------------------------------------------- /.github/gifts/Dia3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia3.gif -------------------------------------------------------------------------------- /.github/gifts/Dia30.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia30.gif -------------------------------------------------------------------------------- /.github/gifts/Dia4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia4.gif -------------------------------------------------------------------------------- /.github/gifts/Dia5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia5.gif -------------------------------------------------------------------------------- /.github/gifts/Dia6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia6.gif -------------------------------------------------------------------------------- /.github/gifts/Dia7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia7.gif -------------------------------------------------------------------------------- /.github/gifts/Dia8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia8.gif -------------------------------------------------------------------------------- /.github/gifts/Dia9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/gifts/Dia9.gif -------------------------------------------------------------------------------- /.github/img_github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/.github/img_github.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Dia1/README.md: -------------------------------------------------------------------------------- 1 | 2 |

Ícone de mídia social em camadas

3 | 4 |


5 | 6 |

O Desafio 1/30 foi desenvolver ícones que, ao passar o mouse, criasse um efeito "sanfona". 7 | 8 | Para essas camadas, foram utilizadas cinco camadas (span) e propriedades como o transform(translate) e :hover. 9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ícone de mídia social em camadas 7 | 8 | 9 | 10 | 11 | 12 | 13 |

69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /Dia1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | background-color: #F5F5F5; 9 | } 10 | 11 | ul { 12 | position: relative; 13 | margin: 0; 14 | padding: 0; 15 | display: flex; 16 | } 17 | 18 | ul li { 19 | position: relative; 20 | list-style: none; 21 | width: 60px; 22 | height: 60px; 23 | margin: 0 30px; 24 | transform: rotate(-30deg) skew(25deg); 25 | background: #ccc; 26 | } 27 | 28 | ul li span { 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | width: 100%; 33 | height: 100%; 34 | background: #000; 35 | transition: 0.5s; 36 | display: flex !important; 37 | align-items: center; 38 | justify-content: center; 39 | color: #fff; 40 | font-size: 30px !important; 41 | } 42 | 43 | 44 | ul li:hover span { 45 | box-shadow: -1px 1px 1px rgba(0, 0, 0.1); 46 | } 47 | 48 | ul li:hover span:nth-child(6) { 49 | transform: translate(50px, -50px); 50 | opacity: 1; 51 | } 52 | 53 | ul li:hover span:nth-child(5) { 54 | transform: translate(40px, -40px); 55 | opacity: 1; 56 | } 57 | 58 | ul li:hover span:nth-child(4) { 59 | transform: translate(30px, -30px); 60 | opacity: 0.8; 61 | } 62 | 63 | ul li:hover span:nth-child(3) { 64 | transform: translate(20px, -20px); 65 | opacity: 0.6; 66 | } 67 | 68 | ul li:hover span:nth-child(2) { 69 | transform: translate(10px, -10px); 70 | opacity: 0.4; 71 | } 72 | 73 | ul li:hover span:nth-child(1) { 74 | transform: translate(0, 0); 75 | opacity: 2; 76 | } 77 | 78 | /*---CORES---*/ 79 | 80 | ul li:nth-child(1) span { 81 | background: #3b5998; 82 | } 83 | 84 | ul li:nth-child(2) span { 85 | background: #00acee; 86 | } 87 | 88 | ul li:nth-child(3) span { 89 | background: #db4a39; 90 | } 91 | 92 | ul li:nth-child(4) span { 93 | background: #0e76a8; 94 | } 95 | 96 | ul li:nth-child(5) span { 97 | background: #d6249f; 98 | background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); 99 | } 100 | 101 | ul li:nth-child(6) span { 102 | background: #24292e; 103 | } -------------------------------------------------------------------------------- /Dia10/README.md: -------------------------------------------------------------------------------- 1 |

Animação Texto Alternando

2 | 3 |


4 | 5 |

Desafio 10/30
6 | 7 | Para o desafio 10, foi utilizado um span para o texto e um pseudo-elements(before) para inserir os icones. 8 |

9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia10/icons/computer-line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Dia10/icons/cup-line.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Dia10/icons/fries-line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Dia10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animação texto alternando 7 | 8 | 9 | 10 | 11 | 12 |
13 | I love 14 |
15 | 16 | -------------------------------------------------------------------------------- /Dia10/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .alignment { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | 12 | .container { 13 | height: 100vh; 14 | background: rgb(6, 44, 18); 15 | } 16 | 17 | .text { 18 | font-family: 'Fredericka the Great', cursive; 19 | font-size: 60px; 20 | color: white; 21 | position: relative; 22 | } 23 | 24 | .text::before { 25 | content: ""; 26 | position: absolute; 27 | width: 70px ; 28 | height: 70px; 29 | background-repeat: no-repeat; 30 | left: 170px; 31 | top: 5px; 32 | animation: icons 3s linear infinite; 33 | } 34 | 35 | @keyframes icons { 36 | 0%, 49% { 37 | background-image: url(icons/computer-line.svg); 38 | } 39 | 50%, 74% { 40 | background-image: url(icons/cup-line.svg); 41 | } 42 | 75%, 99% { 43 | background-image: url(icons/fries-line.svg); 44 | } 45 | } -------------------------------------------------------------------------------- /Dia11/README.md: -------------------------------------------------------------------------------- 1 |

Botão com Efeito Hover

2 | 3 |


4 | 5 |

Desafio 11/30
6 | 7 | Para estilizar o botão, além do hover, usei um box-sizing e fui manipulando suas bordas(top, left e bottom) para criar o efeito de uma seta. 8 | 9 |

10 | 11 | --- 12 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Botão com efeito hover 7 | 8 | 9 | 10 |
11 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /Dia11/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap'); 2 | 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .container { 9 | height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | background: #FFE4E1; 14 | } 15 | 16 | .button { 17 | background: none; 18 | position: relative; 19 | width: 200px; 20 | height: 50px; 21 | font-family: 'Open Sans', sans-serif; 22 | font-size: 16px; 23 | cursor: pointer; 24 | border: 2px solid #FF1493; 25 | border-radius: 2px; 26 | overflow: hidden; 27 | } 28 | 29 | 30 | .text { 31 | position: absolute; 32 | color: #FF1493; 33 | top: -3px; 34 | right: 27px; 35 | transition: ease-in; 36 | 37 | } 38 | .wallpaper { 39 | position: absolute; 40 | background: none; 41 | width: 300px; 42 | height: 200px; 43 | top: -75px; 44 | right: 200px; 45 | transition: 1s; 46 | 47 | box-sizing: border-box; 48 | border-top: 100px solid transparent; 49 | border-left: 300px solid #FF1493; 50 | border-bottom: 100px solid transparent; 51 | } 52 | 53 | .button:hover .wallpaper { 54 | transition: 1s; 55 | transform: translateX(300px); 56 | } 57 | 58 | .button:hover .text { 59 | color: white; 60 | } 61 | -------------------------------------------------------------------------------- /Dia12/README.md: -------------------------------------------------------------------------------- 1 |

Efeito de Preenchimento ao passar o mouse

2 | 3 |


4 | 5 |

Desafio 12/30
6 | 7 | Para criar o efeito, utilizei um pseudo-elemento before, juntamente com o hover, e um transition para suavizar o movimento. 8 | 9 |

10 | 11 | --- 12 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito de Preenchimento ao passar o mouse 7 | 8 | 9 | 10 |

#30diasCSS

11 | 12 | 13 | -------------------------------------------------------------------------------- /Dia12/style.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | height: 100vh; 6 | background: #008B8B; 7 | } 8 | 9 | .alignment { 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .text { 16 | position: relative; 17 | color: #00CDCD; 18 | font-size: 40px; 19 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 20 | cursor: context-menu; 21 | } 22 | 23 | .text::before { 24 | content:"#30diasCSS"; 25 | position: absolute; 26 | overflow: hidden; 27 | top: 0%; 28 | left: 0%; 29 | color: white; 30 | height: 0%; 31 | transition: 1.2s; 32 | } 33 | 34 | .text:hover::before { 35 | height: 100%; 36 | } 37 | -------------------------------------------------------------------------------- /Dia13/README.md: -------------------------------------------------------------------------------- 1 |

Loading com efeito

2 | 3 |


4 | 5 |

Desafio 13/30
6 | 7 | Simulando o efeito de ondas, utilizei as propriedades:
8 | Animation
9 | Transform: translate (na posição Y) e
10 | Transition 11 | 12 |

13 | 14 | --- 15 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loading com efeito 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | L 15 | O 16 | A 17 | D 18 | I 19 | N 20 | G 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /Dia13/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container { 7 | height: 100vh; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | background: #fffdfa; 12 | 13 | } 14 | 15 | .effects { 16 | display: flex; 17 | font-size: 40px; 18 | font-family: 'Nunito', sans-serif; 19 | width: 300px; 20 | justify-content: space-evenly; 21 | } 22 | 23 | .alignment { 24 | animation: letter 1.05s alternate-reverse infinite; 25 | display: block; 26 | justify-content: center; 27 | 28 | background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(88,130,242,0.9500175070028011) 30%, rgba(221,92,243,1) 50%, rgba(154,95,243,1) 71%, rgba(249,135,250,1) 100%); 29 | background-size: contain; 30 | -webkit-background-clip: text; 31 | -webkit-text-fill-color: transparent; 32 | 33 | } 34 | 35 | .two { 36 | animation-delay: .3s; 37 | } 38 | 39 | .three { 40 | animation-delay: .6s; 41 | } 42 | .four { 43 | animation-delay: .9s; 44 | } 45 | .five { 46 | animation-delay: 1.2s; 47 | } 48 | .six { 49 | animation-delay: 1.5s; 50 | } 51 | .seven { 52 | animation-delay: 1.8s; 53 | } 54 | 55 | 56 | @keyframes letter { 57 | from { 58 | transform: translateY(30px); 59 | transition: .5s; 60 | } 61 | to { 62 | transform: translateY(0px); 63 | transition: .5s; 64 | } 65 | } 66 | 67 | -------------------------------------------------------------------------------- /Dia14/README.md: -------------------------------------------------------------------------------- 1 |

Fundo de texto animado

2 | 3 |


4 | 5 |

Desafio 14/30
6 | 7 | Para este desafio, utilizei as seguintes propriedades:

8 | - background-clip 9 | - text-fill-color 10 | - background-image e 11 | - animation 12 | 13 | --- 14 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fundo de texto animado 7 | 8 | 9 | 10 | 11 |
12 |

CODE

13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /Dia14/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container { 7 | height: 100vh; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | text-align-last: center; 12 | background: radial-gradient(#CFCFCF,#B5B5B5,#9C9C9C, #828282,#696969, #4F4F4F, #363636, #1C1C1C , #000000 ); 13 | } 14 | 15 | .text { 16 | font-size: 100px; 17 | font-family: 'Lato', sans-serif; 18 | animation: code 5s linear infinite; 19 | height: 300px; 20 | 21 | background-size: 50%; 22 | -webkit-background-clip: text; 23 | -webkit-text-fill-color: transparent; 24 | background-image: url(https://storage.needpix.com/rsynced_images/matrix-1461373324WTC.jpg); 25 | } 26 | 27 | @keyframes code { 28 | 0% { 29 | background-position-y: 0%; 30 | } 31 | 100% { 32 | background-position-y: 100%; 33 | } 34 | } 35 | 36 | -------------------------------------------------------------------------------- /Dia15/README.md: -------------------------------------------------------------------------------- 1 |

Efeito Flutuante

2 | 3 |


4 | 5 |

Desafio 15/30
6 | 7 | Para criar o efeito de flutuar, utilizei a propriedade keyframes com rotate e translate. 8 | 9 | E para o movimento do mar,também utilizei a propriedade animation e keyframes, com background-position no sentido x. 10 | 11 | --- 12 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia15/icons/sea-blue-sky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/Dia15/icons/sea-blue-sky.png -------------------------------------------------------------------------------- /Dia15/icons/ship-boat-illustration-vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polyanetuag/30DiasDeCSS/6612f0b88f6e7a80e611219e1eb191e6ffafe75d/Dia15/icons/ship-boat-illustration-vector.png -------------------------------------------------------------------------------- /Dia15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito Flutuar 7 | 8 | 9 | 10 |

11 | 12 |
13 |
14 |
15 | barco 16 |
17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /Dia15/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | .container { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | position: relative; 15 | overflow: hidden; 16 | height: 500px; 17 | width: 800px; 18 | } 19 | 20 | .sky { 21 | position: absolute; 22 | height: 500px; 23 | width: 800px; 24 | top: 0px; 25 | background: linear-gradient(#00FFFF, #98F5FF, White, #AFEEEE, #ADD8E6, #87CEFA, #1E90FF, #0000FF); 26 | 27 | } 28 | 29 | .sea { 30 | position: absolute; 31 | height: 1200px; 32 | width: 1200px; 33 | top: 0px; 34 | 35 | background-image: url(icons/sea-blue-sky.png); 36 | background-repeat: no-repeat; 37 | background-size: 100%; 38 | 39 | transition: 1s; 40 | animation: sea 5s linear infinite; 41 | } 42 | 43 | .boat img { 44 | position: relative; 45 | height: 200px; 46 | width: 200px; 47 | top: 10px; 48 | 49 | transition: 1s; 50 | animation: float 2s linear infinite; 51 | } 52 | 53 | @keyframes float { 54 | 0% { 55 | transform:rotate(2deg); 56 | } 57 | 50% { 58 | transform: translateY(2px); 59 | } 60 | 100% { 61 | transform:rotate(2deg); 62 | } 63 | } 64 | 65 | @keyframes sea { 66 | 0% { background-position-x: 0px; } 67 | 100%{ background-position-x: 200px; } 68 | } 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /Dia16/README.md: -------------------------------------------------------------------------------- 1 |

Botão com Efeito Checked

2 | 3 |


4 | 5 |

Desafio 16/30

6 | 7 | Para este desafio, utilizei as propriedades: 8 | - transform-style 9 | - transform-origin 10 | - transform rotate/translate 11 | 12 | --- 13 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Botão com Efeito 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Dia16/style.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .buttons { 4 | text-align: center; 5 | height: 100vh; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | 10 | background: black; 11 | 12 | } 13 | 14 | .effect { 15 | border: none; 16 | color: #F8F8FF; 17 | padding: 20px; 18 | margin: 10px; 19 | font-size: 24px; 20 | line-height: 24px; 21 | border-radius: 10px; 22 | position: relative; 23 | box-sizing: border-box; 24 | cursor: pointer; 25 | transition: all 400ms ease; 26 | 27 | } 28 | 29 | .spin { 30 | background: linear-gradient(#DAA520, #FFC125, #FFD700); 31 | transform-style: preserve-3d; 32 | } 33 | 34 | .spin::after { 35 | top: -100%; 36 | left: 0px; 37 | width: 100%; 38 | padding: 20px; 39 | position: absolute; 40 | background: linear-gradient(#228B22,#32CD32, #7FFF00 ); 41 | border-radius: 10px; 42 | box-sizing: border-box; 43 | content: "Feito ✔" ; 44 | 45 | transform-origin: left bottom; 46 | transform: rotateX(90deg); 47 | 48 | } 49 | 50 | .spin:hover { 51 | transform-origin: center bottom; 52 | transform: rotateX(-90deg) translateY(100%); 53 | } -------------------------------------------------------------------------------- /Dia17/README.md: -------------------------------------------------------------------------------- 1 |

Loader Animado - Efeito Flip

2 | 3 |


4 | 5 |

Desafio 17/30 6 | 7 | Neste desafio, utilizei a propriedade transform rotate (somente na posição Y), com animation e keyframes. 8 | 9 |

10 | 11 | --- 12 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loader animado 7 | 8 | 9 | 10 |
❤
11 | 12 | 13 | -------------------------------------------------------------------------------- /Dia17/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | background: #1C1C1C ; 6 | } 7 | 8 | .alignment { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .load { 15 | height: 50px; 16 | width: 50px; 17 | color: white; 18 | background: linear-gradient(127deg, rgba(250,4,4,1) 5%, rgba(252,52,3,1) 11%, rgba(255,149,0,1) 18%, rgba(249,238,4,1) 26%, rgba(223,249,4,1) 35%, rgba(120,249,4,1) 42%, rgba(4,249,172,1) 45%, rgba(4,239,249,1) 56%, rgba(38,144,255,1) 65%, rgba(4,9,249,1) 72%, rgba(204,18,244,1) 85%, rgba(245,24,240,1) 89%, rgba(245,24,177,1) 96%); 19 | 20 | border-radius: 10px; 21 | 22 | animation: load 1s alternate infinite; 23 | transition: 2s; 24 | } 25 | 26 | @keyframes load { 27 | 0%{ 28 | transform: rotateX(0deg) 29 | rotateY(0deg); 30 | } 31 | 100% { 32 | transform: rotateX(0deg) 33 | rotateY(180deg); 34 | box-shadow: 0px 0px 10px -2px rgba(235, 232, 232, 0.856); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /Dia18/README.md: -------------------------------------------------------------------------------- 1 |

Texto com Efeito Esfumaçado

2 | 3 |


4 | 5 |

Desafio 18/30

6 | 7 | Para esse efeito, utilizei: 8 | - filter (blur) - para o efeito de "fumaça" 9 | - transform rotate (x,y) - para movimentar o texto 10 | 11 | 12 | --- 13 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Texto com Efeito Fumaça 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | D 15 | E 16 | S 17 | A 18 | F 19 | I 20 | O 21 | -1 22 | 8 23 |
24 | 25 | -------------------------------------------------------------------------------- /Dia18/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | background: black; 12 | } 13 | 14 | .text { 15 | font-size: 60px; 16 | font-family: 'Butcherman', cursive; 17 | letter-spacing: 15px; 18 | 19 | background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(48,4,4,1) 4%, rgba(85,7,7,1) 22%, rgba(245,16,16,1) 55%, rgba(255,0,0,1) 97%); 20 | -webkit-background-clip: text; 21 | -webkit-text-fill-color: transparent; 22 | 23 | transition: 1s; 24 | animation: fog 4s alternate infinite; 25 | } 26 | 27 | @keyframes fog { 28 | from { 29 | transform: rotateX(60deg) translateY(60px); 30 | opacity: 0; 31 | filter: blur(15px); 32 | } 33 | to { 34 | transform:skew(10deg); 35 | } 36 | } 37 | 38 | .text span:nth-child(0) { 39 | transition-delay: 0s; 40 | } 41 | .text span:nth-child(1) { 42 | transition-delay: 0.3s; 43 | } 44 | .text span:nth-child(2) { 45 | transition-delay: 0.6s; 46 | } 47 | .text span:nth-child(3) { 48 | transition-delay: 0.9s; 49 | } 50 | .text span:nth-child(4) { 51 | transition-delay: 1.2s; 52 | } 53 | .text span:nth-child(5) { 54 | transition-delay: 1.5s; 55 | } 56 | .text span:nth-child(6) { 57 | transition-delay: 1.8s; 58 | } 59 | .text span:nth-child(7) { 60 | transition-delay: 2.1s; 61 | } 62 | .text span:nth-child(8) { 63 | transition-delay: 2.3s; 64 | } 65 | .text span:nth-child(9) { 66 | transition-delay: 2.6s; 67 | } 68 | -------------------------------------------------------------------------------- /Dia19/README.md: -------------------------------------------------------------------------------- 1 |

Background Animado - Caixas Flutuantes

2 | 3 |


4 | 5 |

Desafio 19/30

6 | 7 | Para esse efeito, utilizei: 8 | - transform translate (y) 9 | - transform rotate (x,y) 10 | - opacity 11 | - nth-child() 12 | 13 | 14 | --- 15 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Animado - Caixas Flutuantes 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Desafio 19

14 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Dia19/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .group-animate{ 14 | height: 100vh; 15 | background: linear-gradient(to bottom, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%); 16 | width: 100%; 17 | 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | .text { 24 | font-size: 50px; 25 | font-family: Nunito, sans-serif; 26 | color: white; 27 | width: 300px; 28 | } 29 | 30 | .animate-box{ 31 | position: absolute; 32 | top: -180px; 33 | left: 0px; 34 | width: 100%; 35 | height: 100%; 36 | overflow: hidden; 37 | } 38 | 39 | .animate-box li { 40 | position: absolute; 41 | display: block; 42 | border-radius: 5px; 43 | list-style: none; 44 | width: 30px; 45 | height: 30px; 46 | background: rgba(255, 255, 255, 0.2); 47 | animation: floating 15s linear infinite; 48 | 49 | } 50 | 51 | .animate-box li:nth-child(1) { 52 | left: 80%; 53 | height: 20px; 54 | width: 20px; 55 | animation-delay: 0s; 56 | } 57 | 58 | .animate-box li:nth-child(2) { 59 | left: 60%; 60 | height: 60px; 61 | width: 60px; 62 | animation-delay: 3s; 63 | animation-duration: 9s; 64 | 65 | } 66 | 67 | .animate-box li:nth-child(3) { 68 | left: 60%; 69 | height: 30px; 70 | width: 30px; 71 | animation-delay: 5s; 72 | } 73 | 74 | .animate-box li:nth-child(4) { 75 | left: 70%; 76 | height: 45px; 77 | width: 45px; 78 | animation-delay: 3s; 79 | animation-duration: 10s; 80 | } 81 | 82 | .animate-box li:nth-child(5) { 83 | left: 40%; 84 | height:40px; 85 | width: 40px; 86 | animation-delay: 8s; 87 | } 88 | 89 | .animate-box li:nth-child(6) { 90 | left: 30%; 91 | height: 50px; 92 | width: 50px; 93 | animation-delay: 6s; 94 | } 95 | 96 | .animate-box li:nth-child(7) { 97 | left: 15%; 98 | height: 100px; 99 | width: 100px; 100 | animation-delay: 4s; 101 | } 102 | 103 | .animate-box li:nth-child(8) { 104 | left: 85%; 105 | height: 90px; 106 | width: 90px; 107 | animation-delay: 0s; 108 | } 109 | 110 | .animate-box li:nth-child(9) { 111 | left: 10%; 112 | height: 50px; 113 | width: 50px; 114 | animation-delay: 8s; 115 | } 116 | 117 | .animate-box li:nth-child(10) { 118 | left: 15%; 119 | height: 60px; 120 | width: 60px; 121 | animation-delay: 10s; 122 | } 123 | 124 | @keyframes floating { 125 | 0% { 126 | transform: translateY(0) rotate(0deg); 127 | opacity: 1; 128 | } 129 | 50% { 130 | opacity: 1; 131 | } 132 | 75% { 133 | opacity: 0; 134 | } 135 | 100% { 136 | transform: translateY(800px) rotate(360deg); 137 | } 138 | } -------------------------------------------------------------------------------- /Dia2/README.md: -------------------------------------------------------------------------------- 1 |

Loading

2 | 3 |


4 | 5 |

Desafio 2/30 6 | 7 | Para esse exercício, utilizou-se (para o anel), as propriedades: 8 | - transform: translate 9 | - animation 10 | - transform: translate (@keyframes) 11 | 12 | 13 | --- 14 | Desenvolvido com ❤ por Polyane Tuag 15 |

-------------------------------------------------------------------------------- /Dia2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loading 7 | 8 | 9 | 10 | 11 | 12 |
13 |
Loading
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /Dia2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Playfair Display', serif; 5 | } 6 | html { 7 | 8 | background: rgb(20, 20, 20) !important; 9 | } 10 | 11 | .center { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); /**/ 16 | } 17 | 18 | .ring { 19 | width: 200px; 20 | height: 200px; 21 | border-radius: 50%; 22 | box-shadow: 0 4px 0 #FFA500; 23 | background: transparent; 24 | animation: animate 1.4s linear infinite; 25 | } 26 | 27 | .text { 28 | width: 200px; 29 | height: 200px; 30 | border-radius: 50%; 31 | color: #FFFACD; 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | text-align: center; 36 | line-height: 200px; 37 | font-size: 22px; 38 | background: transparent; 39 | box-shadow: 0 0 5px #FF8C00; 40 | } 41 | 42 | @keyframes animate { 43 | 0% { 44 | transform: rotate(0deg); 45 | } 46 | 100% { 47 | transform: rotate(360deg); 48 | } 49 | } -------------------------------------------------------------------------------- /Dia20/README.md: -------------------------------------------------------------------------------- 1 |

Botão com Efeito Ajuda/Informação

2 | 3 |


4 | 5 |

Desafio 20/30

6 | 7 | Para este desafio, utilizei a propriedade clip-path. Tal propriedade, faz um "recorte" sobre o elemento que será mostrado, fazendo com que o restante fique oculto. 8 | 9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Botão com Efeito Ajuda/Informação 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 💡 18 | 19 |

#30diasCSS

20 |

21 | A proposta é realizar a cada dia, durante 30 dias, um desafio focado em CSS, a fim de melhorar suas habilidades de codificação (HTML e CSS).

22 | 23 |
24 | 25 | 26 |
27 | 28 | -------------------------------------------------------------------------------- /Dia20/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0; 4 | box-sizing: border-box; 5 | 6 | } 7 | 8 | body { 9 | height: 100vh; 10 | font-family: 'Nunito', sans-serif; 11 | display: grid; 12 | place-content: center; 13 | align-items: center; 14 | 15 | background: #FFFAFA; 16 | } 17 | 18 | .container { 19 | height: 350px; 20 | width: 400px; 21 | border-radius: 8px; 22 | } 23 | 24 | .info { 25 | position: relative; 26 | padding: 30px; 27 | 28 | clip-path: circle(8% at 92.5% 17%); 29 | transition: all ease-in-out .3s; 30 | background-color: #FEE140; 31 | background-image: linear-gradient(60deg, #FEE140 0%, #FA709A 100%); 32 | 33 | } 34 | 35 | .icon { 36 | position: absolute; 37 | top: 20px; 38 | right: 20px; 39 | font-size: 20px; 40 | transition: ease-out .3s; 41 | cursor: pointer; 42 | } 43 | 44 | .title { 45 | margin: 0; 46 | font-size: 20px; 47 | line-height: 60px; 48 | color: rgb(72, 70, 70); 49 | font-weight: 800; 50 | } 51 | 52 | .text { 53 | margin: 0; 54 | font-size: 15px; 55 | line-height: 22px; 56 | color: rgb(39, 39, 39); 57 | } 58 | 59 | .info:hover { 60 | clip-path: circle(85%); 61 | border-radius: 10px; 62 | box-shadow: 0px 3px 9px rgba(0,0,0,0.3), 63 | 0px 3px 18px rgba(0,0,0,0.8); 64 | } 65 | 66 | .info:hover .icon { 67 | opacity: 0; 68 | } -------------------------------------------------------------------------------- /Dia21/README.md: -------------------------------------------------------------------------------- 1 |

Efeito Loading

2 | 3 |


4 | 5 |

Desafio 21/30

6 | 7 | Para o efeito nas esferas, utilizei as propriedades scale (Variando suas escalas) e translateY (altura do salto). 8 | 9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito Loading 7 | 8 | 9 | 10 | 11 |
12 |
Loading
13 | 14 |
15 |
16 |
17 |
18 |
19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /Dia21/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | height: 100vh; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .container { 14 | position: relative; 15 | height: 100px; 16 | width: 400px; 17 | } 18 | 19 | .text { 20 | font-size: 40px; 21 | font-family: monospace; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | 26 | animation: shine 1.5s linear infinite; 27 | } 28 | 29 | .balls { 30 | position: absolute; 31 | width: 400px; 32 | height: 100px; 33 | } 34 | 35 | .ball { 36 | position: absolute; 37 | width: 20px; 38 | height: 20px; 39 | border-radius: 50%; 40 | background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); 41 | top: -70px; 42 | left: 155px; 43 | 44 | animation: bounce 1s ease infinite; 45 | } 46 | 47 | .ball:nth-last-child(1) { 48 | top: -110px; 49 | margin:40px; 50 | animation-delay: .2s; 51 | } 52 | 53 | .ball:nth-last-child(2) { 54 | top: -150px; 55 | margin:80px; 56 | animation-delay: .3s; 57 | } 58 | 59 | @keyframes shine { 60 | 0% { opacity: 1;} 61 | 50% {opacity: .6;} 62 | 100% { opacity: 1;} 63 | } 64 | 65 | @keyframes bounce { 66 | 0% {transform: scale(1,1) translateY(0)} 67 | 5% {transform: scale(1.1,0.9) translateY(0)} 68 | 50% {transform: scale(0.9,1.1) translateY(-40px)} 69 | 75% {transform: scale(0.9,1.1) translateY(-40)} 70 | 100% {transform: scale(1,1) translateY(0)} 71 | } 72 | 73 | -------------------------------------------------------------------------------- /Dia22/README.md: -------------------------------------------------------------------------------- 1 |

Menu Hamburguer

2 | 3 |


4 | 5 |

Desafio 22/30

6 | 7 | Para criar as "linhas" do menu, utilizei os pseudo-elements before e after, e para movê-las, usei transform rotate(45deg) e translate(y). 8 | 9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu Hamburguer 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Dia22/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container { 7 | height: 100vh; 8 | background: black; 9 | display: flex; 10 | } 11 | 12 | .menu { 13 | width: 60px; 14 | height: 60px; 15 | margin: 100px auto; 16 | position: relative; 17 | } 18 | 19 | .menu label { 20 | position: absolute; 21 | width: 100%; 22 | height: 100%; 23 | background-color: #00DBDE; 24 | background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); 25 | cursor: pointer; 26 | border-radius: 2px; 27 | border: 1px solid #ccc; 28 | transition: all .3s ease-out; 29 | } 30 | 31 | #check { 32 | position: absolute; 33 | z-index: 1; 34 | display: none; 35 | } 36 | 37 | .line { 38 | position: absolute; 39 | width: 40px; 40 | height: 4px; 41 | top: 29px; 42 | left: 11px; 43 | background: white; 44 | border-radius: 2px; 45 | transition: all .3s ease-out; 46 | } 47 | 48 | .line::before { 49 | content: ''; 50 | position: absolute; 51 | width: 40px; 52 | height: 4px; 53 | bottom: 12px; 54 | background: white; 55 | border-radius: 2px; 56 | transition: all .3s ease-out; 57 | } 58 | 59 | .line::after { 60 | content: ''; 61 | position: absolute; 62 | width: 40px; 63 | height: 4px; 64 | top: 12px; 65 | background: white; 66 | border-radius: 2px; 67 | transition: all .3s ease-out; 68 | } 69 | 70 | #check:checked ~ .line { 71 | background: transparent; 72 | } 73 | 74 | #check:checked ~ .line::after { 75 | transform: translate(0px, -10px) rotate(-45deg); 76 | } 77 | 78 | #check:checked ~ .line::before { 79 | transform: translate(0px, 14px) rotate(45deg); 80 | } 81 | 82 | #check:checked ~ label { 83 | border-radius: 50%; 84 | } -------------------------------------------------------------------------------- /Dia23/README.md: -------------------------------------------------------------------------------- 1 |

Botão Efeito Liquid Fill

2 | 3 |


4 | 5 |

Desafio 23/30

6 | 7 | Utlizando a mesma base do exercício anterior, utilizei um input (tipo checkbox) para "ativar" e o pseudo-elemento before para o elemento, criando assim o efeito de preenchimento. 8 | 9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Botão Efeito Liquid Fill 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Dia23/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: content-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | background: rgb(41,41,42); 13 | background: radial-gradient(circle, rgba(41,41,42,1) 0%, rgba(17,15,15,1) 48%, rgba(24,24,24,1) 100%); 14 | } 15 | 16 | .box { 17 | position: relative; 18 | height: 80px; 19 | width: 80px; 20 | background: transparent; 21 | border: 2px solid white; 22 | border-radius: 3px; 23 | overflow: hidden; 24 | } 25 | 26 | #check { 27 | position: absolute; 28 | display: none; 29 | } 30 | 31 | .box label { 32 | position: absolute; 33 | width: 100%; 34 | height: 100%; 35 | left: 0; 36 | font-size: 14px; 37 | margin-top: 28px; 38 | text-align: center; 39 | line-height: 24px; 40 | color: white; 41 | z-index: 1; 42 | cursor: pointer; 43 | } 44 | 45 | .box label::before { 46 | content: ''; 47 | position: absolute; 48 | width: 140px; 49 | height: 140px; 50 | background: rgb(9,9,170); 51 | background: linear-gradient(59deg, rgba(9,9,170,1) 0%, rgba(0,212,255,1) 100%); 52 | left: 40px; 53 | top: 85%; 54 | transform: translate(-50%); 55 | border-radius: 45px; 56 | transition: all 3s ease-in-out; 57 | z-index: -1; 58 | } 59 | 60 | #check:checked ~ label::before { 61 | top: 30px; 62 | transform: translate(-60%, -60%) rotate(360deg); 63 | } 64 | -------------------------------------------------------------------------------- /Dia24/README.md: -------------------------------------------------------------------------------- 1 |

Flor Spinner

2 | 3 |


4 | 5 |

Desafio 24/30

6 | 7 | Para dar forma a flor, utilizei 8 spans (com :nth-child), delineando sua forma com border-radius e alguns com transform rotate. 8 | E para animar, usei as propriedades scale e rotate, dispostas em quatro etapas. 9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spinner 7 | 8 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /Dia24/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | background: white; 4 | margin: 0; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | .spinner { 11 | position: relative; 12 | height: 10px; 13 | width: 10px; 14 | background: rgb(255,134,0); 15 | background: radial-gradient(circle, rgba(255,134,0,1) 0%, rgba(253,63,2,1) 47%, rgba(252,9,3,1) 88%); 16 | border-radius: 50%; 17 | box-shadow: 0px 2px 19px 0px rgba(153,153,147,1); 18 | 19 | animation: spin 3s linear infinite; 20 | } 21 | 22 | .spinner span { 23 | position: absolute; 24 | display: block; 25 | height: 10px; 26 | width: 10px; 27 | background: rgb(255,237,0); 28 | background: radial-gradient(circle, rgba(255,237,0,1) 0%, rgba(254,151,1,1) 34%, rgba(252,9,3,1) 100%); 29 | border: .5px solid red; 30 | } 31 | 32 | .spinner span:nth-child(1) { 33 | margin-top: 10px; 34 | margin-left: -10px; 35 | border-radius: 900px 50px; 36 | } 37 | .spinner span:nth-child(2) { 38 | margin-top: -10px; 39 | margin-left: -10px; 40 | border-radius: 50px 900px; 41 | } 42 | .spinner span:nth-child(3) { 43 | margin-top: -10px; 44 | margin-left: 10px; 45 | border-radius: 900px 50px; 46 | } 47 | .spinner span:nth-child(4) { 48 | margin-top: 9.3px; 49 | margin-left: 9px; 50 | border-radius: 50px 900px; 51 | } 52 | .spinner span:nth-child(5) { 53 | margin-top: -14px; 54 | margin-left: -0.3px; 55 | border-radius: 50px 900px; 56 | transform: rotate(45deg); 57 | } 58 | .spinner span:nth-child(6) { 59 | margin-top: 13px; 60 | margin-left: -0.3px; 61 | border-radius: 50px 900px; 62 | transform: rotate(45deg); 63 | } 64 | .spinner span:nth-child(7) { 65 | margin-top: 0px; 66 | margin-left: -14px; 67 | border-radius: 50px 900px; 68 | transform: rotate(137deg); 69 | } 70 | .spinner span:nth-child(8) { 71 | margin-top: 0px; 72 | margin-left: 13px; 73 | border-radius: 50px 900px; 74 | transform: rotate(135deg); 75 | } 76 | 77 | @keyframes spin { 78 | 0% { 79 | transform: scale(.9) rotate(360deg); 80 | } 81 | 50% { 82 | transform: scale(1.2) rotate(80deg); 83 | } 84 | 75% { 85 | transform: scale(1.2); 86 | } 87 | 100% { 88 | transform: scale(.9) rotate(-360deg); 89 | } 90 | } -------------------------------------------------------------------------------- /Dia25/README.md: -------------------------------------------------------------------------------- 1 |

Checkbox Animado - Efeito Neon

2 | 3 |


4 | 5 |

Desafio 25/30

6 | 7 | Utilizei input(tipo checkbox) para dar forma ao botão e para as tecnologias, span. 8 | Para personalizar o botão, usei as propriedades before e nth-child para cada div, com sua respectiva tecnologia. 9 | 10 | 11 | --- 12 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Checkbox Animado - Efeito Neon 7 | 8 | 9 | 10 | 11 |
12 |
13 | 17 |
18 |
19 | 23 |
24 |
25 | 29 |
30 |
31 | 35 |
36 |
37 | 41 |
42 |
43 | 47 |
48 |
49 | 53 |
54 |
55 | 59 |
60 |
61 | 62 | -------------------------------------------------------------------------------- /Dia25/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | background:rgb(28, 26, 26); 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | font-family: 'Lato', sans-serif; 10 | } 11 | 12 | .container { 13 | max-width: 600px; 14 | margin: 0 auto; 15 | display: flex; 16 | flex-wrap: wrap; 17 | } 18 | 19 | .container div { 20 | margin: 10px; 21 | } 22 | 23 | .container div label { 24 | cursor: pointer; 25 | } 26 | 27 | .container div label #checkbox { 28 | display: none; 29 | } 30 | 31 | .container div label span { 32 | position: relative; 33 | display: inline-block; 34 | background:#424242; 35 | padding: 15px 30px; 36 | color: rgb(100, 100, 100); 37 | text-shadow: 0 2px 4px rgba(0,0,0,.5); 38 | border-radius: 30px; 39 | font-size: 22px; 40 | transition: .5s; 41 | user-select: none; 42 | overflow: hidden; 43 | } 44 | 45 | .container div label span::before { 46 | content: ''; 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | width: 100%; 51 | height: 50%; 52 | background: rgba(255, 255, 255, .1); 53 | } 54 | 55 | .container div:nth-child(1) label #checkbox:checked ~ span{ 56 | background: #64DAFA; 57 | color: #fff; 58 | box-shadow: 0 2px 20px #64DAFA; 59 | } 60 | 61 | .container div:nth-child(2) label #checkbox:checked ~ span{ 62 | background: #00BB7C; 63 | color: #fff; 64 | box-shadow: 0 2px 20px #00BB7C; 65 | } 66 | 67 | .container div:nth-child(3) label #checkbox:checked ~ span{ 68 | background: #F7DD00; 69 | color: #fff; 70 | box-shadow: 0 2px 20px #F7DD00; 71 | } 72 | 73 | .container div:nth-child(4) label #checkbox:checked ~ span{ 74 | background: #5D71B6; 75 | color: #fff; 76 | box-shadow: 0 2px 20px #5D71B6; 77 | } 78 | 79 | .container div:nth-child(5) label #checkbox:checked ~ span{ 80 | background: #ED2F31; 81 | color: #fff; 82 | box-shadow: 0 2px 20px #ED2F31; 83 | } 84 | 85 | .container div:nth-child(6) label #checkbox:checked ~ span{ 86 | background: rgb(255,134,0); 87 | background: linear-gradient(0deg, rgba(255,134,0,1) 44%, rgba(1,114,182,1) 76%); 88 | color: #fff; 89 | box-shadow: 0 2px 20px rgb(255,134,0); 90 | } 91 | 92 | .container div:nth-child(7) label #checkbox:checked ~ span{ 93 | background: #693BB0; 94 | color: #fff; 95 | box-shadow: 0 2px 20px #693BB0; 96 | } 97 | 98 | .container div:nth-child(8) label #checkbox:checked ~ span{ 99 | background: #F43925; 100 | color: #fff; 101 | box-shadow: 0 2px 20px #F43925; 102 | } -------------------------------------------------------------------------------- /Dia26/README.md: -------------------------------------------------------------------------------- 1 |

Loading Diamante

2 | 3 |


4 | 5 |

Desafio 26/30 Para fazer o formato de diamante, utilizei uma div e 4 spans (com nth-child).

6 | 7 | ### Também usei as propriedades: 8 | - transform (skew) 9 | - z-index 10 | - border (style, width e color) 11 | 12 | --- 13 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loading Diamante 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /Dia26/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | background: black; 6 | overflow: hidden; 7 | } 8 | 9 | .container { 10 | height: 100%; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | 16 | .diamond { 17 | position: relative; 18 | transform: translate(-50%, -50%); 19 | width: 160px; 20 | 21 | animation: diamond 2s ease-in-out infinite; 22 | transition: .5s; 23 | } 24 | 25 | 26 | .face:nth-child(1) { 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | display: block; 31 | width: 50px; 32 | height: 50px; 33 | background-color: #00DBDE; 34 | background-image: linear-gradient(90deg, #FC00FF 0%, #00DBDE 100%); 35 | transform: skew(-30deg); 36 | z-index: 2; 37 | } 38 | 39 | .face:nth-child(1)::before { 40 | content: ''; 41 | position: absolute; 42 | top: 100%; 43 | left: 60px; 44 | width: 0; 45 | height: 0; 46 | border-style: solid; 47 | border-width: 108px 0 12px 50px; 48 | border-color: #e906ed transparent transparent transparent; 49 | transform: skew(45deg); 50 | } 51 | 52 | .face:nth-child(2) { 53 | position: absolute; 54 | top: 0; 55 | left: 35px; 56 | display: block; 57 | width: 90px; 58 | height: 50px; 59 | background-color: #00DBDE; 60 | background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 50%); 61 | z-index: 1; 62 | } 63 | 64 | .face:nth-child(2)::before { 65 | content: ''; 66 | position: absolute; 67 | top: 100%; 68 | left: -10px; 69 | width: 0; 70 | height: 0; 71 | border-top: 108px solid; 72 | border-left: 55px solid transparent; 73 | border-right: 55px solid transparent; 74 | color: #33AFDF; 75 | } 76 | 77 | .face:nth-child(3) { 78 | position: absolute; 79 | top: 0; 80 | right: 0; 81 | display: block; 82 | width: 50px; 83 | height: 50px; 84 | background-color: #00DBDE; 85 | background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); 86 | transform: skew(30deg); 87 | z-index: 2; 88 | } 89 | 90 | .face:nth-child(3)::before { 91 | content: ''; 92 | position: absolute; 93 | top: 100%; 94 | left: -108px; 95 | width: 0; 96 | height: 0; 97 | border-style: solid; 98 | border-width: 108px 50px 110px 0; 99 | border-color: #e906ed transparent transparent transparent; 100 | transform: skew(-45deg); 101 | } 102 | 103 | .face:nth-child(4) { 104 | position: absolute; 105 | top: -5px; 106 | left: 15px; 107 | display: block; 108 | width: 130px; 109 | height: 10px; 110 | border-radius: 50%; 111 | background-color: #33AFDF; 112 | z-index: 4; 113 | } 114 | 115 | @keyframes diamond { 116 | 0% {transform: translateY(0px);} 117 | 50% {transform: translateY(10px); opacity: .8;} 118 | 100% {transform: translateY(0px);} 119 | } -------------------------------------------------------------------------------- /Dia27/README.md: -------------------------------------------------------------------------------- 1 |

Efeito Fade em Textos

2 | 3 |


4 | 5 |

Desafio 27/30 6 | 7 | Para o efeito, utilizei a propriedade before, com backgound (linear-gradiente) do transparente ao branco. 8 | 9 | E como não utilizei JavaScript (o que ficaria melhor), acabei redirecionando para a página da documentação Mozilla. 10 | 11 |

12 | 13 | --- 14 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito Fade em Textos 7 | 8 | 9 | 10 |
11 |

CSS - MDN web docs moz://a

12 |

13 | CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML ou em XML (incluindo várias linguagens em XML como SVG, MathML ou XHTML). O CSS descreve como elementos são mostrados na tela, no papel, na fala ou em outras mídias. CSS é uma das principais linguagens da open web e é padronizada em navegadores web de acordo com as especificação da W3C. 14 |

15 |
16 | 17 |
18 | Saiba mais 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Dia27/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: content-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .container { 15 | position: relative; 16 | height: 310px; 17 | width: 260px; 18 | padding: 10px 25px; 19 | overflow: hidden; 20 | z-index: -1; 21 | background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%); 22 | border-radius: 5px; 23 | } 24 | 25 | .container::before { 26 | content: ''; 27 | position: absolute; 28 | left: 0; 29 | top: 0; 30 | width: 100%; 31 | height: 100%; 32 | background: linear-gradient(to bottom,transparent 150px,white); 33 | } 34 | 35 | .container h2 { 36 | margin-bottom: 15px; 37 | text-align: center; 38 | } 39 | 40 | .container p { 41 | font-size: 16px; 42 | font-family: Georgia, 'Times New Roman', Times, serif; 43 | text-align: justify; 44 | } 45 | 46 | .more a { 47 | display: inline-block; 48 | margin-top: 270px; 49 | margin-left: -210px; 50 | padding: 10px 15px; 51 | font-size: 18px; 52 | background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%); 53 | color: whitesmoke; 54 | border-radius: 10px; 55 | text-decoration: none; 56 | transition: .6s; 57 | } 58 | 59 | .more a:hover { 60 | transition: .6s; 61 | transform: scale(1.1); 62 | opacity: .8; 63 | } 64 | -------------------------------------------------------------------------------- /Dia28/README.md: -------------------------------------------------------------------------------- 1 |

Transição de Cores no Background

2 | 3 |


4 | 5 |

Desafio 28/30 6 | 7 | Para fazer a mudança de cores, utilizei um animation tanto para o background quanto para o texto 8 | 9 |

10 | 11 | --- 12 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transição de Cores no Background 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |

#30diasCSS

15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /Dia28/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | height: 100vh; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .container { 14 | width: 600px; 15 | height: 400px; 16 | background: yellow; 17 | animation: changedColor 10s infinite; 18 | transition: .5s; 19 | border: 5px dashed; 20 | border-radius: 4px; 21 | } 22 | 23 | .container h2 { 24 | text-align: center; 25 | margin-top: 30%; 26 | font-size: 40px; 27 | font-family: 'Montserrat', sans-serif; 28 | color: white; 29 | text-shadow: 2px 2px 3px black; 30 | animation: text 5s linear infinite; 31 | } 32 | 33 | @keyframes changedColor { 34 | 0% { background-color:#08fffc } 35 | 36 | 25% { background-color: #3a84fa } 37 | 38 | 50% { background-color: #cd0bf7 } 39 | 40 | 75% { background-color: #e95454 } 41 | 42 | 100% { background-color: #08fffc } 43 | } 44 | 45 | @keyframes text { 46 | 0% { transform: scale(.7);} 47 | 50% { transform: scale(.9);} 48 | 100% { transform: scale(.7);} 49 | } -------------------------------------------------------------------------------- /Dia29/README.md: -------------------------------------------------------------------------------- 1 |

Efeito Texto Gradiente

2 | 3 |


4 | 5 |

Desafio 29/30 6 | 7 | Para dar o efeito de degradê ao texto, utilizei um background linear gradient e as propriedades background-clip e text-fill-color. 8 | 9 |

10 | 11 | --- 12 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito Texto Gradiente 7 | 8 | 9 | 10 |
11 | gif magic 12 |

No, CSS!

13 |
14 | 15 | -------------------------------------------------------------------------------- /Dia29/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .layout { 7 | height: 100vh; 8 | background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080); 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | 13 | } 14 | 15 | .container { 16 | width: 90%; 17 | max-width: 400px; 18 | height: 500px; 19 | margin: 0 auto; 20 | padding: 30px; 21 | background: black; 22 | justify-content: center; 23 | border-radius: 5px; 24 | animation: pulse 2s linear infinite; 25 | } 26 | 27 | .container img { 28 | margin-left: -5px; 29 | width: 350px; 30 | height: 350px; 31 | border-radius: 5px; 32 | 33 | } 34 | 35 | .text{ 36 | display: block; 37 | font-size: 68px; 38 | font-family: 'Verdana', cursive; 39 | background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080); 40 | -webkit-background-clip: text; 41 | -webkit-text-fill-color: transparent; 42 | display: flex; 43 | align-items: center; 44 | justify-content: center; 45 | } 46 | 47 | @keyframes pulse { 48 | 30% { 49 | transform: scale(1.2); 50 | opacity: 0.9; 51 | box-shadow: black 3px 9px 5px; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /Dia3/README.md: -------------------------------------------------------------------------------- 1 |

Mudança de cor de texto quando entra em outra div

2 | 3 |


4 | 5 |

O Desafio 3/30 possui o efeito de deslocamento e ao passar do meio, mudar sua cor. 6 | 7 | Assim, foi necessário criar duas divs, ambas com 9 elementos iguais, para quando uma passar pelo meio e sumir, a outra comece, dando continuidade. 8 | 9 | Foi utilizado a propriedade animation com transform (translate). 10 | 11 | 12 | --- 13 | Desenvolvido com ❤ por Polyane Tuag 14 |

-------------------------------------------------------------------------------- /Dia3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mudança de cor de texto quando entra em outra div 7 | 8 | 9 | 10 | 11 |
12 | 13 | DESAFIO 14 | 30 15 | DIAS 16 | CSS 17 | - 18 | DESAFIO 19 | 30 20 | DIAS 21 | CSS 22 | 23 |
24 | 25 | DESAFIO 26 | 30 27 | DIAS 28 | CSS 29 | - 30 | DESAFIO 31 | 30 32 | DIAS 33 | CSS 34 | 35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /Dia3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | section { 7 | width: 100%; 8 | height: 100%; 9 | background: #EE82EE; 10 | box-sizing: border-box; 11 | overflow: hidden; 12 | position: absolute; 13 | } 14 | 15 | .wrapper { 16 | height: 100%; 17 | width: 50%; 18 | background: #C71585; 19 | overflow:hidden; 20 | color: #fafaf8; 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | border-right: 2px solid #262626; 25 | } 26 | 27 | .slide { 28 | position: absolute; 29 | top: 50%; 30 | white-space:nowrap; 31 | font-size: 14em; 32 | line-height: 220px; 33 | overflow: hidden; 34 | font-family: 'Anton', sans-serif; 35 | animation: animate 25s linear infinite; 36 | } 37 | 38 | @keyframes animate { 39 | 0% { 40 | transform: translate(0, -50%); 41 | } 42 | 100% { 43 | transform: translate(-50%, -50%); 44 | } 45 | } -------------------------------------------------------------------------------- /Dia30/README.md: -------------------------------------------------------------------------------- 1 |

Efeito Partículas

2 | 3 |


4 | 5 |

Desafio 30/30 6 | 7 | Neste exercício, utilizei a propriedade canvas e um h1 e todo o efeito foi realizado através do JavaScript. 8 | 9 |

10 | 11 | --- 12 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito Partículas 7 | 8 | 9 | 10 | 11 |

#30DiasCss Finalizado!!!

12 | 13 | 14 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /Dia30/style.css: -------------------------------------------------------------------------------- 1 | .layout { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | width: 100%; 6 | cursor: pointer; 7 | } 8 | 9 | #canvas { 10 | border: 1px solid; 11 | } 12 | 13 | .title { 14 | display: inline-block; 15 | position: absolute; 16 | padding: 20px; 17 | top: 50%; 18 | left: 50%; 19 | user-select: none; 20 | transform: translate(-50%,-50%); 21 | color: rgba(255,255,255,.68); 22 | /* border: .075em solid rgba(255,255,255,.1); */ 23 | } 24 | -------------------------------------------------------------------------------- /Dia4/README.md: -------------------------------------------------------------------------------- 1 |

Botão com efeito

2 | 3 |


4 | 5 |

Desafio 4/30
6 | Para aplicar esse efeito, utiliza-se a propriedade hover, juntamente com um after e before (para criar a animação) 7 |

8 | 9 | --- 10 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Botão com efeito 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /Dia4/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Balsamiq Sans', cursive; 5 | } 6 | 7 | .conteiner { 8 | display: flex; 9 | height: 100vh; 10 | background:#87CEFF; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .botao { 16 | background: none; 17 | color: #0000CD; 18 | height: 100px; 19 | font-size: 18px; 20 | border:4px solid ; 21 | padding: 20px; 22 | cursor: pointer; 23 | border-radius: 5px; 24 | position: relative; 25 | text-decoration: underline rgb(251, 247, 247); 26 | text-underline-position: under; 27 | } 28 | 29 | 30 | .botao::before , .botao::after { 31 | content: ""; 32 | position: absolute; 33 | width: 30px; 34 | height: 4px; 35 | background:#87CEFF; 36 | transform: skew(-70deg); 37 | transition: 1s ease-in-out; 38 | } 39 | 40 | .botao::before { 41 | top: -4px; 42 | left: 10%; 43 | } 44 | 45 | .botao::after { 46 | bottom: -4px; 47 | right: 10%; 48 | } 49 | 50 | .botao:hover::before { 51 | left: 80%; 52 | } 53 | 54 | .botao:hover::after { 55 | right: 80%; 56 | } 57 | -------------------------------------------------------------------------------- /Dia5/README.md: -------------------------------------------------------------------------------- 1 |

Efeito Pulsar

2 | 3 |


4 | 5 |

Desafio 5/30
6 | Para criar o efeito de "pulsar", foi utilizado animation e @keyframes, com a propriedade transform(scale) - para aumentar o pulso. 7 | 8 |

9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito Pulsar 7 | 8 | 9 | 10 | 11 |
12 |
Pulse
13 |
14 | 15 | -------------------------------------------------------------------------------- /Dia5/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background: #1C1C1C; 8 | } 9 | 10 | .alignment { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | 15 | } 16 | 17 | .container { 18 | height: 100vh; 19 | 20 | 21 | } 22 | 23 | .pulse { 24 | width:80px; 25 | height: 80px; 26 | background: radial-gradient(#FF00FF,#EE00EE,#CD00CD, #8B008B); 27 | font-family: 'Amatic SC', cursive; 28 | font-size: 30px; 29 | border-radius: 50%; 30 | color: #363636; 31 | animation: pulsar 1.3s infinite; 32 | } 33 | 34 | 35 | 36 | @keyframes pulsar { 37 | 30% { 38 | transform: scale(1.2); 39 | opacity: 0.7; 40 | box-shadow: white 0em 0em 0.6em; 41 | } 42 | } -------------------------------------------------------------------------------- /Dia6/README.md: -------------------------------------------------------------------------------- 1 |

Efeito Lightning Text

2 | 3 |


4 | 5 |

Para o Desafio 6/30, foi necessário criar um span para cada elemento e aplicar um animation delay com timers diferentes. 6 | 7 | 8 |

9 | 10 | --- 11 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito Lightning Text 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | # 16 | 3 17 | 0 18 | D 19 | I 20 | A 21 | S 22 | C 23 | S 24 | S 25 | 26 |
27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /Dia6/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background: black; 8 | } 9 | 10 | .alignment { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | 15 | } 16 | .container { 17 | height: 100vh; 18 | } 19 | 20 | .span-container { 21 | width: 200px; 22 | height: 200px; 23 | font-family: 'Acme', sans-serif; 24 | font-size: 50px; 25 | } 26 | .elements span { 27 | letter-spacing: 3px; 28 | color: var(--color-green-dark); 29 | --color-green-dark: #023f02; 30 | --color-green-light:#3FFF00; 31 | animation: light 2s steps(5, jump-start) infinite; 32 | } 33 | 34 | #one { 35 | animation-delay: 0s; 36 | } 37 | #two { 38 | animation-delay: .2s; 39 | } 40 | #three { 41 | animation-delay: .4s; 42 | } 43 | #four { 44 | animation-delay: .6s; 45 | } 46 | #five { 47 | animation-delay: .8s; 48 | } 49 | #six { 50 | animation-delay: 1s; 51 | } 52 | #seven { 53 | animation-delay: 1.2s; 54 | } 55 | #eight { 56 | animation-delay: 1.4s; 57 | } 58 | #nine { 59 | animation-delay: 1.6s; 60 | } 61 | #ten { 62 | animation-delay: 1.8s; 63 | } 64 | 65 | @keyframes light { 66 | 0% { 67 | color:var(--color-green-dark); 68 | text-shadow: none; 69 | } 70 | 90% { 71 | color:var(--color-green-dark); 72 | text-shadow: none; 73 | } 74 | 100% { 75 | color: var(--color-green-light); 76 | text-shadow: 0 0 5px yellowgreen; 77 | } 78 | } -------------------------------------------------------------------------------- /Dia7/README.md: -------------------------------------------------------------------------------- 1 | 2 |

Preloader Animado

3 | 4 |


5 | 6 |

O Desafio 7/30 consistiu na criação de um preloader com esse efeito "blocado". 7 | 8 | Desse modo, o dividi em 12 etapas com timers diferentes (Um movimento e duas paradas), utilizando as propriedades de animation CSS. 9 | 10 | O código ficou extenso (possível refatoração), porém bem explicativo e atendeu à resolução do exercício. 11 | 12 |

13 | 14 | --- 15 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Preloader Animado 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Dia7/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .alignment { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | 12 | .container { 13 | height: 100vh; 14 | background: linear-gradient(red,orangered,orange, gold); 15 | } 16 | 17 | .square { 18 | width: 120px; 19 | height: 120px; 20 | position: relative; 21 | 22 | } 23 | 24 | .box { 25 | height: 25px; 26 | width: 25px; 27 | background: white; 28 | border-radius: 3px; 29 | position: absolute; 30 | margin: 5px; 31 | 32 | animation: 3s ease-in-out infinite; 33 | } 34 | 35 | #square-one { 36 | top: 20px; 37 | right: 60px; 38 | 39 | animation-name: block-1; 40 | } 41 | #square-two { 42 | top: 50px; 43 | right: 60px; 44 | 45 | animation-name: block-2; 46 | animation-delay: .2s; 47 | } 48 | #square-three { 49 | top: 50px; 50 | right: 30px; 51 | 52 | animation-name: block-3; 53 | animation-delay: .3s; 54 | 55 | } 56 | 57 | @keyframes block-1 { 58 | 0% { 59 | top: 20px; 60 | right: 60px; 61 | } 62 | 8% { 63 | top: 20px ; 64 | right: 30px; 65 | } 66 | 16% { 67 | top: 20px ; 68 | right: 30px; 69 | } 70 | 24% { 71 | top: 20px ; 72 | right: 30px; 73 | } 74 | 32% { 75 | top: 50px ; 76 | right: 30px; 77 | } 78 | 40% { 79 | top: 50px ; 80 | right: 30px; 81 | } 82 | 48% { 83 | top: 50px ; 84 | right: 30px; 85 | } 86 | 56% { 87 | top: 50px ; 88 | right: 60px; 89 | } 90 | 64% { 91 | top: 50px; 92 | right: 60px ; 93 | } 94 | 72% { 95 | top: 50px; 96 | right: 60px ; 97 | } 98 | 80% { 99 | top: 20px; 100 | right: 60px; 101 | } 102 | 88% { 103 | top: 20px; 104 | right: 60px; 105 | } 106 | 96% { 107 | top: 20px; 108 | right: 60px; 109 | } 110 | } 111 | 112 | 113 | @keyframes block-2 { 114 | 0% { 115 | top:50px; 116 | right: 60px; 117 | } 118 | 8% { 119 | top: 20px; 120 | right: 60px; 121 | } 122 | 16% { 123 | top: 20px; 124 | right: 60px; 125 | } 126 | 24% { 127 | top: 20px; 128 | right: 60px; 129 | } 130 | 32% { 131 | top: 20px; 132 | right: 30px; 133 | } 134 | 40% { 135 | top: 20px; 136 | right: 30px; 137 | } 138 | 48% { 139 | top: 20px; 140 | right: 30px; 141 | } 142 | 56% { 143 | top: 50px ; 144 | right: 30px; 145 | } 146 | 64% { 147 | top: 50px ; 148 | right: 30px; 149 | } 150 | 72% { 151 | top: 50px; 152 | right: 30px; 153 | } 154 | 80% { 155 | top:50px; 156 | right: 60px; 157 | } 158 | 88% { 159 | top:50px; 160 | right: 60px; 161 | } 162 | 96% { 163 | top: 50px; 164 | right: 60px; 165 | } 166 | } 167 | 168 | 169 | @keyframes block-3 { 170 | 0% { 171 | top: 50px; 172 | right: 30px; 173 | } 174 | 8% { 175 | top: 50px; 176 | right: 60px; 177 | } 178 | 16% { 179 | top: 50px; 180 | right: 60px; 181 | } 182 | 24% { 183 | top: 50px; 184 | right: 60px; 185 | } 186 | 32% { 187 | top: 20px; 188 | right: 60px; 189 | } 190 | 40% { 191 | top: 20px; 192 | right: 60px; 193 | } 194 | 48% { 195 | top: 20px; 196 | right: 60px; 197 | } 198 | 56% { 199 | top: 20px; 200 | right: 30px; 201 | } 202 | 64% { 203 | top: 20px; 204 | right: 30px; 205 | } 206 | 72% { 207 | top: 20px; 208 | right: 30px; 209 | } 210 | 80% { 211 | top: 50px; 212 | right: 30px; 213 | } 214 | 88% { 215 | top: 50px; 216 | right: 30px; 217 | } 218 | 96% { 219 | top: 50px; 220 | right: 30px; 221 | } 222 | } -------------------------------------------------------------------------------- /Dia8/README.md: -------------------------------------------------------------------------------- 1 | 2 |

Coração Batendo

3 | 4 |


5 | 6 |

Desafio 8/30
7 | Para criar o coração, utilizei as propriedades animation e after/before, com rotação à 45deg. 8 | 9 | Nesse caso, o keyframes(para a simulação das batidas), foi aplicado tanto para o coração quanto para o background. 10 | 11 |

12 | 13 | --- 14 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coração batendo 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Dia8/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .alignment { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | 12 | .container { 13 | height: 100vh; 14 | animation: wallpaper 1.2s linear infinite; 15 | } 16 | 17 | .heart { 18 | position: absolute; 19 | width: 80px; 20 | height: 80px; 21 | background:linear-gradient(#FF0000,#EE0000, #CD0000); 22 | transform: rotate(-45deg); 23 | animation: beat 1.5s linear infinite; 24 | 25 | } 26 | 27 | .heart::after { 28 | content: ""; 29 | position: absolute; 30 | background: inherit; 31 | border-radius: 50%; 32 | width: 80px; 33 | height: 80px; 34 | top:0px; 35 | left: 40px; 36 | } 37 | 38 | .heart::before { 39 | content: ""; 40 | position: absolute; 41 | background:linear-gradient(#EE0000,#FF0000, #CD0000); 42 | transform: rotate(184deg); 43 | border-radius: 50%; 44 | width: 80px; 45 | height: 80px; 46 | top:-40px; 47 | left: 0px; 48 | } 49 | 50 | @keyframes wallpaper { 51 | 0% { 52 | background: black; 53 | } 54 | 50% { 55 | background: rgb(14, 13, 13); 56 | } 57 | 100% { 58 | background: black; 59 | } 60 | } 61 | 62 | @keyframes beat{ 63 | 0% { 64 | transform: scale(1) rotate(-45deg); 65 | } 66 | 35% { 67 | transform: scale(1.5) rotate(-45deg); 68 | } 69 | 70% { 70 | transform: scale(1) rotate(-45deg); 71 | } 72 | 85% { 73 | transform: scale(1.5) rotate(-45deg); 74 | } 75 | 100% { 76 | transform: scale(1) rotate(-45deg); 77 | } 78 | } -------------------------------------------------------------------------------- /Dia9/README.md: -------------------------------------------------------------------------------- 1 |

Pêndulo de Newton

2 | 3 |


4 | 5 |

Desafio 9/30
6 | 7 | Para fazer as bolas, criei cinco divs com a mesma classe e utilizei :before(pseudo-element) para posicioná-las. 8 | 9 | As animações foram divididas em quatro tempos, em diferentes posições. 10 | 11 | Uma propriedade interessante é o transform-origin, que foi usado para "grudar" as linhas no suporte, movimentando somente a parte de baixo. 12 |

13 | 14 | --- 15 | Desenvolvido com ❤ por Polyane Tuag -------------------------------------------------------------------------------- /Dia9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pêndulo de Newton 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /Dia9/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | background: black; 6 | } 7 | .alignment { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .container { 14 | width: 400px; 15 | height: 420px; 16 | background: black; 17 | } 18 | 19 | .board { 20 | width: 400px; 21 | height: 8px; 22 | background: #4F4F4F; 23 | border-radius: 2px; 24 | } 25 | 26 | .balls { 27 | display: flex; 28 | justify-content: space-evenly; 29 | } 30 | 31 | .ball { 32 | display: inline-block; 33 | height: 260px; 34 | width: 3px; 35 | border-radius: 2px; 36 | background: #4F4F4F; 37 | position: relative; 38 | transform-origin: top; 39 | 40 | } 41 | 42 | .ball::before { 43 | content: ""; 44 | position: absolute; 45 | width: 68px; 46 | height: 68px; 47 | background: radial-gradient(#E8E8E8, #CFCFCF,#B5B5B5, #9C9C9C, #828282, #696969, #4F4F4F, #363636, #1C1C1C ); 48 | border-radius: 100%; 49 | top: 100%; 50 | left: -32px; 51 | } 52 | 53 | .ball:first-child { 54 | animation: left-ball 1s linear infinite; 55 | transform-origin: top; 56 | } 57 | 58 | .ball:last-child { 59 | animation: right-ball 1s linear infinite; 60 | transform-origin: top; 61 | animation-delay: .5s; 62 | } 63 | 64 | @keyframes left-ball { 65 | 0% , 50% , 100% { 66 | transform: rotate(0deg); 67 | } 68 | 25% { 69 | transform: rotate(50deg) 70 | } 71 | } 72 | 73 | @keyframes right-ball { 74 | 0% , 50% , 100% { 75 | transform: rotate(0deg); 76 | } 77 | 25% { 78 | transform: rotate(-50deg) 79 | } 80 | } 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | /* 89 | 90 | .balls { 91 | display: flex; 92 | width: 200px; 93 | margin: 300px 10px 10px 180px; 94 | } 95 | 96 | .ball { 97 | width: 34px; 98 | height: 33px; 99 | background: blue; 100 | border-radius: 50%; 101 | } 102 | 103 | .ball:nth-child(1) { 104 | animation: left 2s ease-in-out infinite; 105 | transform: translateX(-50%); 106 | } 107 | 108 | .ball:nth-child(5) { 109 | animation: right 2s ease-in-out infinite; 110 | transform-origin: top; 111 | } 112 | 113 | @keyframes left { 114 | 0% , 50% , 100% { 115 | transform: rotate(0deg); 116 | } 117 | 25% { 118 | transform: rotate(30deg) 119 | } 120 | } 121 | 122 | @keyframes right { 123 | 0% , 50% , 100% { 124 | transform: rotate(0deg); 125 | } 126 | 25% { 127 | transform: rotate(-30deg) 128 | } 129 | } */ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

▪ 30 dias de CSS🖌▪

4 | 5 | ### 📚Sobre 6 | 7 | O desafio ***30 dias de CSS*** visa ajudá-lo a melhorar suas habilidades de codificação em *HTML5* e *CSS3* com a a prática de programação na criação de mini projetos diários.

8 | 9 | 10 | --- 11 | ### 🎯Objetivo 12 | 13 | Criar pequenos projetos com *HTML* E *CSS* durante 30 dias. 14 | 15 | --- 16 | 17 | ### 💣Desafios diários 18 | 19 | - Desafio 1 - Ícone de mídia social em camadas 20 |

21 | 22 |


23 | 24 | - Desafio 2 - Loader Animado 25 |

26 | 27 |


28 | 29 | - Desafio 3 - Mudança de cor de texto quando entra em outra div 30 |

31 | 32 |


33 | 34 | - Desafio 4 - Botão com efeito 35 |

36 | 37 |


38 | 39 | - Desafio 5 - Efeito pulsar 40 |

41 | 42 |


43 | 44 | - Desafio 6 - Efeito Lightning Text 45 |

46 | 47 |


48 | 49 | - Desafio 7 - Preloader Animado 50 |

51 | 52 |


53 | 54 | - Desafio 8 - Coração Batendo 55 |

56 | 57 |


58 | 59 | - Desafio 9 - Pêndulo de Newton 60 |

61 | 62 |


63 | 64 | - Desafio 10 - Animação Texto Alternando 65 |

66 | 67 |


68 | 69 | - Desafio 11 - Botão com Efeito Hover 70 |

71 | 72 |


73 | 74 | - Desafio 12 - Efeito de Preenchimento ao passar o mouse 75 |

76 | 77 |


78 | 79 | - Desafio 13 - Loading com Efeito Ondas 80 |

81 | 82 |


83 | 84 | - Desafio 14 - Fundo de texto animado 85 |

86 | 87 |


88 | 89 | - Desafio 15 - Efeito Flutuante 90 |

91 | 92 |


93 | 94 | - Desafio 16 - Botão com Efeito Checked 95 |

96 | 97 |


98 | 99 | - Desafio 17 - Loader Animado (Efeito Flip) 100 |

101 | 102 |


103 | 104 | - Desafio 19 - Background Animado - Caixas Flutuantes 105 |

106 | 107 |


108 | 109 | - Desafio 20 - Botão com Efeito para Ajuda/Informação 110 |

111 | 112 |


113 | 114 | - Desafio 21 - Efeito Loading 115 |

116 | 117 |


118 | 119 | - Desafio 22 - Menu Hamburguer 120 |

121 | 122 |


123 | 124 | - Desafio 23 - Botão Efeito Liquid Fill 125 |

126 | 127 |


128 | 129 | - Desafio 24 - Flor Spinner 130 |

131 | 132 |


133 | 134 | - Desafio 25 - Checkbox Animado - Efeito Neon 135 |

136 | 137 |


138 | 139 | - Desafio 26 - Loading Diamante 140 |

141 | 142 |


143 | 144 | - Desafio 27 - Efeito Fade em Textos 145 |

146 | 147 |


148 | 149 | - Desafio 28 - Transição de Cores no Background 150 |

151 | 152 |


153 | 154 | - Desafio 29 - Efeito Texto Gradiente 155 |

156 | 157 |


158 | 159 | - Desafio 30 - Efeito Partículas 160 |

161 | 162 |


163 | --- 164 | 165 | Desenvolvido com ❤ por Polyane Tuag 166 | --------------------------------------------------------------------------------