Code2care : TechZone Apps & Tutorials

Chessboard with pieces using pure HTML and CSS





Chessboard using pure css and html


To create a Chessboard with Chess pieces we first need to know their unicode or HTML equivalent codes.

There are around 12 Symbols that are needed to create a Chessboard in HTML.

These symbols are available in Unicode range U+2654 to U+265F.

Note : To display these Symbols you need to have the font that supports this Unicode Range.



1. White Chess King ♔


    Unicode : U+2654
    HTML Code : ♔


2. Black Chess King ♚


    Unicode : U+265A
    HTML Code : ♚


3. White Chess Queen ♕


    Unicode : U+2655
    HTML Code : ♕


4. Black Chess Queen ♛


    Unicode : U+265B
    HTML Code : ♛


5. White Chess Rock ♖


    Unicode : U+2656
    HTML Code : ♖


6. Black Chess Rock ♜


    Unicode : U+265C
    HTML Code : ♜


7. White Chess Bishop ♗


    Unicode : U+2657
    HTML Code : ♗


8. Black Chess Bishop ♝


    Unicode : U+265D
    HTML Code : ♝


9. White Chess Knight ♘


    Unicode : U+2658
    HTML Code : ♘


10. Black Chess Knight ♞


    Unicode : U+265E
    HTML Code : ♞


11. White Chess Pawn ♙


    Unicode : U+2659
    HTML Code : ♙


11. Black Chess Pawn ♟


    Unicode : U+265F
    HTML Code : ♟




Source Code HTML + CSS


<html>

<head>
<meta charset="UTF-8"> 
<title>Chessboard using Pure CSS and HTML</title>

<style type="text/css">

.chessboard {
    width: 640px;
    height: 640px;
    margin: 20px;
    border: 25px solid #333;
}
.black {
    float: left;
    width: 80px;
    height: 80px;
    background-color: #999;
      font-size:50px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
}
.white {
    float: left;
    width: 80px;
    height: 80px;
    background-color: #fff;
    font-size:50px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
}

</style>

</head>

<body>

<div class="chessboard">
<!-- 1st -->
<div class="white">&#9820;</div>
<div class="black">&#9822;</div>
<div class="white">&#9821;</div>
<div class="black">&#9819;</div>
<div class="white">&#9818;</div>
<div class="black">&#9821;</div>
<div class="white">&#9822;</div>
<div class="black">&#9820;</div>
<!-- 2nd -->
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<!-- 3th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 4st -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 5th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 6th -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 7th -->
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<!-- 8th -->
<div class="black">&#9814;</div>
<div class="white">&#9816;</div>
<div class="black">&#9815;</div>
<div class="white">&#9813;</div>
<div class="black">&#9812;</div>
<div class="white">&#9815;</div>
<div class="black">&#9816;</div>
<div class="white">&#9814;</div>
</div>
</body>
</html>



Note : You can simply use the unicode pieces within your html code provided your page supports UTF-8 Character set. To do so just include <meta charset="UTF-8" > in the <head> section of your webpage.











Top




Posts related to html.


1. How to place two div elements next to each other

2. Align html element at the center of page vertically and horizontally

3. Remove Html head and body tags from ckeditor source

4. How to set opacity only for div background and not the text - CSS

5. How to get table td, tr or th inner content value with id or name attribute

6. Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key

7. Link in html without a underline

8. Adding Sub Headings to Bootstrap Header tags

9. How to make a div tag clickable

10. Top 15 Programming Languages to learn 2014-2015

11. Chessboard with pieces using pure HTML and CSS

12. Default speed of Marquee tag : SCROLLAMOUNT

13. How to make div or text in html unselectable using CSS

14. Add Animated Scrolling to Html Page Title Script

15. Fibonacci series from 1 to 500 table

    more...

Posts related to css.


1. Remove Html head and body tags from ckeditor source

2. Responsive web design using CSS Media Queries

3. Default speed of Marquee tag : SCROLLAMOUNT

4. Align html element at the center of page vertically and horizontally

5. How to make jsfiddle bootstrap ready

6. How to place two div elements next to each other

7. How to set opacity only for div background and not the text - CSS

8. How to make div or text in html unselectable using CSS

9. Chessboard with pieces using pure HTML and CSS

10. Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key

11. Facebook like box overlaps fixed div element while scrolling the page

    more...

Posts related to writeup.


1. 9 C Programming ebooks list mostly under public domain

2. Android One affordable Smartphones to be launched in Indonesia

3. UTS Android Mobile App launched by Indian Railways for Mumbai Local Commuters

4. Fetch More then 10 Links Per Page in Google Search Result

5. 7 Messages We Thought We Got Them Right, But did We ?

6. Write javaScript code in Swedish using FikaScript

7. Chessboard with pieces using pure HTML and CSS

8. Mumbai Local Trains delayed on Central Line (CR) due to Technical Failure








Popular tags
android
x 175
eclipse
x 29
notepadplusplus
x 20
macosx
x 14
sharepoint
x 14
html
x 14
mac
x 13
androidstudio
x 11




1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


Code2care © 2012-15