Skip to content

Commit 9f14ae9

Browse files
lakshyeahhlakshyeahh
authored
Added Glowing Border Card
1 parent a946b54 commit 9f14ae9

File tree

4 files changed

+273
-0
lines changed

4 files changed

+273
-0
lines changed

‎Glowing-Border-Animation-with-CSS/css/style.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
height: 100vh;
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
background: #151320;
12+
}
13+
14+
.box {
15+
position: relative;
16+
width: 400px;
17+
height: 400px;
18+
color: #fff;
19+
background: #151320;
20+
font: 700 2rem 'Montserrat';
21+
line-height: 400px;
22+
text-align: center;
23+
text-transform: uppercase;
24+
border-radius: 50%; /* Makes the box circular */
25+
z-index: 1; /* Ensures the box is above the frame */
26+
}
27+
28+
/* Moving part of the white border with purple glow */
29+
.box::before,
30+
.box::after {
31+
content: '';
32+
z-index: -1;
33+
position: absolute;
34+
width: calc(100% + 30px);
35+
height: calc(100% + 30px);
36+
top: -15px;
37+
left: -15px;
38+
border-radius: 50%; /* Matches the circular shape of the box */
39+
background: linear-gradient(45deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 80%);
40+
background-size: 300%;
41+
animation: borderMove 4s linear infinite;
42+
box-shadow: 0 0 30px 20px rgba(128, 0, 255, 0.8); /* Purple glow effect */
43+
}
44+
45+
.box::after {
46+
filter: blur(50px); /* Blurred glow effect */
47+
}
48+
49+
/* Frame behind the box */
50+
.frame {
51+
position: absolute;
52+
top: -40px; /* Adjust as necessary */
53+
left: -40px; /* Adjust as necessary */
54+
width: 480px; /* Adjust size to be slightly bigger than the .box */
55+
height: 480px; /* Adjust size to be slightly bigger than the .box */
56+
z-index: -2; /* Puts the frame behind the box */
57+
}
58+
59+
@keyframes borderMove {
60+
0% {
61+
background-position: 0 0;
62+
}
63+
100% {
64+
background-position: 300%;
65+
}
66+
}

‎Glowing-Border-Animation-with-CSS/frame.png‎

292 KB
Loading

