Css de satranç tahtası

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>

 

Buna da gözat

Bootstrap Menü eklemek

aydiner.gen.tr
Bilişim Teknolojileri Kaynak Site