Chess patterns are simply certain tactical positions that regularly occur in games. It can be easily designed by using the pseudo selector of CSS. This type of pattern can be used to create confusing illusions.
Preview:
Approach:
- Create a centered container for the chessboard with a fixed size and border.
- Style the chessboard using linear gradients for alternating black and white squares.
- Tweak the container and chessboard sizes, colors, or gradients to your preference.
- Embed the chessboard within the container, forming a visually appealing card-like design.
Example: In this example, we will design the basic structure of the chess pattern.
HTML
<!DOCTYPE html><html lang="">
<head>
<title>Chess Pattern</title>
<style>
.chessboard-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border: 5px solid #333;
overflow: hidden;
}
.chessboard {
width: 100%;
height: 100%;
background-size: 50px 50px;
background-image:
linear-gradient(45deg, #000 25%, transparent 25%,
transparent 75%, #000 75%, #000),
linear-gradient(45deg, #000 25%, transparent 25%,
transparent 75%, #000 75%, #000),
linear-gradient(45deg, #fff 25%, transparent 25%,
transparent 75%, #fff 75%, #fff),
linear-gradient(45deg, #fff 25%, transparent 25%,
transparent 75%, #fff 75%, #fff);
background-position: 0 0, 25px 25px, 25px 0, 0 25px;
}
</style>
</head>
<body>
<div class="chessboard-container">
<div class="chessboard"></div>
</div>
</body>
</html>
|
Output:
Article Tags :
Recommended Articles