Pinned
"The Impossible Checkbox 🐻"
Now with sound! 🔊
⚒️ @reactjs && @greensock
💻 codepen.io/jh3y/pen/LYNZw… via @CodePen
00:00
jhey ʕ•ᴥ•ʔ
47.3K posts
jhey ʕ•ᴥ•ʔ
@jh3yy
designing interfaces. engineering experiences.
many can build it. few can explain it.
@shopify brand design studio
💎 playbook waitlist → craftofui.dev
- pro tip: near the end of an interview, tell your interviewers that you want the role
- an "ugly" CSS only version with :has() + anchor positioning ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴
00:11make software silly again - CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #fff, #0000
00:00
00:10Hey, do you like fancy glowing cards? Let's get this tweet to 250 likes, and I'll create a tutorial for it. This is 100% @figma. Xitter is really butchering the quality, check how smooth it is live: figma.com/proto/Aw5VqbnF… - What if the scrollbar went around the corner? 👀 CSS could do that ✨
00:00
00:05 - 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; } }
00:00 - Bringing the bear back to form controls with CSS :has() and CSS anchoring 👀 ʕ´•ᴥ•`ʔ :root:has([type=password]:focus) .paw { top: anchor(--password, top); } Only JavaScript is to toggle the password reveal whose button is anchored to the input 😉 @CodePen link below! 👇
00:00 - JavaScript && CSS Tip! ✨ Use IntersectionObserver(IO) with a low threshold and custom properties to power list animations 🔥 el.style.setProperty('--shown', entry.isIntersecting ? 1 : 0) li { scale: calc(0.25 + (var(--shown, 1) * 0.75));} Demo link below! 👇
00:00
00:18#Flutter animation tip🪄 Bring any boring scroll view in your UI to life (ListView, GridView, ..etc) by wrapping its children with an animated widget and let the itemBuilder do its magic 🪄🧪 (it will run your animation when each item scrolls into view 🤫) Code 👇🏼 - the little details™ Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬 .character { transition-delay: calc(sin((var(--index) / 12) * 45deg) * 0.475s); }
00:00
00:03Still can't believe this effect can be achieved by a single line of code. Mind blowing. - This? Completed it ✨ HTML, CSS, and JavaScript can take you to fun places 🚀 You might spot some added extras in this version! ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴ @CodePen link below 👇
00:00
00:29still laughing at this - Developer Math: Buying a $5,000 Macbook Pro to open a couple of browser windows and a text editor
- CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! @CodePen link below 👇
00:00
quick tip for nested radii → your corners will look a lot better if you set the outer radius to the sum of the inner radius + padding - <table> highlighting with CSS :has() 💡 td:has(~ td:hover), /* previous sibling cells */ table:has(td:nth-of-type(3):hover) /* column cells */ tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(3) { background: var(--highlighted); }
00:00
