O documento discute como ilustrações e jogos feitos apenas com HTML e CSS podem ser úteis para aprender conceitos CSS. Uma pesquisa mostra que 100% dos entrevistados afirmam que tentar criar esses projetos os ajudou a aprender seletores, pseudo-classes, posicionamento e criatividade. Exemplos demonstram como decompor um desenho em formas geométricas e como criar um jogo da memória sem JavaScript usando apenas inputs e labels.

1. O que posso aprender com
desenhos e jogos em CSS?
Giulia Cardieri

2. Oi, eu sou a Giulia Cardieri
Mestranda na UFSCar Sorocaba
Desenvolvedora Front-end na Toptal
Tenho um dinossauro, o Dinokiki
@ggiulia

3. Pesquisa sobre
desenhos e jogos
em CSS

5. 60 Participantes

6. Você já ouviu falar
sobre ilustrações
e/ou jogos feitos
somente com
HTML + CSS?

7. 77% Sim
23% Não

9. Você já fez alguma
ilustração com
CSS?

10. 77% Não

12. Você já fez algum
tipo de jogo
usando somente
CSS?

13. 97% Não

15. "Ai, nem vou fazer
esse troços de só
CSS pq não vai
ajudar em nada
minha carreira "

16. Não é bem assim...

18. 100% afirmam que
ilustrações/jogos em
CSS ajudou a aprender
alguma coisa!!!

19. Ajudou a aprender
o que?

20. 86% Seletores CSS

21. 71% Pseudo-classes

22. 93% Limites e uso
de tags HTML

23. 100%
Posicionamento CSS

24. 100% Exercitar a
criatividade

26. "Mas você tem que
ser super criativa
pra isso! "

28. Dica: reproduzir
em CSS um
desenho que já
existe

31. Ideias legais pakas
dribbble.com

34. Mas mesmo com
um desenho do
Dribble eu não sei
como começar!

35. Ciclo de um desenho em CSS
1. Separar o desenho em formas geométricas básicas
Exemplos: círculo, quadrado, retângulo, oval...
2. Criar uma <div> de HTML para representar um pedaço da
imagem
3. Adicionar uma Classe para cada div/pedaço da imagem
4. Estilizar com CSS a Classe
5. Repetir esse processo até seu desenho ficar completo

36. PS: Border e
Box-Shadow
também podem
ajudar

39. <div class="cabeca"></div>

40. CSS da Cabeça
.cabeca {
background-color: #777777;
border-radius: 100%;
height: 200px;
width: 200px;
}

41. <div class="olho"></div>
<div class="centro_do_olho"></div>

42. CSS dos olhos
.olho {
background-color: #FFF;
border-radius: 100%;
height: 20px;
width: 20px;
}

43. As próximas seriam
divs para as orelhas.
Ou nariz...
Você decide

44. "Legal, mas eu não
tenho ideia de
como fazer um jogo
só com CSS "

46. Um jogo da
memória espacial

47. Sem imagens

48. Sem JavaScript

49. Sem
Pré-processadores
CSS

50. Responsivo

51. Eita, isso é
jogável?

53. Como você
desenhou isso?

55. Vamos entender
um pouco a lógica
do jogo...

56. Como clicar sem
ter um evento JS
onClick?

57. Label + Checkbox =

58. LabelCheckbox

59. Label

60. Checkbox

61. Checkbox com display: none;

62. <input id="mars" type="checkbox" />
<label for="mars" class="card card--mars">
<section class="card__front">
<!-- estrelas →
</section>
<section class="card__back">
<section class="mars"></section>
<p>Mars</p>
</section>
</label>

63. <input id="mars" type="checkbox" />
<label for="mars" class="card card--mars">
<section class="card__front">
<!-- estrelas →
</section>
<section class="card__back">
<section class="mars"></section>
<p>Mars</p>
</section>
</label>

64. <input id="mars" type="checkbox" />
<label for="mars" class="card card--mars">
<section class="card__front">
<!-- estrelas →
</section>
<section class="card__back">
<section class="mars"></section>
<p>Mars</p>
</section>
</label>

65. <input id="mars" type="checkbox" />
<label for="mars" class="card card--mars">
<section class="card__front">
<!-- estrelas →
</section>
<section class="card__back">
<section class="mars"></section>
<p>Mars</p>
</section>
</label>

66. Clicou no card ->
O checkbox muda seu estado ->
Troca a parte visível do card

67. if (estrelas == visível) -> esconde as
estrelas e mostra a terra

68. Lógica:
if (estrelas == visível) -> esconde as estrelas e mostra a terra
CSS
/* esconde estrelas */
#terra1:checked ~ .card--terra1 .card__front {
display: none;
}
/* mostra terra */
#terra1:checked ~ .card--terra1 .card__back {
display: flex;
}

69. else if (terra == visivel) -> mostra
estrelas e esconde a terra

70. Lógica:
else if (terra == visivel) -> mostra estrelas e esconde terra
(estado inicial)
CSS:
/* esconder a terra - volta ao estado inicial, antes da checkbox ser selecionada */
.card__back {
display: none;
}
/* mostra as estrelas */
.card__front {
display: flex;
}

71. if (terra1 == visivel) && (terra2 ==
visivel) -> deixa o fundo mais
escuro

72. Lógica:
If (terra1 == visivel) && (terra2 == visivel) -> deixa o fundo mais
escuro
CSS:
#terra1:checked + #terra2:checked ~ .card--terra1 .card__back,
#terra1:checked + #terra2:checked ~ .card--terra2 .card__back {
background-color: var(--cor-mais-escura);
}

73. O que você
aprendeu fazendo
esse jogo e esses
desenhos?

74. 1. CSS Grid

75. 2. Variáveis em
CSS

76. 3. Limites das tags
input (checkbox) e
label

77. 4. Animações e
transições em CSS

78. E provavelmente
mais...

79. E ai? Já se
convenceu a fazer
um jogo ou
ilustração em CSS?

80. Links e talks legais pra isso
Jogos indo além do simples CSS - Fernanda Bernardo -
https://www.slideshare.net/fehbernardo/jogos-30 (slides)
https://www.facebook.com/codamosclub/videos/762136873993567/?t=2639 (vídeo)
A Beginner's Guide to Pure CSS images - Michael Mangialardi
https://codepen.io/mikemang/post/a-beginner-s-guide-to-pure-css-images (texto)
An Intermediate Guide to Pure CSS images - Michael Mangialardi
https://codepen.io/mikemang/post/an-intermediate-guide-to-pure-css-images (texto)

81. Obrigada!
ggiulia
giulia.cardieri@gmail.com