"Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid." - Albert Einstein
They say I make $45K/month just by pure luck and just by posting my MRR on Twitter 🙃
I'll ignore them and have my 8 years of GitHub graph printed on my wall as a self-reminder ✅
CSS Tip! 💫
You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀)
.warp {
container-type: size;
perspective: 100px;
transform-style: preserve-3d;
resize: both;
overflow: hidden;
}
Couple of tricks in this one 🤓
The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨
.side {
background:
linear-gradient(#fff 0 1px, transparent 1px 5%)
50% 0 / 5% 5%,
linear-gradient(90deg, #fff 0 1px, transparent 1px 5%)
50% 50% / 5% 5%;
}
To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉
.warp__side--top {
width: 100cqi;
height: 100cqmax;
transform-origin: 50% 0%;
transform: rotateX(-90deg);
}
The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶
Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️
We can control that through scoped custom properties.
<div
class="beam"
style="
--hue: 271;
--ar: 5;
--x: 15;
--speed: 3.5;
--delay: 3.5;
">
</div>
.beam {
width: 5%;
position: absolute;
top: 0;
left: calc(var(--x, 0) * 5%);
aspect-ratio: 1 / 2;
background: linear-gradient(
hsl(var(--hue) 80% 60%), transparent
);
translate: 0 100%;
animation:
warp
calc(var(--speed, 0) * 1s)
calc(var(--delay, 0) * -1s) infinite linear;
}
The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥
@keyframes warp {
0% { translate: -50% 100cqmax; }
100% { translate: -50% -100%; }
}
And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ
@CodePen link below! 👇
🔴 FIRST LOOK: TEKKEN BALL Mode in TEKKEN 8! 🔵
🏐 TEKKEN BALL Mode is back in TEKKEN 8, and it's looking better than ever. Check out this very first Gameplay Footage to get a taste of what's to come.
How does it look? Share your thoughts! #TEKKEN8#TEKKENBALL
Future CSS Tip! 🔮
You can create sweet scroll-driven micro-interactions using CSS scroll-driven animations 😎
.avatar {
animation: scale-down;
animation-timeline: scroll();
animation-range: var(--header-range);
}
@ keyframes scale-down {
to {
scale: 0.3;
}
}
What's happening in this one? 👀
1. Avatar moves and scales down as the header sticks
2. Name changes color and slides over
3. Header darkens to give the text contrast
4. Header gets a shadow
5. Notice the avatar scrub too! 👀 It's scroll-driving the sprite animation technique we went over earlier in the week ✨
So much fun! ✨ Could even tie in the new easings from earlier too!
@CodePen link below! 👇