122 lines
3.0 KiB
HTML
122 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Animated Gradient Border</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
*,
|
||
|
|
::before,
|
||
|
|
::after {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: grid;
|
||
|
|
place-content: center;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
position: relative;
|
||
|
|
/* border: 1px solid red; */
|
||
|
|
width: 20ch;
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* this is the one where the magic happens */
|
||
|
|
.card::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: calc(100% + 8px);
|
||
|
|
height: calc(100% + 8px);
|
||
|
|
transform: translate(-4px, -4px);
|
||
|
|
/* play with the degrees till you are happy with the animation effect */
|
||
|
|
background: linear-gradient(60deg, #5ff281, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f), 0 50%;
|
||
|
|
/* effectively zooming in on the colors, needs to be higher than 100% 100% */
|
||
|
|
background-size: 300% 300%;
|
||
|
|
/* can be whatever you want, but card must also have the same border radius */
|
||
|
|
border-radius: 8px;
|
||
|
|
/* to make it appear as just the border, need a color set for the background of the card */
|
||
|
|
z-index: -1;
|
||
|
|
|
||
|
|
animation: animated-gradient 2.5s alternate infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card h2 {
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card .card__price-per-month {
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card .link {
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: white;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
border: 2px solid white;
|
||
|
|
/* for pill shape */
|
||
|
|
border-radius: 20%/50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card a:is(:focus, :hover) {
|
||
|
|
background-color: rgb(67, 64, 64);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes animated-gradient {
|
||
|
|
50% {
|
||
|
|
background-position: 100% 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>Animated Gradient Border</h1>
|
||
|
|
<p>From a youtube short video, link to be added later.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<div class="card">
|
||
|
|
<h2>Premium</h2>
|
||
|
|
<div class="card__price-per-month">
|
||
|
|
<span>$20</span>
|
||
|
|
<span>/</span>
|
||
|
|
<span>month</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="link"><a href="#">Get started</a></div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|