
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 : ♙
12. 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">♜</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>
<!-- 2nd -->
<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>
<!-- 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">♙</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>
<!-- 8th -->
<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>
</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.
More Posts related to Html,
- HTML5 HELLO WORLD Example
- All directional arrows codes for HTML
- Adding Sub Headings to Bootstrap Header tags
- Create HTML button that looks like a href hyperlink
- 70+ HTTP Error Codes CheatSheet
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- How to set background color in HTML page?
- Obsolete marquee element alternatives html5
- Base 64 Index, Character and Binary Table
- Get HTML table td, tr or th inner content value with id or name attribute
- Align html element at the center of page vertically and horizontally
- How to add multiple spaces between html page text
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- How to pretty print HTML using Java Code
- W3 HTML validator warning Unable to Determine Parse Mode
- Hyperlink in html (anchor tag) without a underline
- reCaptcha Verification expired. Check the checkbox again
- Auto Refresh Webpage after every x Second or Minute using Meta Tag?
- Chessboard with pieces using pure HTML and CSS
- Default speed of Marquee tag : SCROLLAMOUNT
- Fibonacci series from 1 to 500 table
- 9 Border to DIV Element in HTML Examples
- How to remove old 404 pages ulrs from Google crawler
- Simple Crossword Puzzle example using Pure HTML, CSS and JavaScript
- How to make a div tag clickable
More Posts:
- Splitting String in Java with Examples - Java
- How to docker remove a container when it exits - Docker
- Compare two lists in Python and return matches - Python
- [fix] iCloud - Verification Failed: An unknown error occurred Apple ID - iOS
- Fix: Unable to edit text in TextEdit on Mac - MacOS
- How to take a Screenshot on iPhone with iOS 17 - iOS
- macOS say command text to speech using various voices and languages - MacOS
- [fix] NullPointerException Cannot Invoke findById because Repository is null - Java Spring - Java