This Tesla Employee ID Card showcases a modern and stylish design with a touch of high-tech flair, thanks to CSS animations. The card features a sleek, slightly metallic background that gives it a premium look. The Tesla logo, rendered in white, stands out prominently against the dark backdrop.
The card’s design is enhanced by subtle animations, including a shimmering effect achieved through CSS gradients and blending modes. This effect adds a dynamic, futuristic feel. The card also employs a robotic-style font to reflect Tesla’s innovative ethos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shiny Tesla ID Card</title>
<style>
/* Import robotic font */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');
/* Root Variables */
:root {
--zoom: 120;
--unit: 1vmin;
--available-screen-min: 665;
--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
--bg-color: #0c0f11;
--metallic-silver: #a1a1a1;
--dark-gray: #1b1c1f;
--tesla-red: #ffffff; /* Changed to white */
--logo-url: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/2048px-Tesla_Motors.svg.png');
--ticket-shape: url('https://assets.codepen.io/13471/ticket-shape.svg');
--aspect-ratio: 10 / 30;
--gutter: 8%;
--font-family: 'Orbitron', sans-serif; /* Robotic font */
}
/* Global Styles */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-family);
font-size: 16px;
}
body {
background-color: var(--bg-color);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
a {
text-decoration: none;
color: inherit;
}
#app {
perspective: 1200px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ticket {
width: calc(300 * var(--px));
height: calc(400 * var(--px));
aspect-ratio: var(--aspect-ratio);
transform: translate3d(0, 0, 0.1px);
transform-style: preserve-3d;
perspective: 1200px;
position: relative;
cursor: pointer;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
backface-visibility: hidden;
display: grid;
place-items: center;
background: linear-gradient(145deg, var(--metallic-silver), var(--dark-gray));
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
mask-image: var(--ticket-shape);
mask-size: cover;
mask-repeat: no-repeat;
border: 2px solid #333; /* Added a dark border */
}
/* Metallic Shine */
.front::before, .back::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(60deg, rgba(255, 255, 255, 0.3), transparent);
opacity: 0.1;
border-radius: 15px;
}
.front::after, .back::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(60deg, rgba(255, 255, 255, 0.1), transparent 70%);
opacity: 0.3;
border-radius: 15px;
transform: rotateZ(45deg);
}
.front {
transform: rotateY(0deg);
background: linear-gradient(145deg, #2e2e2e, #111111); /* Darker metallic feel */
}
.back {
transform: rotateY(180deg);
background: linear-gradient(145deg, #1c1c1c, #111111);
padding: calc(20 * var(--px));
color: #e0e0e0; /* Lighter text for contrast */
}
.holo {
display: block;
position: absolute;
inset: 0;
border-radius: 15px;
background-image: repeating-linear-gradient(
-45deg,
#d0d0d0 0%,
#b0b0b0 calc(var(--space) * 1),
#d0d0d0 calc(var(--space) * 2),
#b0b0b0 calc(var(--space) * 3),
#d0d0d0 calc(var(--space) * 4),
#b0b0b0 calc(var(--space) * 5),
#d0d0d0 calc(var(--space) * 6),
#b0b0b0 calc(var(--space) * 7),
#d0d0d0 calc(var(--space) * 8)
);
background-size: 150vw 150vh;
background-position: calc(var(--h)) calc(var(--h));
background-repeat: no-repeat;
mask-image: var(--logopng);
mask-size: 80% 80%;
mask-repeat: no-repeat;
mask-position: 150% 180%;
mix-blend-mode: plus-lighter;
filter: brightness(1.1) contrast(1.2) saturate(1.5);
opacity: var(--o);
}
.logo {
width: 40%;
z-index: 3;
filter: brightness(0) invert(1); /* Apply white color to the logo */
}
.divider {
position: absolute;
bottom: 2%;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, transparent, var(--tesla-red), transparent);
z-index: 3;
}
#id_number {
position: absolute;
top: calc(10 * var(--px));
right: calc(10 * var(--px));
font-weight: bold;
font-size: calc(14 * var(--px));
color: #e0e0e0; /* Light silver ID color */
}
.data {
position: absolute;
bottom: calc(50 * var(--px));
left: calc(20 * var(--px));
text-align: left;
z-index: 3;
}
.name {
font-size: calc(26 * var(--px));
font-weight: 700;
margin-bottom: calc(5 * var(--px));
color: #ffffff; /* White for robotic feel */
}
.position {
font-size: calc(18 * var(--px));
margin-bottom: calc(5 * var(--px));
color: #bbbbbb;
}
.employee-since {
font-size: calc(14 * var(--px));
color: #888888;
}
.back .divider {
height: 3px;
background: linear-gradient(to right, #ffffff, #ffffff);
}
/* Responsive Design */
@media (max-width: 400px) {
.ticket {
width: calc(250 * var(--px));
height: calc(333.33 * var(--px));
}
.name {
font-size: calc(22 * var(--px));
}
.position {
font-size: calc(16 * var(--px));
}
.employee-since {
font-size: calc(12 * var(--px));
}
}
</style>
</head>
<body>
<div id="app">
<div class="ticket">
<!-- Front Side -->
<div class="front">
<div class="holo"></div>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/2048px-Tesla_Motors.svg.png" alt="Tesla Logo" />
<div id="id_number">ID: 00004521</div>
<div class="divider"></div>
</div>
<!-- Back Side -->
<div class="back">
<div class="holo"></div>
<div class="data">
<div class="name">John Doe</div>
<div class="position">Senior Engineer</div>
<div class="employee-since">Employee Since: 2022</div>
</div>
<div class="divider"></div>
</div>
</div>
</div>
<!-- GSAP Animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
const speed = 3;
const ticket = document.querySelector(".ticket");
const rotationTimeline = gsap.timeline({ repeat: -1, yoyo: true });
rotationTimeline.to(ticket, {
rotationY: 360,
duration: speed,
ease: "none"
});
ticket.addEventListener("mouseenter", () => {
rotationTimeline.pause();
});
ticket.addEventListener("mouseleave", () => {
rotationTimeline.resume();
});
</script>
</body>
</html>
Credit : https://codepen.io/gambhirsharma/pen/jORpEQy
