From 60ee0dd172b9a5a4d66cfee87def8dfe0a893081 Mon Sep 17 00:00:00 2001 From: Felix Martin Date: Sun, 21 Jul 2019 21:39:18 -0400 Subject: [PATCH] Create Tic-Tac-Toe in HTML/CSS. Understand layers (z-index). --- readme.md | 7 +++++ tictactoe.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++ tictactoe.html | 39 ++++++++++++++++++++++++ todo.txt | 7 ++--- 4 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 tictactoe.css create mode 100644 tictactoe.html diff --git a/readme.md b/readme.md index e69de29..c90d4a0 100644 --- a/readme.md +++ b/readme.md @@ -0,0 +1,7 @@ +# Tic Tac Toe CSS + +https://eddyerburgh.me/make-responsive-tic-tac-toe-board + +https://css-tricks.com/game-life/ + +https://codepen.io/ziga-miklic/post/pure-css-tic-tac-toe \ No newline at end of file diff --git a/tictactoe.css b/tictactoe.css new file mode 100644 index 0000000..fa8af21 --- /dev/null +++ b/tictactoe.css @@ -0,0 +1,81 @@ +body { + text-align: center; + margin: 0; +} + +.tic-tac-toe { + height: 450px; + width: 450px; + margin: 50px auto 30px auto; + position: relative; + background-color: #E6E6FA; +} + +.tic-tac-toe input[type="radio"] { + display: none; +} + +.tic-tac-toe input[type="radio"].turn-1 + label { + z-index: 1; + display: block; +} + +.tic-tac-toe input[type="radio"].turn-1:checked + label { + cursor: default; + background-color: red; + z-index: 10 !important; +} + +.tic-tac-toe input[type="radio"].turn-1.field-9:checked ~ .turn-2.field-3 + label { + display: block; + cursor: default; + background-color: green; + z-index: 2; +} + +.tic-tac-toe label { + background-color: #78bec5; + height: 140px; + width: 140px; + display: none; + margin: 5px; + position: absolute; + cursor: pointer; + color: #fff; + -moz-transition: background-color 0.3s; + -o-transition: background-color 0.3s; + -webkit-transition: background-color 0.3s; + transition: background-color 0.3s; +} + +.tic-tac-toe input[type="radio"].left + label { + left: 0px; + right: 300px; +} + +.tic-tac-toe input[type="radio"].middle + label { + left: 150px; + right: 150px; +} + +.tic-tac-toe input[type="radio"].right + label { + left: 300px; + right: 0px; +} + + +.tic-tac-toe input[type="radio"].top + label { + top: 0px; + bottom: 300px; +} + +.tic-tac-toe input[type="radio"].center + label { + top: 150px; + bottom: 150px; +} + +.tic-tac-toe input[type="radio"].bottom + label { + top: 300px; + bottom: 0px; +} + diff --git a/tictactoe.html b/tictactoe.html new file mode 100644 index 0000000..935d520 --- /dev/null +++ b/tictactoe.html @@ -0,0 +1,39 @@ + + + Tic Tac Toe CSS + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/todo.txt b/todo.txt index cf52121..eb129ef 100644 --- a/todo.txt +++ b/todo.txt @@ -1,7 +1,4 @@ -(B) Create HTML for Tic-Tac-Toe field. +tictactoecss -(B) Research how to do multiple layers in CSS. +tictactoecss -(C) Create manual prove of concept that shows how multiple rounds can be played. +tictactoecss (D) Add message that indicates draw or loss. +tictactoecss (D) Create Python script that creates full CSS for bot +tictactoecss -(E) Publish on homepage. +tictactoecss -(E) Write readme. +tictactoecss \ No newline at end of file +(D) Publish on homepage. +tictactoecss +(D) Write readme. +tictactoecss \ No newline at end of file