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>  

Hiç yorum yok:

Yorum Gönderme