Satranç oyunu hep ilgili çekmiş bir oyundur. Oynaması kadar, uzmanları tarafından oynanan oyunları YouTube üzerinden izlemesi de hep keyif vermiştir. Bu örneği yapmak da yine bir oyun izlerken oldu.
Uygulamada temel 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | <!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>♖</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></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> </table> </body> </html> |
Yorum Yap