css etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
css etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

10 Şubat 2017 Cuma

Unicode Chessboard

Unicode satranç karakterleri ile istediğiniz özeliklerde satranç tahtasını web uygulamanıza yerleştirebilirsiniz.

Satranç Sembolleri
Name Symbol     Codepoint  HTML
white chess king U+2654 ♔
white chess queen U+2655 ♕
white chess rook U+2656 ♖
white chess bishop U+2657 ♗
white chess knight U+2658 ♘
white chess pawn U+2659 ♙
black chess king U+265A ♚
black chess queen U+265B ♛
black chess rook U+265C ♜
black chess bishop U+265D ♝
black chess knight U+265E ♞
black chess pawn U+265F ♟

Tamamen html + css ile oluşturulmuş satranç tahtası;

8
7
6
5
4
3
2
1
a b c d e f g h

 Tablo için kullanılabilecek HTML kodları;

 <table style="border-collapse: collapse; border-color: black; border-spacing: 0pt; border-style: solid; border-width: 0pt 0pt 0pt 0pt; font-family: &quot;arial unicode ms&quot;; text-align: center;">  
 <tbody>  
 <tr>  
 <td style="width: 12pt;">8</td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 1pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♜</span></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♞</span></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♝</span></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♛</span></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♚</span></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♝</span></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 1pt 0pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♞</span></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 1pt 1pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♜</span></td>  
 </tr>  
 <tr>  
 <td style="width: 12pt;">7</td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♟</span></td>  
 <td style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♟</span></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♟</span></td>  
 <td style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♟</span></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♟</span></td>  
 <td style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♟</span></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♟</span></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♟</span></td>  
 </tr>  
 <tr>  
 <td style="width: 12pt;">6</td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;"><br /></span></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt; height: 24pt; width: 24pt;"></td>  
 </tr>  
 <tr>  
 <td style="width: 12pt;">5</td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;"><br /></span></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt; height: 24pt; width: 24pt;"></td>  
 </tr>  
 <tr>  
 <td style="width: 12pt;">4</td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;"><br /></span></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt; height: 24pt; width: 24pt;"></td>  
 </tr>  
 <tr>  
 <td style="width: 12pt;">3</td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;"><br /></span></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="height: 24pt; width: 24pt;"></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt; height: 24pt; width: 24pt;"></td>  
 </tr>  
 <tr>  
 <td style="width: 12pt;">2</td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 0pt 1pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♙</span></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♙</span></td>  
 <td style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♙</span></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♙</span></td>  
 <td style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♙</span></td>  
 <td bgcolor="silver" style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♙</span></td>  
 <td style="height: 24pt; width: 24pt;"><span style="font-size: 150%;">♙</span></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♙</span></td>  
 </tr>  
 <tr>  
 <td style="width: 12pt;">1</td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 1pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♖</span></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♘</span></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♗</span></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♕</span></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♔</span></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♗</span></td>  
 <td bgcolor="silver" style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 0pt 1pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♘</span></td>  
 <td style="border-collapse: collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 1pt 0pt; height: 24pt; width: 24pt;"><span style="font-size: 150%;">♖</span></td>  
 </tr>  
 <tr>  
 <td></td>  
 <td>a</td>  
 <td>b</td>  
 <td>c</td>  
 <td>d</td>  
 <td>e</td>  
 <td>f</td>  
 <td>g</td>  
 <td>h</td>  
 </tr>  
 </tbody></table>