‎Glowing-Border-Animation-with-CSS/index.html‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Code With Hossein</title>
6+
7+
<!-- Montserrat Font -->
8+
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
9+
10+
<style>
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
body {
17+
height: 100vh;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
background: #151320;
22+
}
23+
24+
/* Box container */
25+
.box {
26+
position: relative;
27+
width: 400px;
28+
height: 400px;
29+
color: #fff;
30+
background: #151320;
31+
font: 700 2rem 'Montserrat';
32+
line-height: 400px;
33+
text-align: center;
34+
text-transform: uppercase;
35+
border-radius: 50%;
36+
/* Makes the box circular */
37+
z-index: 1;
38+
/* Ensures the box is above the frame */
39+
transition: transform 0.3s ease;
40+
/* Add transition for smooth hover effect */
41+
transform-style: preserve-3d;
42+
/* For 3D effect */
43+
will-change: transform;
44+
/* Optimizes the transformation */
45+
}
46+
47+
/* 3D effect on hover */
48+
.box:hover {
49+
transform: rotateY(15deg) rotateX(15deg);
50+
/* Slight 3D tilt on hover */
51+
}
52+
53+
/* Moving part of the white border with purple glow */
54+
.box::before,
55+
.box::after {
56+
content: '';
57+
z-index: -1;
58+
position: absolute;
59+
width: calc(100% + 30px);
60+
height: calc(100% + 30px);
61+
top: -15px;
62+
left: -15px;
63+
border-radius: 50%;
64+
/* Matches the circular shape of the box */
65+
background: linear-gradient(45deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 80%);
66+
background-size: 300%;
67+
animation: borderMove 4s linear infinite;
68+
box-shadow: 0 0 30px 20px rgba(128, 0, 255, 0.8);
69+
/* Purple glow effect */
70+
}
71+
72+
.box::after {
73+
filter: blur(50px);
74+
/* Blurred glow effect */
75+
}
76+
77+
/* Frame behind the box */
78+
.frame {
79+
position: absolute;
80+
top: -40px;
81+
/* Adjust as necessary */
82+
left: -40px;
83+
/* Adjust as necessary */
84+
width: 480px;
85+
/* Adjust size to be slightly bigger than the .box */
86+
height: 480px;
87+
/* Adjust size to be slightly bigger than the .box */
88+
z-index: -2;
89+
/* Puts the frame behind the box */
90+
}
91+
92+
/* Overlay with name */
93+
.overlay {
94+
position: absolute;
95+
top: 0;
96+
left: 0;
97+
width: 100%;
98+
height: 100%;
99+
background: rgba(0, 0, 0, 0.7);
100+
/* Semi-transparent black background */
101+
display: flex;
102+
flex-direction: column;
103+
align-items: center;
104+
justify-content: center;
105+
color: #fff;
106+
font-size: 2rem;
107+
opacity: 0;
108+
transition: opacity 0.3s ease-in-out;
109+
border-radius: 50%;
110+
/* Keeps the overlay circular */
111+
line-height: 1.2;
112+
/* Reduce the line height to reduce vertical gaps */
113+
}
114+
115+
.overlay div {
116+
margin: 5px 0;
117+
/* Controls the space between the divs */
118+
font-size: 1.2rem;
119+
/* Adjust font size if needed */
120+
}
121+
122+
/* Add margin above the links */
123+
.overlay .links {
124+
margin-top: 25px;
125+
/* Add a slight gap above the links */
126+
}
127+
128+
129+
130+
/* Show the overlay on hover */
131+
.box:hover .overlay {
132+
opacity: 1;
133+
}
134+
135+
136+
137+
/* Animation for moving border */
138+
@keyframes borderMove {
139+
0% {
140+
background-position: 0 0;
141+
}
142+
143+
100% {
144+
background-position: 300%;
145+
}
146+
}
147+
148+
@media (prefers-reduced-motion) {
149+
.box {
150+
transform: none !important;
151+
}
152+
}
153+
</style>
154+
155+
</head>
156+
157+
<body>
158+
159+
<div class="box">
160+
<!-- Frame PNG behind the box -->
161+
<img class="frame" src="frame.png" alt="Frame" />
162+
<!-- Image inside the circular box -->
163+
<img src='./pic.png' alt="Image Description"
164+
style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
165+
<!-- Name overlay -->
166+
<div class="overlay">
167+
<div>name</div>
168+
<div>coloumn </div>
169+
<div class="links">links</div>
170+
</div>
171+
172+
173+
174+
<script>
175+
const card = document.querySelector(".box"); // Selecting the box class
176+
const THRESHOLD = 15;
177+
178+
function handleHover(e) {
179+
const { clientX, clientY, currentTarget } = e;
180+
const { clientWidth, clientHeight, offsetLeft, offsetTop } = currentTarget;
181+
182+
const horizontal = (clientX - offsetLeft) / clientWidth;
183+
const vertical = (clientY - offsetTop) / clientHeight;
184+
185+
const rotateX = (THRESHOLD / 2 - horizontal * THRESHOLD).toFixed(2);
186+
const rotateY = (vertical * THRESHOLD - THRESHOLD / 2).toFixed(2);
187+
188+
currentTarget.style.transform =
189+
`perspective(${currentTarget.clientWidth}px) rotateX(${rotateY}deg) rotateY(${rotateX}deg)`;
190+
}
191+
192+
function resetStyles(e) {
193+
e.currentTarget.style.transform =
194+
`perspective(${e.currentTarget.clientWidth}px) rotateX(0deg) rotateY(0deg)`;
195+
}
196+
197+
const motionMatchMedia = window.matchMedia("(prefers-reduced-motion)");
198+
199+
if (!motionMatchMedia.matches) {
200+
card.addEventListener("mousemove", handleHover);
201+
card.addEventListener("mouseleave", resetStyles);
202+
}
203+
</script>
204+
205+
</body>
206+
207+
</html>

‎Glowing-Border-Animation-with-CSS/pic.png‎

1010 KB
Loading

0 commit comments

Comments
 (0)