پیشنمایش زنده
کد HTML
<div class="card">
<svg
class="img"
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
width="100%"
height="100%"
version="1.1"
shape-rendering="geometricPrecision"
text-rendering="geometricPrecision"
image-rendering="optimizeQuality"
fill-rule="evenodd"
clip-rule="evenodd"
viewBox="0 0 784.37 1277.39"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"></metadata>
<g id="_1421394342400">
<g>
<polygon
fill="#343434"
fill-rule="nonzero"
points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"
></polygon>
<polygon
fill="#8C8C8C"
fill-rule="nonzero"
points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33"
></polygon>
<polygon
fill="#3C3C3B"
fill-rule="nonzero"
points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"
></polygon>
<polygon
fill="#8C8C8C"
fill-rule="nonzero"
points="392.07,1277.38 392.07,956.52 -0,724.89"
></polygon>
<polygon
fill="#141414"
fill-rule="nonzero"
points="392.07,882.29 784.13,650.54 392.07,472.33"
></polygon>
<polygon
fill="#393939"
fill-rule="nonzero"
points="0,650.54 392.07,882.29 392.07,472.33"
></polygon>
</g>
</g>
</g>
</svg>
<div class="textBox">
<p class="text head">Ethereum</p>
<span>Cryptocurrency</span>
<p class="text price"><span class="currency">€</span>1.654,34</p>
</div>
</div>
کد CSS
.card {
width: 210px;
height: 290px;
border-radius: 22px;
position: relative;
overflow: hidden;
display: grid;
place-items: center;
color: #fff;
background: radial-gradient(
120% 120% at 20% 0%,
rgba(255, 255, 255, 0.08),
transparent 55%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.02)
);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
transition:
transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 220ms ease;
will-change: transform;
}
.card::before {
content: "";
position: absolute;
inset: -60px;
background: radial-gradient(
circle at 30% 20%,
rgba(120, 170, 255, 0.22),
transparent 45%
),
radial-gradient(
circle at 70% 80%,
rgba(160, 90, 255, 0.18),
transparent 50%
);
filter: blur(18px);
opacity: 0.55;
transition: opacity 220ms ease;
}
.card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.12),
transparent 40%
);
opacity: 0.55;
pointer-events: none;
}
.img {
height: 62%;
position: absolute;
z-index: 1;
opacity: 0.92;
transform: translateY(2px) scale(1);
transition:
transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 260ms ease,
filter 260ms ease;
will-change: transform;
}
.textBox {
z-index: 2;
width: 100%;
padding: 18px 18px 16px;
display: grid;
gap: 10px;
justify-items: center;
opacity: 0;
transform: translateY(10px);
transition:
opacity 200ms ease,
transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.head {
margin: 0;
font-size: 22px;
letter-spacing: 0.2px;
}
span {
font-size: 12px;
color: rgba(255, 255, 255, 0.42);
text-transform: uppercase;
font-weight: bold;
}
.price {
margin: 0;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.2px;
}
.currency {
font-size: 14px;
opacity: 0.85;
margin-right: 2px;
}
.card:hover,
.card:focus-visible {
transform: translateY(-4px) scale(1.03);
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}
.card:hover::before,
.card:focus-visible::before {
opacity: 0.85;
}
.card:hover .textBox,
.card:focus-visible .textBox {
opacity: 1;
transform: translateY(0);
}
.card:hover .img,
.card:focus-visible .img {
transform: translateY(-10px) scale(1.04);
opacity: 0.35;
filter: blur(2px);
}
.card:hover .img {
animation: float 2.4s ease-in-out infinite;
filter: blur(2px);
}
@keyframes float {
0%,
100% {
transform: translateY(4px);
}
50% {
transform: translateY(-16px);
}
}