This "knockout" effect is one of the coolest things I've come across! Here's how to do it!
HTML-код
- Опубликовано: 25 авг 2024
- In today's tutorial, I'm diving deep into a unique website effect I stumbled upon recently. While browsing for design inspiration, I discovered an amazing knockout card design on the Frame.xyz site. These cards featured a cool geometric pattern that allowed the glowing orbs behind them to shine through. Naturally, I had to figure out how it was done and share it with you!
Join me as I take you step-by-step through the entire process of replicating this knockout card effect on your own website. We'll cover everything from the initial setup to the detailed CSS required to achieve this look. And as a bonus, I'll show you a creative adaptation that combines this effect with glassmorphism for an even more stunning result.
🗨 Join Our Free Community: theadmin.bar/y...
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/y...
🔁 Sell More Care Plans: theadmin.bar/y...
🧮 Use My Website Price Calculator: theadmin.bar/y...
📜 Get My Proposal Template: theadmin.bar/y...
☑️ Get More Done with My Checklists: theadmin.bar/y...
🔴 Live Event Schedule: theadmin.bar/y...
🔧 The Tools I Use: theadmin.bar/y...
⚡ My Agency, OGAL Web Design: theadmin.bar/y...
I have a goal to hit 10K subs this year - if you're not already, please consider helping me by hitting that subscribe button!
I would like to click on subscribe 10 more times, that's how cool I think your channel is!! But unfortunately it only works 1 time. Good luck reaching the 10K 👍
Thank you for sharing. This is so cool. For those that just want the code. Here it is:
Glowing bg effect:
.knockout-wrapper::before, .knockout-wrapper::after {
content: "";
position: absolute;
height: 100%;
aspect-ratio: 1 / 1;
border-radius: 100vw;
filter: blur(100px);
}
.knockout-wrapper::before {
background-color: rgba(128, 0, 128, 0.5); /* Purple */
left: 10%;
}
.knockout-wrapper::after {
background-color: rgba(0, 0, 255, 0.5); /* Blue */
right: 10%;
}
Glassmorphism effect:
.knockout-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('icon-url') no-repeat top -20px right -20px;
mask-image: linear-gradient(black, black), url('icon-url');
mask-size: 100% 100%, 125px;
mask-repeat: no-repeat;
mask-position: center, top right;
mask-composite: subtract;
border-radius: inherit;
z-index: 5;
}
.knockout-card {
position: relative;
backdrop-filter: blur(10px);
z-index: 10;
}
I was also taking notes . . . thank you for doing so!
Great tutorial Kyle. Love how much you can do with mask now. Those cards look sharp! I also appreciate that you wrote the card styling in CSS instead of the builder. As someone that doesn't use the block editor, it made it really easy to follow along.
Thanks so much - really glad you enjoyed it and I appreciate the feedback!
Thanks Kyle, great video. You are right, this is a nice effect. I'm going to give this a try on my next build using ACSS. I appreciate the use of CSS in this video.
Very cool style
Never heard of mask-composite.
There are also other values. intersect, exclude, substract and add.
So they included some pathfinder stuff from Illustrator into CSS. Damn cool.
Im reading your future and I see 10k subscribers real soon 🔮
You are incredible!
aw, shucks - you are!
Love this effect! Great tutorial and easy to follow along! Thank you!
So glad it was helpful!
So cool effect!! Definitly saving this idea!!!
Glad you enjoyed!
Thanks Kyle! that's a great tutorial. LLots of great ideas to work with.
Glad you enjoyed it!
Cool looks! I’m pretty new at builds, but I think you explained the CSS very well. Gonna try these.
Thanks so much - I'm glad it was helpful! 🙌
That was amazing! 😧 I’m definitely trying it later!
Glad you liked it!
Always love your content
Thanks so much, Yasin! 🙌
this is AMAZING!! My CSS is basic at best but I need to learn it so i can do this on my websites!
You got this 🙌 All it takes it practice and trial and error!
Really clever Kyle, well done on reverse engineering that!
…love the glass effect too!
Great tutorial Kyle 👍🏻
Thanks, Amanda!
Hey Kyle, that was a good one! Especially the mask stuff. Well done!
Thanks man - I'm really glad you enjoyed it! 🙌
You are OP 🔥
I'll take that as a compliment and Google what it means later 😂
awesome tutorial
Thank you! 🙌
Good
As always great great content, thanks for those videos, really pro job
Thanks so much - really glad you enjoyed it 🙌
Brilliant!
Hope you can put it to use!
@@TheAdminBar Me too :D ... 10K should be a peace of cake.
Thank you for this wonderful tutorial! I just subscribed. ;-)
Thank you and welcome aboard!
Super tutorial - but I avoid Gutenberg!
Thanks for the video Kyle, top content! Out of curiosity: could any steps in the process have been done with the new updates (global styles) from Gb? Maybe the background gradient?
Yeah, a lot of it **could** be done - but I find it to be a lot more difficult. You end up clicking through so many things.
When doing:
.knockout-card > *{
z-index: 100;
}
and
.knockout-card::after { background:red; }
it isn't adding a background... i am wondering if there are somedefaults you have that are making yours work and mine not.
Hummm hard to say without looking at it. Keep in mind, your pseudo-element must have a position, content, a size, and coordinates.
Could you do it for elementor?
Sorry, I don't use Elementor - I have no idea.
Very nice. You get one more sub to reach your 10k goal.
🙌 Appreciate it!