Jogos: indo além do simples CSS 3.0
-
Upload
fernanda-bernardo -
Category
Technology
-
view
383 -
download
5
Transcript of Jogos: indo além do simples CSS 3.0
![Page 1: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/1.jpg)
Jogos: indo além do simples CSS
Fernanda Bernardo
![Page 2: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/2.jpg)
![Page 3: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/3.jpg)
![Page 4: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/4.jpg)
![Page 5: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/5.jpg)
![Page 6: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/6.jpg)
![Page 7: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/7.jpg)
![Page 8: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/8.jpg)
![Page 9: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/9.jpg)
![Page 10: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/10.jpg)
![Page 11: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/11.jpg)
![Page 12: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/12.jpg)
![Page 13: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/13.jpg)
![Page 14: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/14.jpg)
![Page 15: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/15.jpg)
![Page 16: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/16.jpg)
Fernanda BernardoEngenheira de Software @Elo7
Mentora @Training Center
http://fernandabernardo.com.br
@Feh_Bernardo
![Page 17: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/17.jpg)
![Page 18: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/18.jpg)
![Page 19: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/19.jpg)
GIFS ❤❤❤
![Page 20: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/20.jpg)
Repositório: http://bit.ly/2c2RsV1
Palestra: http://bit.ly/2cbNs6h
![Page 21: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/21.jpg)
Repositório: http://bit.ly/2c2RsV1
Palestra: http://bit.ly/2cbNs6h
![Page 22: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/22.jpg)
Repositório: http://bit.ly/2eLXyeP
Palestra: http://bit.ly/2xDU5qq
![Page 23: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/23.jpg)
Repositório: http://bit.ly/2eLXyeP
Palestra: http://bit.ly/2xDU5qq
![Page 24: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/24.jpg)
![Page 25: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/25.jpg)
![Page 26: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/26.jpg)
![Page 27: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/27.jpg)
![Page 28: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/28.jpg)
![Page 29: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/29.jpg)
Porque só CSS?
![Page 30: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/30.jpg)
Divertido
![Page 31: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/31.jpg)
Desafio
![Page 32: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/32.jpg)
Aprendizado
![Page 33: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/33.jpg)
![Page 34: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/34.jpg)
![Page 35: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/35.jpg)
We
CSS
![Page 36: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/36.jpg)
We
CSS
![Page 37: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/37.jpg)
![Page 38: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/38.jpg)
![Page 39: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/39.jpg)
![Page 40: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/40.jpg)
![Page 41: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/41.jpg)
![Page 42: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/42.jpg)
![Page 43: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/43.jpg)
Como representar os elementos
básicos do jogo?
![Page 44: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/44.jpg)
![Page 45: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/45.jpg)
![Page 46: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/46.jpg)
![Page 47: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/47.jpg)
![Page 48: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/48.jpg)
<div class=“container”>
</div>
![Page 49: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/49.jpg)
.container {
}
<div class=“container”>
</div>
![Page 50: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/50.jpg)
.container {
}
<div class=“container”>
</div>
width: 100vw;height: 100vh;
![Page 51: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/51.jpg)
cursor: url('images/bob.png'), default;
.container {
}
<div class=“container”>
</div>
width: 100vw;height: 100vh;
![Page 52: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/52.jpg)
![Page 53: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/53.jpg)
![Page 54: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/54.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
![Page 55: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/55.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
![Page 56: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/56.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
VW VH
![Page 57: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/57.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
Viewport Width Viewport Height
![Page 58: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/58.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
vmax vmin
![Page 59: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/59.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
vmax vmin
![Page 60: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/60.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
![Page 61: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/61.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
cursor:
![Page 62: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/62.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
cursor: default;
![Page 63: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/63.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
cursor: pointer;
![Page 64: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/64.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
cursor: url('images/bob.png'),default;
![Page 65: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/65.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
cursor: url('images/bob.png'),default;
![Page 66: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/66.jpg)
.container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default;
box-sizing: border-box; }
![Page 67: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/67.jpg)
![Page 68: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/68.jpg)
vw, vh, vmin, vmax cursor box-sizing
![Page 69: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/69.jpg)
vw, vh, vmin, vmax cursor box-sizing
![Page 70: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/70.jpg)
<div class=“container”>
</div>
![Page 71: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/71.jpg)
<div class=“container”> <main class=“game">
</main> </div>
![Page 72: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/72.jpg)
<div class=“container”> <main class=“game">
</main> </div> .container {
position: relative;}
![Page 73: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/73.jpg)
<div class=“container”> <main class=“game">
</main> </div> .container {
position: relative;}
.game {background: url('images/fundo.jpg');position: absolute;
}
![Page 74: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/74.jpg)
![Page 75: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/75.jpg)
![Page 76: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/76.jpg)
E os inimigos?
![Page 77: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/77.jpg)
![Page 78: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/78.jpg)
![Page 79: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/79.jpg)
<main class=“game”>
</main>
![Page 80: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/80.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
![Page 81: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/81.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
.inimigo {
}
![Page 82: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/82.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
.inimigo {
}
width: 20px;height: 20px;
![Page 83: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/83.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
.inimigo {
}
width: 20px;height: 20px;border-radius: 50%;
![Page 84: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/84.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
.inimigo {
}
width: 20px;height: 20px;border-radius: 50%;background-color: white;
![Page 85: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/85.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
.inimigo {
}
width: 20px;height: 20px;border-radius: 50%;background-color: white;position: absolute;
![Page 86: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/86.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
.inimigo {
}
width: 20px;height: 20px;border-radius: 50%;background-color: white;position: absolute;left: 9%;
![Page 87: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/87.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
.inimigo {
}
width: 20px;height: 20px;border-radius: 50%;background-color: white;position: absolute;left: 9%;animation-name: moving;
![Page 88: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/88.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
.inimigo {
}
width: 20px; height: 20px; border-radius: 50%; background-color: white; position: absolute;
left: 9%; animation-name: moving; animation-duration: 6s;
![Page 89: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/89.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
@keyframes moving {
![Page 90: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/90.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
@keyframes moving {0% {
top: 0;}
![Page 91: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/91.jpg)
<main class=“game”>
</main><div class="inimigo"></div>
@keyframes moving {0% {
top: 0;}100% {
top: calc(100% - 25px);}
}
![Page 92: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/92.jpg)
vw, vh, vmin, vmax cursor box-sizing animation
![Page 93: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/93.jpg)
vw, vh, vmin, vmax cursor box-sizing animation
![Page 94: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/94.jpg)
<main class=“game”>
</main>
<div class="inimigo"></div>
![Page 95: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/95.jpg)
<main class=“game”>
</main>
<div class="inimigo"></div><div class="inimigo"></div><div class="inimigo"></div><div class="inimigo"></div><div class="inimigo"></div>
![Page 96: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/96.jpg)
<main class=“game”>
</main>
<div class="inimigo" id="i1"></div><div class="inimigo" id="i2"></div><div class="inimigo" id="i3"></div><div class="inimigo" id="i4"></div><div class="inimigo" id="i5"></div>
![Page 97: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/97.jpg)
![Page 98: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/98.jpg)
#i1 {left: 9%;
}
#i2 {left: 23%;
}
#i3 {left: 37%;
}
#i4 {left: 65%;
}
#i5 {left: 90%;
}
![Page 99: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/99.jpg)
![Page 100: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/100.jpg)
![Page 101: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/101.jpg)
E como deixar os inimigos mais dinâmicos?
![Page 102: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/102.jpg)
![Page 103: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/103.jpg)
#i1 { animation-duration: 6s;animation-iteration-count: 2;}
![Page 104: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/104.jpg)
#i1 { animation-duration: 6s;animation-iteration-count: 2;}
#i2 { animation-duration: 5s;animation-iteration-count: 2;}
#i3 { animation-duration: 7s;animation-iteration-count: 2;}
#i4 { animation-duration: 12s;animation-iteration-count: 1;}
#i5 { animation-duration: 10s;animation-iteration-count: 1;}
![Page 105: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/105.jpg)
![Page 106: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/106.jpg)
![Page 107: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/107.jpg)
![Page 108: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/108.jpg)
E se tiver mais inimigos?
![Page 109: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/109.jpg)
E se tiver mais inimigos?
#i6, #i7, #i8, #i9, #i10 {animation-delay: 10s;background-color: red;
}
![Page 110: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/110.jpg)
![Page 111: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/111.jpg)
![Page 112: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/112.jpg)
![Page 113: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/113.jpg)
Como esconder?
![Page 114: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/114.jpg)
Como esconder?.inimigo {z-index: -1;animation-fill-mode: backwards;
}
![Page 115: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/115.jpg)
![Page 116: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/116.jpg)
Como esconder?.inimigo { z-index: -1; animation-fill-mode: backwards;
}
![Page 117: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/117.jpg)
Como esconder?.inimigo { z-index: -1; animation-fill-mode: backwards;
}
@keyframes moving {0% { z-index: -1; }1% { z-index: 2; }100% { z-index: 2; }
}
![Page 118: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/118.jpg)
![Page 119: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/119.jpg)
![Page 120: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/120.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index
![Page 121: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/121.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index
![Page 122: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/122.jpg)
![Page 123: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/123.jpg)
![Page 124: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/124.jpg)
![Page 125: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/125.jpg)
<main class=“game”>
</main>
![Page 126: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/126.jpg)
<main class=“game”>
</main>
[...]
<div class=“oops">Game Over :(
</div>
![Page 127: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/127.jpg)
<main class=“game”>
</main>
[...]
<div class=“oops">Game Over :(
</div>
.oops {
![Page 128: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/128.jpg)
<main class=“game”>
</main>
[...]
<div class=“oops">Game Over :(
</div>
.oops {display: none;
![Page 129: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/129.jpg)
<main class=“game”>
</main>
[...]
<div class=“oops">Game Over :(
</div>
.oops {display: none;position: absolute;
![Page 130: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/130.jpg)
<main class=“game”>
</main>
[...]
<div class=“oops">Game Over :(
</div>
.oops {display: none;position: absolute;top: 0;left: 0;
![Page 131: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/131.jpg)
<main class=“game”>
</main>
[...]
<div class=“oops">Game Over :(
</div>
.oops {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
![Page 132: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/132.jpg)
<main class=“game”>
</main>
[...]
<div class=“oops">Game Over :(
</div>
.oops {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: red;z-index: 10;
}
![Page 133: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/133.jpg)
.oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
![Page 134: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/134.jpg)
.oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
![Page 135: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/135.jpg)
.oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
.inimigo:hover ~ .oops {display: block;
}
![Page 136: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/136.jpg)
.oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
.inimigo:hover ~ .oops {display: block;
}
![Page 137: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/137.jpg)
.oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
.inimigo:hover ~ .oops { display: block; }
![Page 138: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/138.jpg)
.oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
.inimigo:hover ~ .oops { display: block; }
.oops:hover {display: block;
}
![Page 139: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/139.jpg)
.oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
.inimigo:hover ~ .oops { display: block; }
.oops:hover {display: block;
}
![Page 140: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/140.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
![Page 141: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/141.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
![Page 142: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/142.jpg)
O que vamos conquistar?
![Page 143: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/143.jpg)
![Page 144: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/144.jpg)
![Page 145: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/145.jpg)
![Page 146: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/146.jpg)
![Page 147: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/147.jpg)
<main class=“game”>
</main>
<div class="inimigo" id="i1"></div>[...] <div class="inimigo" id="i5"></div>
![Page 148: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/148.jpg)
<main class=“game”>
</main>
<div class="inimigo" id="i1"></div>[...]
<div class="inimigo" id="i5"></div>
<input class=“coin” type="checkbox" id="c1"> </input>
![Page 149: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/149.jpg)
![Page 150: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/150.jpg)
.coin {
![Page 151: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/151.jpg)
.coin {width: 20px;height: 20px;
![Page 152: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/152.jpg)
.coin {width: 20px;height: 20px;background-color: yellow;
![Page 153: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/153.jpg)
.coin {width: 20px;height: 20px;background-color: yellow;border-radius: 50%;
![Page 154: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/154.jpg)
.coin {width: 20px;height: 20px;background-color: yellow;border-radius: 50%;position: absolute;
![Page 155: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/155.jpg)
.coin {width: 20px;height: 20px;background-color: yellow;border-radius: 50%;position: absolute;left: 9%;
![Page 156: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/156.jpg)
.coin {width: 20px;height: 20px;background-color: yellow;border-radius: 50%;position: absolute;left: 9%;-webkit-appearance: none;
![Page 157: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/157.jpg)
.coin {width: 20px;height: 20px;background-color: yellow;border-radius: 50%;position: absolute;left: 9%;-webkit-appearance: none;animation-name: moving;animation-duration: 6s;
}
![Page 158: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/158.jpg)
.coin {width: 20px;height: 20px;background-color: yellow;border-radius: 50%;position: absolute;left: 9%;-webkit-appearance: none;animation-name: moving;animation-duration: 6s;
}.coin:checked {
![Page 159: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/159.jpg)
.coin {width: 20px;height: 20px;background-color: yellow;border-radius: 50%;position: absolute;left: 9%;-webkit-appearance: none;animation-name: moving;animation-duration: 6s;
}.coin:checked {
visibility: hidden;}
![Page 160: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/160.jpg)
![Page 161: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/161.jpg)
![Page 162: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/162.jpg)
<main class=“game”>
![Page 163: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/163.jpg)
<main class=“game”><div class="inimigo" id="i1"></div>
![Page 164: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/164.jpg)
<main class=“game”><div class="inimigo" id="i1"></div><div class="inimigo" id="i2"></div>
![Page 165: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/165.jpg)
<main class=“game”><div class="inimigo" id="i1"></div><div class="inimigo" id="i2"></div><div class="inimigo" id="i3"></div>
![Page 166: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/166.jpg)
<main class=“game”><div class="inimigo" id="i1"></div><div class="inimigo" id="i2"></div><div class="inimigo" id="i3"></div><input class="coin" type="checkbox" id=“c1"></input>
![Page 167: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/167.jpg)
<main class=“game”><div class="inimigo" id="i1"></div><div class="inimigo" id="i2"></div><div class="inimigo" id="i3"></div><input class="coin" type="checkbox" id=“c1"></input><div class="inimigo" id="i4"></div>
![Page 168: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/168.jpg)
<main class=“game”><div class="inimigo" id="i1"></div><div class="inimigo" id="i2"></div><div class="inimigo" id="i3"></div><input class="coin" type="checkbox" id=“c1"></input><div class="inimigo" id="i4"></div><input class=“coin" type="checkbox" id=“c2"></input>
![Page 169: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/169.jpg)
<main class=“game”><div class="inimigo" id="i1"></div><div class="inimigo" id="i2"></div><div class="inimigo" id="i3"></div><input class="coin" type="checkbox" id=“c1"></input><div class="inimigo" id="i4"></div><input class=“coin" type="checkbox" id=“c2"></input><div class="inimigo" id="i5"></div>
![Page 170: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/170.jpg)
![Page 171: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/171.jpg)
![Page 172: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/172.jpg)
Como contar os pontos?
![Page 173: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/173.jpg)
![Page 174: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/174.jpg)
.game { counter-reset: pontos; }
![Page 175: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/175.jpg)
.game { counter-reset: pontos; }
.game:after { content: counter(pontos) ‘/2'; }
![Page 176: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/176.jpg)
.game { counter-reset: pontos; }
.game:after { content: counter(pontos) ‘/2'; }
.coin:checked { counter-increment: pontos; }
![Page 177: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/177.jpg)
.game { counter-reset: pontos; }
.game:after { content: counter(pontos) ‘/2'; }
.coin:checked { counter-increment: pontos; }
![Page 178: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/178.jpg)
.game { counter-reset: pontos; }
.game:after { content: counter(pontos) ‘/2'; }
.coin:checked { counter-increment: pontos; }
![Page 179: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/179.jpg)
.game { counter-reset: blah; }
.game:after { content: counter(blah) ‘/2'; }
.coin:checked { counter-increment: blah; }
![Page 180: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/180.jpg)
.coin:checked { counter-increment: pontos; }
![Page 181: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/181.jpg)
.coin:checked { counter-increment: pontos; visibility: hidden; }
![Page 182: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/182.jpg)
.coin:checked { counter-increment: pontos; visibility: hidden; }
display: none;
![Page 183: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/183.jpg)
.coin:checked { counter-increment: pontos; visibility: hidden; }
display: none; ???
![Page 184: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/184.jpg)
.coin:checked { counter-increment: pontos; visibility: hidden; }
![Page 185: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/185.jpg)
.coin:checked { counter-increment: pontos; visibility: hidden; }
Visibility hidden X Display
none
![Page 186: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/186.jpg)
![Page 187: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/187.jpg)
![Page 188: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/188.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
![Page 189: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/189.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
![Page 190: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/190.jpg)
Como vence?
![Page 191: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/191.jpg)
Como vence?
![Page 192: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/192.jpg)
<main class=“game”>[...]
![Page 193: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/193.jpg)
<main class=“game”>[...]<div class="venceu">Venceu! :)
</div></main>
![Page 194: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/194.jpg)
![Page 195: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/195.jpg)
.venceu {display: none;position: absolute;width: 100%;height: 100%;background-color: green;top: 0;left: 0;
}
![Page 196: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/196.jpg)
.venceu {display: none;position: absolute;width: 100%;height: 100%;background-color: green;top: 0;left: 0;
}
#c1:checked ~ #c2:checked
![Page 197: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/197.jpg)
.venceu {display: none;position: absolute;width: 100%;height: 100%;background-color: green;top: 0;left: 0;
}
#c1:checked ~ #c2:checked~ .venceu {
![Page 198: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/198.jpg)
.venceu {display: none;position: absolute;width: 100%;height: 100%;background-color: green;top: 0;left: 0;
}
#c1:checked ~ #c2:checked~ .venceu {
display: block;}
![Page 199: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/199.jpg)
.venceu {display: none;position: absolute;width: 100%;height: 100%;background-color: green;top: 0;left: 0;
}
#c1:checked ~ #c2:checked~ .venceu {
display: block;}
![Page 200: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/200.jpg)
![Page 201: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/201.jpg)
Mais moedas?
![Page 202: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/202.jpg)
#c1:checked ~ #c2:checked
~ .venceu { display: block; }
Mais moedas?
![Page 203: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/203.jpg)
#c1:checked ~ #c2:checked
~ .venceu { display: block; }
Mais moedas?~ #c3:checked
![Page 204: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/204.jpg)
#c1:checked ~ #c2:checked
~ .venceu { display: block; }
Mais moedas?~ #c3:checked
~ #c4:checked
![Page 205: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/205.jpg)
#c1:checked ~ #c2:checked
~ .venceu { display: block; }
Mais moedas?~ #c3:checked
~ #c4:checked ~ #c5:checked
![Page 206: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/206.jpg)
![Page 207: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/207.jpg)
![Page 208: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/208.jpg)
![Page 209: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/209.jpg)
![Page 210: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/210.jpg)
<main class=“game”> [...] <input class="coin" type="checkbox" id="c1"></input> [...] <input class="coin" type="checkbox" id=“c2"></input> [...]
</main>
![Page 211: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/211.jpg)
<main class=“game”> [...] <input class="coin" tabindex="-1" type="checkbox" id=“c1"></input> [...] <input class="coin” tabindex="-1" type="checkbox" id=“c2"></input> [...]
</main>
![Page 212: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/212.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
![Page 213: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/213.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
![Page 214: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/214.jpg)
![Page 215: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/215.jpg)
![Page 216: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/216.jpg)
<main class=“game”>
![Page 217: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/217.jpg)
<main class=“game”><input type="checkbox" id="pause-button"></input>
![Page 218: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/218.jpg)
<main class=“game”><input type="checkbox" id="pause-button"></input><label for="pause-button"></label>
![Page 219: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/219.jpg)
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
![Page 220: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/220.jpg)
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
#pause-button + label {
![Page 221: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/221.jpg)
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
#pause-button + label {background-image: url('images/pause.png');
}
![Page 222: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/222.jpg)
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
#pause-button + label {background-image: url('images/pause.png');
}
#pause-button:checked + label {
![Page 223: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/223.jpg)
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
#pause-button + label {background-image: url('images/pause.png');
}
#pause-button:checked + label {background-image: url('images/play.png');
}
![Page 224: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/224.jpg)
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
![Page 225: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/225.jpg)
#pause-button ~ .inimigo,
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
![Page 226: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/226.jpg)
#pause-button ~ .inimigo,#pause-button ~ .coin {
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
![Page 227: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/227.jpg)
#pause-button ~ .inimigo,#pause-button ~ .coin {
animation-play-state: running;}
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
![Page 228: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/228.jpg)
#pause-button ~ .inimigo,#pause-button ~ .coin {
animation-play-state: running;}
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
#pause-button:checked ~ .inimigo,
![Page 229: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/229.jpg)
#pause-button ~ .inimigo,#pause-button ~ .coin {
animation-play-state: running;}
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
#pause-button:checked ~ .inimigo,#pause-button:checked ~ .coin {
![Page 230: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/230.jpg)
#pause-button ~ .inimigo,#pause-button ~ .coin {
animation-play-state: running;}
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...]
</main>
#pause-button:checked ~ .inimigo,#pause-button:checked ~ .coin {
animation-play-state: paused;}
![Page 231: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/231.jpg)
![Page 232: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/232.jpg)
![Page 233: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/233.jpg)
<main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] <div class="pause-container"></div>
</main>
![Page 234: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/234.jpg)
![Page 235: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/235.jpg)
.pause-container {display: none;background-color: black;opacity: 0.7;
}
#pause-button:checked ~ .pause-container {display: block;
}
![Page 236: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/236.jpg)
![Page 237: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/237.jpg)
.pause-container
![Page 238: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/238.jpg)
.pause-container
.pause-container:before
![Page 239: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/239.jpg)
Como colocar instruções?
![Page 240: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/240.jpg)
![Page 241: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/241.jpg)
<div class="container"><input id="intro" type="checkbox">
![Page 242: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/242.jpg)
<div class="container"><input id="intro" type="checkbox">
<section class="intro"><h2>Space Game</h2><p>Jogo só com CSS, sem Javascript ;D</p><label for=“intro">Play!</label>
</section>
[… .game]
![Page 243: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/243.jpg)
<div class="container"><input id="intro" type="checkbox">
<section class="intro"><h2>Space Game</h2><p>Jogo só com CSS, sem Javascript ;D</p><label for=“intro">Play!</label>
</section>
[… .game]</div>
![Page 244: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/244.jpg)
div .container input #intro
section .intro h2 p label for=intro
![Page 245: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/245.jpg)
div .container input #intro
section .intro h2 p label for=intro
.intro { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 15; }
![Page 246: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/246.jpg)
div .container input #intro
section .intro h2 p label for=intro
![Page 247: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/247.jpg)
div .container input #intro
section .intro h2 p label for=intro
label[for=“intro"] { padding: 1em; font-size: 1.2em; background-color: purple; border-radius: 5px; margin: 1em 25%; display: inline-block; border: 1px solid purple; }
![Page 248: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/248.jpg)
div .container input #intro
section .intro h2 p label for=intro
![Page 249: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/249.jpg)
div .container input #intro
section .intro h2 p label for=intro
#intro:checked ~ .intro { display: none; }
![Page 250: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/250.jpg)
div .container input #intro
section .intro h2 p label for=intro
![Page 251: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/251.jpg)
![Page 252: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/252.jpg)
![Page 253: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/253.jpg)
![Page 254: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/254.jpg)
<section class="rules"><div><h3>Regras</h3><ul>
<li>Mova seu personagem com o mouse</li><li>Clique nas moedas para coletá-las</li><li>Fuja dos tiros</li>
</ul><label for="rules">Entendi :)</label>
</div></section>
![Page 255: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/255.jpg)
#intro:checked + #rules:checked ~ .rules { display: none; }
![Page 256: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/256.jpg)
![Page 257: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/257.jpg)
![Page 258: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/258.jpg)
http://fernandabernardo.com.br/space-game/
![Page 259: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/259.jpg)
vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
![Page 260: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/260.jpg)
• http://minocernota.com/articles/pure_css_game/
• http://codepen.io/vaielab/full/yoKEF/
• http://dabblet.com/gist/2076449
• http://ryan-kahn.com/static/onlyCSS/
• http://fernandabernardo.com.br/piano-tiles/
• https://github.com/FernandaBernardo/timberman-css
Biografia
![Page 261: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/261.jpg)
http://fernandabernardo.com.br
@Feh_Bernardo
![Page 262: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/262.jpg)
http://fernandabernardo.com.br
@Feh_Bernardo
![Page 263: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/263.jpg)
![Page 264: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/264.jpg)
PARE
![Page 265: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/265.jpg)
PARE
PENSE
![Page 266: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/266.jpg)
PARE
PENSE
DIVIRTA-SE
![Page 267: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/267.jpg)
PARE
PENSE
DIVIRTA-SE
APRENDA
![Page 268: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/268.jpg)
PARE
PENSE
DIVIRTA-SE
APRENDA
IMPLEMENTE
![Page 269: Jogos: indo além do simples CSS 3.0](https://reader031.fdocument.pub/reader031/viewer/2022012923/5a65a4077f8b9a38648b486f/html5/thumbnails/269.jpg)
PARE
PENSE
DIVIRTA-SE
APRENDA
IMPLEMENTE
COMPARTILHE