Skip to content

Commit

Permalink
improve border in faqs (#481)
Browse files Browse the repository at this point in the history
Under #448 assigned to me , I improved border of faqs section

As discussed earlier, The current border in FAqs was very plain simple
white border which looks plain and unattractive.
I made it more attractive, I added glowing moving gradient borders, as
you can see in the video it looks beautiful and eye-catchy



https://github.com/user-attachments/assets/15027992-88d4-4361-96b6-fe44c510ba1e
  • Loading branch information
PSS2134 authored Jul 27, 2024
2 parents 8e8a6b9 + 00ce648 commit 9a27cff
Showing 1 changed file with 57 additions and 2 deletions.
59 changes: 57 additions & 2 deletions src/Component/FAQ.css
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,72 @@
margin: 0 5rem;
}
}
@property --gradient-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}


.faq {
border: 1px solid rgba(255, 255, 255, 0.5); /* White border with transparency */
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 8px;
padding: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
background-color: rgba(18, 1, 26, 0.7); /* Violet background color with transparency */
width: 70vw;
position: relative;
padding: 1rem;
border-radius: 3px;
z-index: 1;
}

.faq::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: conic-gradient(
from var(--gradient-angle),
#8126f0,
#b179f0,
#b395ef,
#b179f0,
#8126f0
);
border-radius: inherit;
padding: 0.3rem; /* Adjust as needed for border thickness */
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: moving 1s linear infinite;
}

@keyframes moving {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}








@media screen and (max-width:768px) {
.faq{
width: 85vw;
Expand Down Expand Up @@ -118,4 +173,4 @@
.small{
font-size: 0.75rem;
}
}
}

0 comments on commit 9a27cff

Please sign in to comment.