Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

sorenblank's profile picture

Soren

7,121 subscribers

425,540 görüntüleme • 9 ay önce •via X (Twitter)

Bilim & TeknolojiEğitimKomedi
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔
0:13

Did you know? ✨ You can create an animated toggle switch in Tailwind CSS using ":checked" pseudo property. View Code 👇 (9/30) follow for 21 more tips 🔔

Surjith S M ✪

57,984 görüntüleme • 3 yıl önce

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,727 görüntüleme • 1 yıl önce

To all the devs telling me my button style was impossible to build with code. I did it in Webflow in 10 minutes using only HTML/CSS. No SVGs.
0:13

To all the devs telling me my button style was impossible to build with code. I did it in Webflow in 10 minutes using only HTML/CSS. No SVGs.

Brett

132,352 görüntüleme • 1 yıl önce

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:
0:15

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,230 görüntüleme • 1 yıl önce

Added three new buttons to my library among 22 other buttons. Made in Webflow using custom CSS. Maybe we can make it a Free Button Friday thing but I can't do it alone 👀 It's a cloneable. Link is in the comments.
0:15

Added three new buttons to my library among 22 other buttons. Made in Webflow using custom CSS. Maybe we can make it a Free Button Friday thing but I can't do it alone 👀 It's a cloneable. Link is in the comments.

Eduard Bodak

15,627 görüntüleme • 1 yıl önce

DOM, JS, and CSS wizards: I made a DOM visualiser which you can run from the JS console, it almost works. If anyone can figure out how to handle z-ordering in 3D so that it looks like a solid stack of DOM slices I WILL 100% UNIRONICALLY BUY YOU A COFFEE!
0:15

DOM, JS, and CSS wizards: I made a DOM visualiser which you can run from the JS console, it almost works. If anyone can figure out how to handle z-ordering in 3D so that it looks like a solid stack of DOM slices I WILL 100% UNIRONICALLY BUY YOU A COFFEE!

Orion Reed

133,717 görüntüleme • 2 yıl önce

Are those … CSS Scroll-Driven Animations on in Safari? Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.
0:14

Are those … CSS Scroll-Driven Animations on in Safari? Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.

Bramus

42,676 görüntüleme • 2 yıl önce

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 görüntüleme • 2 ay önce

I wrestled here. 2018 vs 2025 Took a little longer than I thought it would but god has the perfect plan for everything. And this was so much better than I could have ever dreamt of ❤️ #DreamBig
0:11

I wrestled here. 2018 vs 2025 Took a little longer than I thought it would but god has the perfect plan for everything. And this was so much better than I could have ever dreamt of ❤️ #DreamBig

Sammy Guevara

25,910 görüntüleme • 1 yıl önce

I was lucky enough to be there today when Spencer Pratt voted using his mail ballot. He is already leading by example. No one is busier or has more at stake in this election than Spencer, and if he can do it, so can you Send it. 💌
0:11

I was lucky enough to be there today when Spencer Pratt voted using his mail ballot. He is already leading by example. No one is busier or has more at stake in this election than Spencer, and if he can do it, so can you Send it. 💌

Elizabeth Barcohana

81,422 görüntüleme • 2 ay önce

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser now knows when a sticky element is stuck, all triggered by one container query available only in chromium browsers only, no firefox or safari which is a shame
0:10

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser now knows when a sticky element is stuck, all triggered by one container query available only in chromium browsers only, no firefox or safari which is a shame

Manu Arora

112,131 görüntüleme • 1 ay önce

this bothers me so much, i don't understand why she has to be so interested in something that is no longer her business? girl, what the hell are you doing? (i've tried to be understanding but i just can't stand her
0:13

this bothers me so much, i don't understand why she has to be so interested in something that is no longer her business? girl, what the hell are you doing? (i've tried to be understanding but i just can't stand her

viv ❦ | theolizzy brainrot

108,121 görüntüleme • 11 ay önce

