Na semana passada lançamos aqui um desafio: Fazer um sol estiloso, usando apenas CSS!

Confira aqui o Desafio CSS – Criar um Sol estiloso.

Foram nada menos que 71 propostas, alguns até arriscaram a fazer o sol girar! Pela quantidade, tive que aumentar um pouco o nível de apuração, assim os que fugiram um bocado do visual, seja por alinhamento, estilo da borda, tamanho ou não utilização dos degradês, não participarão do sorteio. Então, das 71 propostas, 48 estavam corretíssimas, 9 estavam corretas mas fugiram um pouco do visual proposto, e 14 estavam erradas.

Agradeço a todos os participantes, seja acertando ou não, o importante é participar e brincar CSS. Fico muito feliz com os e-mails que recebo agradecendo pela criação dos desafios, pois me fazem pensar em fazer cada vez mais!

Segue a lista dos acertadores:

1. Acauã Montiel
2. Alexandre Custódio & Moacir Selinger
3. Allan Carvalho
4. Allef Bruno
5. Anderson Diego
6. Benício Ribeiro
7. Cesar Denis
8. Cezar Luiz
9. Daniel Franca
10. Diego Griep
11. Diego Rocha
12. Diogo Rodrigues
13. Douglas Doro
14. Fabrício Matte
15. Felpe Mesquita
16. Fernando Daciuk
17. Gabriel Barbier
18. Gabriel Hesedis
19. Gabriel Lamas
20. Gabriel Teixeira
21. Igor Pimentel
22. João Victor
23. Kevin Couto
24. Leandro Dias
25. Leandro Diniz
26. Lucas Mendonça
27. Luciano Monegatto
28. Luiz Tanure
29. Marcellus Manhaes
30. Marlon Carlini
31. Marta Ravache
32. Matheus Kautzmann
33. Maycon Heerdt
34. Pedro Antunes
35. Rafael Crispin
36. Rafael Gomes
37. Ramon Victor
38. Ricardo da Conceição
39. Ricardo Gonçalves
40. Roberto Salinas
41. Thiago Alves
42. Thiago Moura
43. Vilson Ferrari
44. Vinicius Ortiz
45. Vitor Pavani
46. Wagner Moschini
47. Wallace Erick
48. Wellington Oliveira

Segue a lista dos que fugiram um pouco do visual proposto, mas conseguiram desenvolver o sol:

1. Bruno Queiros
2. Evandro Oliveira
3. Felipe Morais
4. Luiz Tiago Oliveira
5. Raimundo Eduardo
6. Ricardo Souza
7. Rodrigo Silva
8. Rodrigo Souza
9. Thiago Peixoto

Fizemos o sorteio em cima dos acertadores utilizando o random.org, eis o ganhador de um curso online do iMasters PRO mais um kit iMasters (camiseta, paper toy do cubo iMasters, buttons, etc).

1. Fabrício Matte

Show me the code!

Vi algumas soluções bem legais, como fazer todo as 3 evoluções de cores em um único degradee, daí utilizaram o after e before apenas para gerar os tracejados dos círculos

Antes de irmos ao código final, é bom considerar que esse desafio tem uma pegadinha, a maioria das pessoas descobriram. Os dentes do sol são feitos através do border-style DOTTED, o problema é que o Firefox tem um bug que não mostra o border-style quando se usa border-radius. Porém, nos navegadores webkit a tecnica funciona perfeitamente.

Os 3 círculos foram formados através da classe .sun, .sun:after e .sun:before. Todas elas possuem um degradê e a técnica do border-style mencionada acima. Vamos ao código final:

body {
 background:#f5f5f5;
 padding:50px;
}
.sun {
 margin: 100px auto;
 position:relative;
 background:red;
 border-radius: 50%;
 width:300px;
 height:300px;
 border:8px dotted #f5f5f5;
 background-image: -webkit-radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
 background-image: -moz-radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
 background-image: -o-radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
 background-image: -ms-radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
 background-image: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
}
.sun:before {
 background: rgb(255,162,0);
 background-image: -webkit-radial-gradient(circle, rgba(255,0,0,0) 50%, rgba(255,0,0,.6));
 background-image: -moz-radial-gradient(circle, rgba(255,0,0,0) 50%, rgba(255,0,0,.6));
 background-image: -o-radial-gradient(circle, rgba(255,0,0,0) 50%, rgba(255,0,0,.6));
 background-image: -ms-radial-gradient(circle, rgba(255,0,0,0) 50%, rgba(255,0,0,.6));
 background-image: radial-gradient(circle, rgba(255,0,0,0) 50%, rgba(255,0,0,.6));
 content: "";
 border-radius: 50%;
 border:8px dotted red;
 width: 200px;
 height:200px;
 position: absolute;
 top:42px;
 left:42px;
}
.sun:after {
 background:yellow;
 background-image: -webkit-radial-gradient(circle, rgba(255,162,0,0) 50%, rgba(255,162,0,.6));
 background-image: -moz-radial-gradient(circle, rgba(255,162,0,0) 50%, rgba(255,162,0,.6));
 background-image: -o-radial-gradient(circle, rgba(255,162,0,0) 50%, rgba(255,162,0,.6));
 background-image: -ms-radial-gradient(circle, rgba(255,162,0,0) 50%, rgba(255,162,0,.6));
 background-image: radial-gradient(circle, rgba(255,162,0,0) 50%, rgba(255,162,0,.6));
 content: "";
 border-radius: 50%;
 border:8px dotted rgb(255,162,0);
 width: 100px;
 height:100px;
 position: absolute;
 top:92px;
 left:92px;
}

Você também pode conferir o resultado aqui:

Gostou? Então compartilhe com seus amigos e participe do próximo desafio!