
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,
- remove div vertical scroll
- Create HTML button that looks like a href hyperlink
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- HTML5 HELLO WORLD Example
- Get HTML table td, tr or th inner content value with id or name attribute
- Adding Sub Headings to Bootstrap Header tags
- What is the doctype for HTML5?
- Chessboard with pieces using pure HTML and CSS
- Hyperlink in html (anchor tag) without a underline
- W3 : character data is not allowed here html validation error
- Fibonacci series from 1 to 500 table
- 9 Border to DIV Element in HTML Examples
- How to add multiple spaces between html page text
- How to turn off autocomplete in input fields in HTML Form
- Default speed of Marquee tag : SCROLLAMOUNT
- How to word wrap in HTML
- Force convert HTML text input to upper case
- HTML5 CSS3 Color Codes List
- How to remove old 404 pages ulrs from Google crawler
- reCaptcha Verification expired. Check the checkbox again
- All directional arrows codes for HTML
- Align html element at the center of page vertically and horizontally
- How to make a div tag clickable
- Remove Html head and body tags from ckeditor source
- Auto Refresh Webpage after every x Second or Minute using Meta Tag?
More Posts:
- Fix SharePoint 2019 installation error This product requires Visual C++ Redistributable Package for Visual Studio 2017 - SharePoint
- Install Notepad++ silently using Windows Powershell - NotepadPlusPlus
- Quick steps to install Nginx on Ubuntu Linux - Ubuntu
- How to migrate SharePoint Designer 2010 workflow to Power Automate FLOW (Microsoft Office 365) - SharePoint
- How to know Notepad++ is 32-bit or 64-bit Version - NotepadPlusPlus
- Get cURL command from Chrome Inspect Network HTTP URL - cURL
- Java Split String by Spaces - Java
- Java location in Mac OS X - Mac-OS-X