Beispiel:Tic-tac-toe-2.html
Aus SELFHTML-Wiki
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Tic-Tac-Toe (HTML und CSS)</title>
<style>
#gameboard {
width: 60vmin;
height: 60vmin;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
button {
width:20vmin;
height: 20vmin;
background: white;
border: 1px solid black;
margin: 0;
font: 0/0 transparent;
}
[aria-label="x"] {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.1%22%20x2%3D%220.9%22%20y2%3D%220.9%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3Cline%20x1%3D%220.1%22%20y1%3D%220.9%22%20x2%3D%220.9%22%20y2%3D%220.1%22%20stroke-width%3D%220.1%22%20stroke%3D%22red%22%2F%3E%3C%2Fsvg%3E');
}
[aria-label="o"]{
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3Ccircle%20cx%3D%220.5%22%20cy%3D%220.5%22%20r%3D%220.4%22%20fill%3D%22none%22%20stroke-width%3D%220.1%22%20stroke%3D%22blue%22%2F%3E%3C%2Fsvg%3E');
}
</style>
</head>
<body>
<h1>Tic-Tac-Toe (unfertig, HTML und CSS)</h1>
<div class="tic-tac-toe" aria-describedby="hint">
<p id="hint">Zum Spielen bitte abwechselnd in die Spielfelder klicken/tappen!</p>
<div id="gameboard">
<button aria-label="x" disabled>A1</button>
<button>A2</button>
<button>A3</button>
<button>B1</button>
<button aria-label="o" disabled>B2</button>
<button>B3</button>
<button>C1</button>
<button>C2</button>
<button>C3</button>
</div>
</div>
</body>
</html>