I just spent roughly 15 hours on this navigation component so you don’t have to. and just dropped into the vault 🎉 one thing i really like about this one is the morphing motion, but also something people often overlook: accessibility. it’s fully responsive, keyboard accessible, and built so everyone can actually use it. also, no dependencies. Just vanilla HTML, CSS and JavaScript. you can test and play around with it, link in the comments ↓
0:14

I just spent roughly 15 hours on this navigation component so you don’t have to. and just dropped into the vault 🎉 one thing i really like about this one is the morphing motion, but also something people often overlook: accessibility. it’s fully responsive, keyboard accessible, and built so everyone can actually use it. also, no dependencies. Just vanilla HTML, CSS and JavaScript. you can test and play around with it, link in the comments ↓

FHILY👑

11,733 görüntüleme • 1 ay önce

When my bladder is really full, that typical bladder bulge appears. I try to suc it in as much as I can and keep it flatter so that it doesnt show how much pee inside because i dont need to pee and i dont feel it its just a liquid and im patient. Do you think Im doing it right?
0:18

Sensitive content

When my bladder is really full, that typical bladder bulge appears. I try to suc it in as much as I can and keep it flatter so that it doesnt show how much pee inside because i dont need to pee and i dont feel it its just a liquid and im patient. Do you think Im doing it right?

Ludvig Blanka

61,222 görüntüleme • 1 ay önce

I built a tiny icon-morphing component with AlpineJS + Blade! You literally just pass in two SVGs and it handles the morphing for you. Could be on hover or whatever other trigger/event is needed Super simple to use, but it makes interactions feel so much more polished.
0:13

I built a tiny icon-morphing component with AlpineJS + Blade! You literally just pass in two SVGs and it handles the morphing for you. Could be on hover or whatever other trigger/event is needed Super simple to use, but it makes interactions feel so much more polished.

Liam Hammett

13,718 görüntüleme • 6 ay önce

I build this version of Angry Birds with AI in less than 30 mins. Here's how to do it using Magnific for the assets and Opus 4.8 for vibe coding + ALL the prompts so you can build your own version 👇
0:17

I build this version of Angry Birds with AI in less than 30 mins. Here's how to do it using Magnific for the assets and Opus 4.8 for vibe coding + ALL the prompts so you can build your own version 👇

TechHalla

39,435 görüntüleme • 1 ay önce

40K followers. When I first started using X on a regular basis two years ago, I never thought I’d make it this far. God has blessed me tremendously. I am so thankful for you all. I love you all, and I hope and pray 2026 brings you much joy and many blessings.
0:14

40K followers. When I first started using X on a regular basis two years ago, I never thought I’d make it this far. God has blessed me tremendously. I am so thankful for you all. I love you all, and I hope and pray 2026 brings you much joy and many blessings.

Renatta Oxendine

48,584 görüntüleme • 6 ay önce

Florida Public School are assigning homework to kids that have them using old Archaic words that are no longer used in English You would look at this homework and honestly think these are fake words being taught to kids There has to be better things we couldn’t be teaching our kids in public schools other than words that don’t even exist in our language anymore Example, the word Hatest. This was used during biblical and archaic time. It was used in sentences like “Thou hatest what I love.” We have to do better
0:14

Florida Public School are assigning homework to kids that have them using old Archaic words that are no longer used in English You would look at this homework and honestly think these are fake words being taught to kids There has to be better things we couldn’t be teaching our kids in public schools other than words that don’t even exist in our language anymore Example, the word Hatest. This was used during biblical and archaic time. It was used in sentences like “Thou hatest what I love.” We have to do better

Wall Street Apes

41,597 görüntüleme • 1 ay önce

Big News About Airtel 5G! Hey friends! 🚨 Airtel has made a new rule. You cannot share your Unlimited 5G data with other phones using mobile hotspot. It is only for your own phone. No sharing allowed! Stay smart and use it carefully. 😊 What do you think? Tell me below!
0:10

Big News About Airtel 5G! Hey friends! 🚨 Airtel has made a new rule. You cannot share your Unlimited 5G data with other phones using mobile hotspot. It is only for your own phone. No sharing allowed! Stay smart and use it carefully. 😊 What do you think? Tell me below!

Mohini Maheshwari

67,719 görüntüleme • 2 gün önce