@LeaVerou @Mishi_2210 👏 Bravo Lea! However, the Alfred app thinks that a couple of digits still have been lost :)
English
Alex Nuzhnyi
624 posts
Alex Nuzhnyi
@Nekto_Designer
Designer who codes, with a passion in AR, typography, and motion design.
Kyiv, Ukraine Katılım Aralık 2014
51 Takip Edilen54 Takipçiler
Answer is not "300"
Tell me the answer and win $1000
English
@jh3yy @CodePen @jh3yy Another awesome concept! 😎Thanks a lot, Jhey!
In my opinion, from the UX point of view it would be better to have the Close button at the same place as the Menu button on mobile: codepen.io/Nekto/full/vEL…. Just to save that extra movement necessary to close the popover 😉
English
noticed a fair few "details" missing in the original – made sure to put them in my version, will follow up with some posts for them 🤙
here's the @CodePen 🚀
codepen.io/jh3y/pen/KwVvX…
English
responsive CSS pinned sidebar transition 📌
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
jhey ʕ•ᴥ•ʔ@jh3yy
tag him and he will come 🏷️ can take it a step further without needing JS to toggle the sidebar persistent state too (useState is being used in this demo to persist open/closed 👇) feel obliged as soon as I’m tagged 😅
English
Alex Nuzhnyi retweetledi
Creativity isn't magic... it's feelings, little tweaks, and a lot of heart. 💜
In the first part of his new series "Creating Emotionally Meaningful Experiences with AI, Three.js, and Blender", @andrewwoan shows us how to find meaning in what we make. 🐼
Set aside a little time, it's so worth it: tympanus.net/codrops/2025/1…
English
Alex Nuzhnyi retweetledi
AI can generate.
But it can't care. It can't feel.
The meaning behind what we make, that's something only we bring.
@andrewwoan new series is a powerful reminder: creativity isn't about talent, it's about emotion, persistence, and finding joy in the process: tympanus.net/codrops/?p=960…
Thank you, Andrew 💙🙏
English
Alex Nuzhnyi retweetledi
🎥 New (Video) Podcast: "Navigating the World of Web Accessibility with Sara Soueidan", with Kevin Powell
youtube.com/watch?v=ndGKjh…
I finally sat down with Kevin for a long-overdue, in-depth conversation about web accessibility, and we had a blast!
YouTube
English
I'm always amazed how Three.js makes the 3D magic happen on the Web. Simply love it! ❤️🤗
#threejs #animation #typography
flying-bird-three.vercel.app
English
Alex Nuzhnyi retweetledi
It’s not new but I just discovered this @oatmeal post and I think it may well be my favorite of his.
“Sometimes going down the wrong path isn’t a mistake — it’s a construction line”
Amen to that!
theoatmeal.com/comics/creativ…
English
English
Alex Nuzhnyi retweetledi
Trying to design a standout website?
Check out these quick tips, inspired by the new @jittervideo site.
English
It's one of the best 5 minutes I've spent online! 🤩
The History of Typography by Ben Barrett-Forrest 👉 vimeo.com/65899856. Incredibly informative and beautifully orchestrated 👏 Must watch for any designer or typography enthusiast.
English
@greensock @SublimioDesign @matteomodica @andrea_ciulu Congrats on launching the website!
However, this is probably one of the most unreadable font faces that I have ever met... No idea what's the point of making texts so painful to read 🙄 #fonts #legibility #readability
English
💚 Site of the Day - OODOS
Website by Sublimio @sublimiodesign
Designer: Matteo Modica @matteomodica
Copywriter: Andrea Ciulu @andrea_ciulu
Dev: Marco Catone
⚙️ ScrollTrigger Observer
site → oodos.life
showcase → gsap.com/showcase
English
Alex Nuzhnyi retweetledi
Interactive sunny-side pattern! 🍳
(a little tribute to my love for gooey shapes and dumb demos)
Live demo & source code: codepen.io/ksenia-k/full/…
Made with #webgl #shader and a bit of GSAP (@greensock)
Hosted on @CodePen
English
Are you new to accessibility or looking to level up your skills? Then dive into the Practical Accessibility course by @SaraSoueidan.
🔥 practical-accessibility.today
Get 25% off the course’s full price using the code ANNIVERSARY, til Monday, October 20th (UTC). Learn from the best! 😎
English
@MatthiasCordes Love this trick! I added it to my toolbelt for German websites 🙂 Herzlichen Dank, Matthias!
P.S. I couldn't resist to create a quick demo, to keep this valuable trick in mind: codepen.io/Nekto/full/OJq….
English
Alex Nuzhnyi retweetledi
How to make extremely long words fit mobile screens
1. Copy a soft hyphen.
2. Select a location for an optional word break.
3. Paste the soft hyphen.
Especially useful for improving responsiveness and reducing risks of unwanted content overflows.
English
Alex Nuzhnyi retweetledi
Alex Nuzhnyi retweetledi
UI && CSS Tip! 🔥
You can create these dynamic glowing card effects with a single JavaScript event listener, some CSS tricks, and an HTML attribute 🤙
Here's how! 👇
You can use a combination of tricks from previous posts. Let's start with the JavaScript 📜
Use a function like this to send the pointer position via custom properties to the glows ✨ Attach this to the pointermove event 👆
const onPointermove = ({ x, y }) => {
document.documentElement.style.setProperty('--x', x)
document.documentElement.style.setProperty('--xp', x / innerWidth)
document.documentElement.style.setProperty('--y', y)
document.documentElement.style.setProperty('--yp', y / innerHeight)
}
Now for the styles 🎨 These custom properties define the border and spotlight size. The first trick is how you can change the color(--hue) based on the pointer position with calc 😎
[data-glow] {
--border-size: 2px;
--spotlight-size: 150px;
--hue: calc(var(--base) + (var(--xp) * var(--spread)));
}
The magic is using the pointer position in a radial-gradient combined with background-attachment: fixed ✨ (Check the video for an exploding view 🎞️)
[data-glow] {
background-image: radial-gradient(
var(--spotlight-size) var(--spotlight-size) at
calc(var(--x, 0) * 1px)
calc(var(--y, 0) * 1px),
hsl(var(--hue) 100% 70% / 0.25), transparent
);
background-attachment: fixed;
}
The last major piece is using mask-composite on the pseudoelements of the [data-glow] element and the same background-attachment: fixed trick 🫶
[data-glow]::before,
[data-glow]::after {
pointer-events: none;
content: "";
position: absolute;
inset: calc(var(--border-size) * -1);
border: var(--border-size) solid transparent;
background-attachment: fixed;
background-size: calc(100% + (2 * var(--border-size)));
background-position: 50% 50%;
mask:
linear-gradient(transparent, transparent),
linear-gradient(white, white);
mask-clip: padding-box, border-box;
mask-composite: intersect;
}
This masks the elements so only a fake border is shown. That border is actually the spotlight background that moves around 👀 But now it's clipped to the border width 😎
Then it's a case of switching out the background-image for each pseudoelement based on purpose 🧐
For example, to get the white light, use your custom properties, make the light a little smaller and the color bright!
[data-glow]::after {
background-image: radial-gradient(
calc(var(--spotlight-size) * 0.5)
calc(var(--spotlight-size) * 0.5) at
calc(var(--x, 0) * 1px)
calc(var(--y, 0) * 1px),
hsl(0 100% 100% / 1), transparent
);
}
These are the major pieces you need to get it done. Extras?
Want the outer glow? Nest a glow!
Give the inner glow a blur to create the outer glow 😅
[data-glow] > [data-glow] { filter: blur(10px); }
It's worth digging in with this one. Have a play around with the demo and the custom properties.
The code isn't perfect after introducing all the configuration pieces 😅 Will put together a reduced example for you! 🙏
Any questions, let me know! 💙
@CodePen link below! 👇
jhey ʕ•ᴥ•ʔ@jh3yy
– One HTML attribute – One JavaScript event listener – Configurable via CSS custom properties Let's get this explodin' 🤙
English
Alex Nuzhnyi retweetledi
@SaraSoueidan Using @theTunnelBear for 5+ years. Love it! The app works perfectly and the UI & animations are top notch 😍
English
Friends on macOS, what VPN app are you using / do you recommend?
English