@@IAmLesleh although no one asked, the backdrop-filter css property is by default disabled in firefox 70. You can set *layout.css.backdrop-filter.enabled* and *gfx.webrender.all* to *true* in the *preferences* menu. I hope that helps!
@@vineboomsoundeffect5395 You can use the @supports query to see if the browser supports it, it works sort of like a media query if you weren't aware. So you can use the backdrop filter inside of the supports, and then in the normal div you can use an alternative or that.
Thanks for this great tutorial, I used this effect with a world turning and added the backface-visibility: hidden; property to hide the back part of the text to give the illusion that it is going behind the world.
This is just amazing... Iam baffled. Working with CSS every day at work, but never touched the 3d CSS parts. Amazing what is possible over there. Whole new world xD
I've been thinking about making an old-fashioned clock radio in CSS for a while now. After seeing this I really think it is possible. Now to find the time to build it 😉 (🙏🏻🙏🏻🙏🏻🙏🏻❤️📼)
Man, it's so freaking cool and quite easy to do, but I'd love to see it combined with JavaScript to calculate things so that you don't have to trial-and-error the pixel values. Have a React component for the spinning text, provide your text and width and height, let the component calculate what you need, let the component generate the HTML elements and provide them each with their CSS variables. Make things easily reusable. This in its entirety feels, because it's CSS, hardly like something you'd want to use because (let's be honest) many people are scared of CSS and it doesn't follow a syntax of what we're used to with programming languages. Take it to the next level? ;)
Nice to see it. I have made, before this video, a carrousel with pictures with links to other pages on my website. And thanks to the video with the bouncing ball (thank you Amit) I have the floor underneath the carrousel (fixed, not rotating).
There is a certain point where using the right tool for the right job is just better. If you use three.js, you not only get 3D, but you get a lot of control with lighting, texturing, animation and interaction. And it doesn't take wizard skills to do it. But this is cool to see what is possible.
you're advocating shipping hundreds of KB of JS library and JS code instead of 50 lines of CSS? lol OK Three.js is clearly not the correct tool for something like this.
Awesome video and really fun to code along with. Does anyone have a simple explanation for how the --left variable is able to spread the letters out like that? Thanks.
The way I understand it: Since overflow is set to hidden it translates the text negatively to the left. For the first panel it stays where it is, second translates one panels width to the left, third translates two panels widths to the left, fourth three panels widths, etc
8:57 Since you only have five panels, you don't need the loop to be `0 to 5` (which is actually 6 steps)...you could have gotten away with `0 to 4`. As it stands you're targeting a non-existent nth-child(6) selector. Doesn't really hurt anything, but it's good to be precise and you don't need the extra selector.
Absolutely superb Collab video again. Keep doing videos together! They're a great watch. I might try and use this with a logo transition I did for a client. I'll be sure to share it on Twitter if I do!
Hello Kevin and Community, very nice Content u give us here to learn and love css! Really appreciate this! Now I do ur conqRespWeb Course its so cool. U do an amazin job and its !!noticable u love css and u share it with us. I start without css and tables I hated div and css, later responsive i hate it.. now i love it! Its a journey. Great Job!
Hello Kevin Powell, I was wondering if you know how to host websites for free or paid. I search and I saw you video "How to host your website for free" but that was posted in Sep 26, 2018. So I was wondering if you could make a new video for 2021 for website hosting websites and maybe some new ones as well. Thankyou for your help :)
2 года назад
It's so frustrating following the instrutions but not finding the right result! Can you please tell me what am I doing wrong? .panel:nth-child(5) { --left: -400px ; This doesn't make any change in the panels position And when I tried to set the position by programming: document.querySelectorAll(".panel").forEach((x,i) => x.style.left = (i* -100) +"px"); I've obtained a "matrioschka" of panels (I don't know why instead of overlapping it shows the borders one inside the other) Can you please tell me what am I doing wrong?
H Rafa, You're missing the last curly brackets in this line. .panel:nth-child(5) { --left: -400px ; If you have any other problems, please share a link to a CodePen so I can help you.
2 года назад
@@amit_sheen Thank you very much. I didn't: it was a way (A bad way, evidently) of abbreviating)
