Hello guys today we will learn How to create Diamond Grid with HTML and CSS
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Diamond Grid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="diamond-grid">
<div style="background: url(https://picsum.photos/200);"></div>
<img src="https://picsum.photos/200" alt="" class="diamond-grid--item">
<div style="background: url(https://picsum.photos/300);"></div>
<img src="https://picsum.photos/300" alt="" class="diamond-grid--item">
<div></div>
<img src="https://picsum.photos/400" alt="" class="diamond-grid--item">
<div style="background: url(https://picsum.photos/400);"></div>
<img src="https://picsum.photos/500" alt="" class="diamond-grid--item">
<div style="background: url(https://picsum.photos/500);"></div>
</div>
</body>
</html>Step:2
Then we need to add code for style.css which code i provide in below screen.
body {
display: flex;
display: -webkit-box;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
min-height: 100vh;
background: #f7f7fd;
margin: 0;
overflow: hidden;
}
.diamond-grid {
--diamond-grid-gap: 0.2rem;
--diamond-grid-offset: calc(50% - var(--diamond-grid-gap));
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
-webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
animation: animationLeftToRight .8s ease-in forwards;
}
.diamond-grid--item {
position: relative;
width: 160px;
height: 160px;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond-grid--item:nth-child(2) {
top: var(--diamond-grid-offset);
animation: animationTopToBottom 2s linear forwards;
}
.diamond-grid--item:nth-child(8) {
bottom: var(--diamond-grid-offset);
animation: animationBottomToTop 2s linear forwards;
}
.diamond-grid--item:nth-child(4) {
left: var(--diamond-grid-offset);
animation: animationLeftToRight 2s linear forwards;
}
.diamond-grid--item:nth-child(6) {
right: var(--diamond-grid-offset);
animation: animationRightToLeft 2s linear forwards;
}
.diamond-grid div {
filter: blur(50px);
}
@keyframes animationTopToBottom {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(-500%);
}
100% {
transform: translateY(0%);
}
}
@keyframes animationBottomToTop {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(500%);
}
100% {
transform: translateY(0%);
}
}
@keyframes animationLeftToRight {
0% {
transform: translateX(0%);
}
50% {
transform: translateX(-500%);
}
100% {
transform: translateX(0%);
}
}
@keyframes animationRightToLeft {
0% {
transform: translateX(0%);
}
50% {
transform: translateX(500%);
}
100% {
transform: translateX(0%);
}
}