Skip to content

Commit 62108d4

Browse files
solygambassolygambas
committed
add 3D boxes background
1 parent dcabe2d commit 62108d4

File tree

4 files changed

+127
-1
lines changed

4 files changed

+127
-1
lines changed

‎40-3d boxes background/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>3D Boxes Background</title>
8+
</head>
9+
<body>
10+
<button id="btn" class="magic">Magic</button>
11+
<div id="boxes" class="boxes big"></div>
12+
<script src="script.js"></script>
13+
</body>
14+
</html>

‎40-3d boxes background/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const boxesContainer = document.getElementById("boxes");
2+
const button = document.getElementById("btn");
3+
4+
const createBoxes = () => {
5+
for (let i = 0; i < 4; i++) {
6+
for (let j = 0; j < 4; j++) {
7+
const box = document.createElement("div");
8+
box.classList.add("box");
9+
box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`;
10+
boxesContainer.appendChild(box);
11+
}
12+
}
13+
};
14+
15+
createBoxes();
16+
17+
button.addEventListener("click", () => boxesContainer.classList.toggle("big"));

‎40-3d boxes background/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
3+
4+
* {
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background-color: #fafafa;
10+
font-family: "Roboto", sans-serif;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
height: 100vh;
16+
overflow: hidden;
17+
margin: 0;
18+
}
19+
20+
.magic {
21+
background-color: #f9ca24;
22+
color: #fff;
23+
font-family: "Poppins", sans-serif;
24+
border: 0;
25+
border-radius: 3px;
26+
font-size: 16px;
27+
padding: 12px 20px;
28+
cursor: pointer;
29+
position: fixed;
30+
top: 20px;
31+
right: 20px;
32+
letter-spacing: 1px;
33+
box-shadow: 0 3px rgba(249, 202, 36, 0.5);
34+
z-index: 100;
35+
}
36+
37+
.magic:focus {
38+
outline: none;
39+
}
40+
41+
.magic:active {
42+
box-shadow: none;
43+
transform: translateY(2px);
44+
}
45+
46+
.boxes {
47+
display: flex;
48+
flex-wrap: wrap;
49+
justify-content: space-around;
50+
height: 500px;
51+
width: 500px;
52+
position: relative;
53+
transition: 0.4s ease;
54+
}
55+
56+
.boxes.big {
57+
height: 600px;
58+
width: 600px;
59+
}
60+
61+
.boxes.big .box {
62+
transform: rotateZ(360deg);
63+
}
64+
65+
.box {
66+
background-image: url("https://media.giphy.com/media/xYXr3haK7jQN3uGuv7/giphy.gif");
67+
background-repeat: no-repeat;
68+
background-size: 500px 500px;
69+
position: relative;
70+
height: 125px;
71+
width: 125px;
72+
transition: 0.4s ease;
73+
}
74+
75+
.box::after {
76+
content: "";
77+
background-color: #f6e58d;
78+
position: absolute;
79+
top: 8px;
80+
right: -15px;
81+
height: 100%;
82+
width: 15px;
83+
transform: skewY(45deg);
84+
}
85+
86+
.box::before {
87+
content: "";
88+
background-color: #f9ca24;
89+
position: absolute;
90+
left: 8px;
91+
bottom: -15px;
92+
width: 100%;
93+
height: 15px;
94+
transform: skewX(45deg);
95+
}

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/pokedex) | [Live Demo](/pokedex/) |
4646
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/mobile-tab-navigation) | [Live Demo](/mobile-tab-navigation/) |
4747
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-strength-background) | [Live Demo](/password-strength-background/) |
48-
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/3d-boxes-background) | [Live Demo](/3d-background-boxes/) |
48+
| 40 | [3D Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/40-3d%20boxes%20background) | [Live Demo](/3d-background-boxes/) |
4949
| 41 | [Verify Account UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/verify-account-ui) | [Live Demo](/verify-account-ui/) |
5050
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/live-user-filter) | [Live Demo](/live-user-filter/) |
5151
| 43 | [Feedback UI Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/feedback-ui-design) | [Live Demo](/feedback-ui-design/) |

0 commit comments

Comments
 (0)