آخرین مطالب

۷۰

افکت هولوگرافیک و شب رنگ برای کارت ها Pokemon Card Holo Effect

... Loading

در این کد ما تعدادی کارت پاستور (Pokémon) روی صفحه داریم که بصورت افقی در یک سطر کنار هم چیده شده‌اند و کاربر میتواند با Hover کردن روی آن ها از نوعی افکت زیبای هولوگرافیک و شب رنگ که با کمک CSS و Javascript برای ایجاد تعاملات موس ساخته شده است بهره‌مند شود، این افکت بسیار زیباست و از Box-Shadow و Gradient و Keyframes استفاده میکند که باعث شده حالتی براق و درخشان داشته باشد، همچنین در پست بعدی یک نمونه بهتر و ارتقا یافته از این کد وجود دارد. شماره کد: 12

منبع کد

HTML


Please checkout the newer version of this; https://codepen.io/simeydotme/pen/abYWJdX
Pokemon Card, Holo Effect









+
color-dodge
+
color-dodge





View Version 2, much improved here

CSS

:root {
--color1: rgb(0, 231, 255);
--color2: rgb(255, 0, 231);
--back: url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);
--charizard1: #fac;
--charizard2: #ddccaa;
--charizardfront: url(https://assets.codepen.io/13471/charizard-gx.webp);
--pika1: #54a29e;
--pika2: #a79d66;
--pikafront: url(https://assets.codepen.io/13471/pikachu-gx.webp);
--eevee1: #efb2fb;
--eevee2: #acc6f8;
--eeveefront: url(https://assets.codepen.io/13471/eevee-gx.webp);
--mewtwo1: #efb2fb;
--mewtwo2: #acc6f8;
--mewtwofront: url(https://assets.codepen.io/13471/mewtwo-gx.webp);
}
.card {
width: 71.5vw;
height: 100vw;
position: relative;
overflow: hidden;
margin: 20px;
overflow: hidden;
z-index: 10;
touch-action: none;
border-radius: 5%/3.5%;
box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
transition: transform 0.5s ease, box-shadow 0.2s ease;
will-change: transform, filter;
background-color: #040712;
background-image: var(--front);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transform-origin: center;
}
@media screen and (min-width: 600px) {
.card {
width: clamp(12.9vw, 61vh, 18vw);
height: clamp(18vw, 85vh, 25.2vw);
}
}
.card:hover {
box-shadow: -20px -20px 30px -25px var(--color1), 20px 20px 30px -25px var(--color2), -7px -7px 10px -5px var(--color1), 7px 7px 10px -5px var(--color2), 0 0 13px 4px rgba(255, 255, 255, 0.3), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}
.card.charizard {
--color1: var(--charizard1);
--color2: var(--charizard2);
--front: var(--charizardfront);
}
.card.pika {
--color1: var(--pika1);
--color2: var(--pika2);
--front: var(--pikafront);
}
.card.mewtwo {
--color1: var(--mewtwo1);
--color2: var(--mewtwo2);
--front: var(--mewtwofront);
}
.card.eevee {
--color1: #ec9bb6;
--color2: #ccac6f;
--color3: #69e4a5;
--color4: #8ec5d6;
--color5: #b98cce;
--front: var(--eeveefront);
}
.card:before,
.card:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-repeat: no-repeat;
opacity: 0.5;
mix-blend-mode: color-dodge;
transition: all 0.33s ease;
}
.card:before {
background-position: 50% 50%;
background-size: 300% 300%;
background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
opacity: 0.5;
filter: brightness(0.5) contrast(1);
z-index: 1;
}
.card:after {
opacity: 1;
background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
background-position: 50% 50%;
background-size: 160%;
background-blend-mode: overlay;
z-index: 2;
filter: brightness(1) contrast(1);
transition: all 0.33s ease;
mix-blend-mode: color-dodge;
opacity: 0.75;
}
.card.active:after,
.card:hover:after {
filter: brightness(1) contrast(1);
opacity: 1;
}
.card.active,
.card:hover {
-webkit-animation: none;
animation: none;
transition: box-shadow 0.1s ease-out;
}
.card.active:before,
.card:hover:before {
-webkit-animation: none;
animation: none;
background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
background-position: 50% 50%;
background-size: 250% 250%;
opacity: 0.88;
filter: brightness(0.66) contrast(1.33);
transition: none;
}
.card.active:before,
.card:hover:before,
.card.active:after,
.card:hover:after {
-webkit-animation: none;
animation: none;
transition: none;
}
.card.animated {
transition: none;
-webkit-animation: holoCard 12s ease 0s 1;
animation: holoCard 12s ease 0s 1;
}
.card.animated:before {
transition: none;
-webkit-animation: holoGradient 12s ease 0s 1;
animation: holoGradient 12s ease 0s 1;
}
.card.animated:after {
transition: none;
-webkit-animation: holoSparkle 12s ease 0s 1;
animation: holoSparkle 12s ease 0s 1;
}
@-webkit-keyframes holoSparkle {
0%, 100% {
opacity: 0.75;
background-position: 50% 50%;
filter: brightness(1.2) contrast(1.25);
}
5%, 8% {
opacity: 1;
background-position: 40% 40%;
filter: brightness(0.8) contrast(1.2);
}
13%, 16% {
opacity: 0.5;
background-position: 50% 50%;
filter: brightness(1.2) contrast(0.8);
}
35%, 38% {
opacity: 1;
background-position: 60% 60%;
filter: brightness(1) contrast(1);
}
55% {
opacity: 0.33;
background-position: 45% 45%;
filter: brightness(1.2) contrast(1.25);
}
}
@keyframes holoSparkle {
0%, 100% {
opacity: 0.75;
background-position: 50% 50%;
filter: brightness(1.2) contrast(1.25);
}
5%, 8% {
opacity: 1;
background-position: 40% 40%;
filter: brightness(0.8) contrast(1.2);
}
13%, 16% {
opacity: 0.5;
background-position: 50% 50%;
filter: brightness(1.2) contrast(0.8);
}
35%, 38% {
opacity: 1;
background-position: 60% 60%;
filter: brightness(1) contrast(1);
}
55% {
opacity: 0.33;
background-position: 45% 45%;
filter: brightness(1.2) contrast(1.25);
}
}
@-webkit-keyframes holoGradient {
0%, 100% {
opacity: 0.5;
background-position: 50% 50%;
filter: brightness(0.5) contrast(1);
}
5%, 9% {
background-position: 100% 100%;
opacity: 1;
filter: brightness(0.75) contrast(1.25);
}
13%, 17% {
background-position: 0% 0%;
opacity: 0.88;
}
35%, 39% {
background-position: 100% 100%;
opacity: 1;
filter: brightness(0.5) contrast(1);
}
55% {
background-position: 0% 0%;
opacity: 1;
filter: brightness(0.75) contrast(1.25);
}
}
@keyframes holoGradient {
0%, 100% {
opacity: 0.5;
background-position: 50% 50%;
filter: brightness(0.5) contrast(1);
}
5%, 9% {
background-position: 100% 100%;
opacity: 1;
filter: brightness(0.75) contrast(1.25);
}
13%, 17% {
background-position: 0% 0%;
opacity: 0.88;
}
35%, 39% {
background-position: 100% 100%;
opacity: 1;
filter: brightness(0.5) contrast(1);
}
55% {
background-position: 0% 0%;
opacity: 1;
filter: brightness(0.75) contrast(1.25);
}
}
@-webkit-keyframes holoCard {
0%, 100% {
transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
}
5%, 8% {
transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
}
13%, 16% {
transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
}
35%, 38% {
transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
}
55% {
transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
}
}
@keyframes holoCard {
0%, 100% {
transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
}
5%, 8% {
transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
}
13%, 16% {
transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
}
35%, 38% {
transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
}
55% {
transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
}
}
.card.eevee:hover {
box-shadow: 0 0 30px -5px white, 0 0 10px -2px white, 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}
.card.eevee:hover:before,
.card.eevee.active:before {
background-image: linear-gradient(115deg, transparent 20%, var(--color1) 36%, var(--color2) 43%, var(--color3) 50%, var(--color4) 57%, var(--color5) 64%, transparent 80%);
}
.demo .card {
background-image: var(--back);
font-size: 2vh;
}
.demo .card > span {
position: relative;
top: 45%;
}
.demo .card:nth-of-type(1),
.demo .card:nth-of-type(2),
.demo .card:nth-of-type(3) {
width: 20vh;
height: 27.5vh;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 25px 15px -10px rgba(0, 0, 0, 0.5);
-webkit-animation: none;
animation: none;
}
.demo .card:nth-of-type(1):before, .demo .card:nth-of-type(1):after,
.demo .card:nth-of-type(2):before,
.demo .card:nth-of-type(2):after,
.demo .card:nth-of-type(3):before,
.demo .card:nth-of-type(3):after {
-webkit-animation: none;
animation: none;
}
.demo .card:nth-of-type(1):before, .demo .card:nth-of-type(1):after {
display: none;
}
.demo .card:nth-of-type(2) {
background: none;
}
.demo .card:nth-of-type(2):before {
display: none;
}
.demo .card:nth-of-type(3) {
background: none;
}
.demo .card:nth-of-type(3):after {
display: none;
}
.operator {
display: inline-block;
vertical-align: middle;
font-size: 6vh;
}
html, body {
height: 100%;
background-color: #333844;
padding: 0;
z-index: 1;
transform: translate3d(0, 0, 0.1px);
}
body {
color: white;
background-color: #333844;
font-family: "Heebo", sans-serif;
text-align: center;
}
h1 {
display: block;
margin: 30px 0;
}
p {
margin-top: 5px;
font-weight: 200;
}
#app {
position: relative;
}
.demo,
.cards {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
perspective: 2000px;
position: relative;
z-index: 1;
transform: translate3d(0.1px, 0.1px, 0.1px);
}
.demo {
flex-direction: row;
justify-content: center;
}
@media screen and (min-width: 600px) {
.cards {
flex-direction: row;
}
}
.cards .card:nth-child(2), .cards .card:nth-child(2):before, .cards .card:nth-child(2):after {
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
.cards .card:nth-child(3), .cards .card:nth-child(3):before, .cards .card:nth-child(3):after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.cards .card:nth-child(4), .cards .card:nth-child(4):before, .cards .card:nth-child(4):after {
-webkit-animation-delay: 0.75s;
animation-delay: 0.75s;
}
p {
font-weight: 400;
font-size: 18px;
padding: 1em;
background: rgba(0, 0, 0, 0.3);
margin-top: 0;
-webkit-animation: rubberBand 1.5s linear 3s 1;
animation: rubberBand 1.5s linear 3s 1;
}
.promo {
margin-top: 50px;
}
.promo img {
margin-top: 10px;
max-width: 80%;
}
p a {
color: cyan;
}
html, body, main {
min-height: 100%;
}
@-webkit-keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}

/*
using
- an animated gif of sparkles.
- an animated gradient as a holo effect.
- color-dodge mix blend mode
*/
var x;
var $cards = $(".card");
var $style = $(".hover");
$cards
.on("mousemove touchmove", function(e) {
// normalise touch/mouse
var pos = [e.offsetX,e.offsetY];
e.preventDefault();
if ( e.type === "touchmove" ) {
pos = [ e.touches[0].clientX, e.touches[0].clientY ];
}
var $card = $(this);
// math for mouse position
var l = pos[0];
var t = pos[1];
var h = $card.height();
var w = $card.width();
var px = Math.abs(Math.floor(100 / w * l)-100);
var py = Math.abs(Math.floor(100 / h * t)-100);
var pa = (50-px)+(50-py);
// math for gradient / background positions
var lp = (50+(px - 50)/1.5);
var tp = (50+(py - 50)/1.5);
var px_spark = (50+(px - 50)/7);
var py_spark = (50+(py - 50)/7);
var p_opc = 20+(Math.abs(pa)*1.5);
var ty = ((tp - 50)/2) * -1;
var tx = ((lp - 50)/1.5) * .5;
// css to apply for active card
var grad_pos = `background-position: ${lp}% ${tp}%;`
var sprk_pos = `background-position: ${px_spark}% ${py_spark}%;`
var opc = `opacity: ${p_opc/100};`
var tf = `transform: rotateX(${ty}deg) rotateY(${tx}deg)`
// need to use a

Category:

Background Body Other Cool Gradient Shadow Hover Card Admin's Choise

Tags:

Holographic Effect with CSS Hover on Card simeydotme@ افکت هولوگرافیک افکت گردنیت زیبا ساخت کارت با CSS

Author:

newuiux

Date:

چهارشنبه, ۳۱ مرداد ۱۴۰۳

Number:

13

تعداد کل صفحات: 0 است. شماره صفحه مورد نظر را در فیلد زیر وارد کنید:

آیا میدانید با عضویت در کانال تلگرام میتوانید تمام پست های سایت را مستقیم از تلگرام دریافت کنید و در آینده به محتوای اختصاصی مانند: ویدیوهای آموزشی، سمپل پالت رنگ، معرفی ابزار، مقالات و.. دسترسی خواهید داشت؟

آلبوم زیبای موسیقی الکترونیک سبک سای ترنس کلاسیک به نام Eye 2 Eye

Astrix's debut studio psy-trance album "Eye 2 Eye" (2002)

https://electera.ir/254

دانلود موزیک الکترونیک رایگان و آرامش بخش Adagio for Strings

Beautiful and copyright-FREE electroacoustic music by Martin Roth

https://electera.ir/198

تمام نسخه های آهنگ ترنس قدیمی و خاطره انگیز Resurection از PPK

PPK's electronic trance music masterpiece "Resurection" (2001)

https://electera.ir/139