Web Tasarım

Css de satranç tahtası

24 Ekim 2019 aydiner css, html, meslek lisesi, satranç, web taarım dersleri, web tasarım ve programlama dersi

CSS kodları kullanarak satranç tahtası ve üzerindeki taşları yapacağız. Mevcut CSS Örneğinde etiket seçici ve sınıf seçici kullanılmıştır. Tablo biçimlendirmesi yanı sıra sayfa arkaplan biçimlendirmesi ve CSS ile yazıları ve sayfayı ortalama işlemleri de örnek içinde yapılmıştır.

Uygulamayı adım adım yapacaklar için kullanılan taşların unicode ve html kod karşılıkları şöyledir.

♔ ♔	♕ ♕	♚ ♚	♛ ♛
♖ ♖	♗ ♗	♜ ♜	♝ ♝
♘ ♘	♙ ♙	♞ ♞	♟ ♟

Html Kodu

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Tasarım Kodlama </title>
    <style>
        body{
            background: #2f3640;
        }
        h1{
            color:white;
            font-family: sans-serif;
            text-align: center;
            font-size: 3em;
        }
        table{
            margin:auto;
            border:20px solid #e84118;
            border-spacing: 5px;
        }
        table td{
            width: 75px;
            height: 75px;
            background: #f5f6fa;
            font-size:3em;
            line-height: 75px;
            text-align: center;
            border:2px solid #2f3640;
        }
        .siyah{
            background: #718093;
            
        }
    </style>
</head>
 
<body>
 
    <h1>Satranç Tahtası Örneği</h1>
    <table>
        <tr>
            <td>&#9814;</td>
            <td class="siyah">&#9816;</td>
            <td>&#9815;</td>
            <td class="siyah">&#9813;</td>
            <td>&#9812;</td>
            <td class="siyah">&#9815;</td>
            <td>&#9816;</td>
            <td class="siyah">&#9814;</td>
        </tr>
        <tr>
            <td class="siyah">&#9817;</td>
            <td>&#9817;</td>
            <td class="siyah">&#9817;</td>
            <td>&#9817;</td>
            <td class="siyah">&#9817;</td>
            <td>&#9817;</td>
            <td class="siyah">&#9817;</td>
            <td>&#9817;</td>
        </tr>
        <tr>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
        </tr>
        <tr>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
        </tr>
        <tr>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
            <td class="siyah"></td>
            <td></td>
        </tr>
        <tr>
            <td>&#9823;</td>
            <td class="siyah">&#9823;</td>
            <td>&#9823;</td>
            <td class="siyah">&#9823;</td>
            <td>&#9823;</td>
            <td class="siyah">&#9823;</td>
            <td>&#9823;</td>
            <td class="siyah">&#9823;</td>
        </tr>
        <tr>
            <td class="siyah">&#9820;</td>
            <td>&#9822;</td>
            <td class="siyah">&#9821;</td>
            <td>&#9819;</td>
            <td class="siyah">&#9818;</td>
            <td>&#9821;</td>
            <td class="siyah">&#9822;</td>
            <td>&#9820;</td>
        </tr>
    </table>
</body>
</html>