Updated once again. This time with some blog posts added and experimented with CSS carousels, sibling-index(), and scroll state!
Lisa@lisah.dev · last yr.I've updated my website! (mostly playing with threejs lol) lisavanderhoorn.nl
🎓 Frontend Design & Development
@fdnd.nl
The (only) study for Frontend Development in the Netherlands Website: https://fdnd.nl 🇳🇱 Program: https://programma.fdnd.nl 🇳🇱 Part of the Amsterdam University of Applied Sciences 🎓
Lisa@lisah.dev · last yr.
And don't forget to take the State of CSS 2025 survey when you're not watching #cssday talks. survey.devographics.com/en-US/survey...
State of CSS 2025
Take the State of CSS survey
survey.devographics.com
We were at CSS Day with a LOT of students, thanks to both @bitsandletters.com and CSS Day for sponsoring them! 🫶
CSS Day@cssday.nl · last yr.Thank you to @bitsandletters.com, who sponsor this year's #CSSDay not for themselves, but to make additional student tickets available to the event! Here are all student attendees on our conf stage. (Plus some special guests / photo bombers, can you spot them?) /ht @demar.ee
@cassiecodes.bsky.social joined us yesterday to talk about the hidden gems in the @gsap-greensock.bsky.social API. There’s so much good stuff in the documentation that you can miss if you don’t know about it. Thanks Cassie! 💚
And here's an updated version on Codepen. 👇 codepen.io/stefanjudis/...
View transitions - Demo
...
codepen.io
Stefan Judis@stefanjudis.com · 2y agoThe power of view transitions is absolutely mind-boggling. Things like this 👇 are quickly done with some CSS (no hacks!) and no additional DOM elements. Wild! 🤯
Just hit the “publish” button on a brand-new blog post! ⭐ This one shares the killer pattern I find myself using over and over with container queries: responding *within* media queries to adapt to the new container size. Once you start using this trick, you’ll see opportunities for it all over. 😄
Container Queries Unleashed • Josh W. Comeau
Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this p...
joshwcomeau.com
Anchor positioning is awesome... until you run into a situation where it just doesn't work. Here's a checklist for troubleshooting, and a recommendation for how to avoid issues in the first place.
Here's why your anchor positioning isn't working
How to find an anchor element
oddbird.net
CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it noamr.github.io/squircle-tes... awesome work @nomster.bsky.social and Simon Fraser!
#CSS scroll-state() container queries in Chrome 133! @container scroll-state(stuck: top) { … } Read all about snapped, stuck and scrollable in this post: developer.chrome.com/blog/css-scr... ↪ nerdy.dev/scroll-state...
Next week Dave Bitter, front end consultant at iO, will talk to our students about the rise of AI-Powered Voice Interfaces. Dave is a google dev expert, writes a ton of blogs and speaks at a lot of conferences. We can’t wait!
I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 frontendmasters.com/blog/pure-cs... This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns. #CSS #pattern #gradient #halftone
Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost
A halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be do...
frontendmasters.com
CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @keyframes bright { 50% { opacity: 1; }} line-height units are a gift 🎁
"babe, new craft of ui jus' dropped" babe: 😴 what happens when you stay up to publish a post before Thanksgiving 💀 👉 craftofui.substack.com/p/scrolling-a-page-out-of-the-playbook
Scrolling a page out of the Playbook
Creating a scroll-driven gallery effect with CSS
craftofui.substack.com
Jhey ʕ·ᴥ· ʔ@jhey.dev · 2y agoScroll gallery effect using CSS grid and scroll-driven animations ✨ - split images into layers - lay out images in stacked layers with same grid structure - animate the size of the center image - animate the layers to reveal with different timings
I posted this earlier this year when I turned 12 on @codepen.io, but here it is again for everyone new here: my personal faves out of the demos I did over these years. #CSS #3D #SVG
Ana Tudor@anatudor.bsky.social · 2y agoI turn 12 on @codepen.io today, so after my most hearted demos... here are 12 of MY personal faves! 1️⃣ Pure CSS music toy - this one's a really special one for me codepen.io/thebabydino/... CSS transforms for the 3D, CSS variables for the dynamic shading. The how 😼 www.youtube.com/watch?v=_CV3...
We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient. This article explains how it works, and shows up the possibilities in 7 demos. #css #webdesign #webdevelopment #graphicdesign webkit.org/blog/16214/b...
Make creative borders with background-clip border-area
How’d you like to use CSS to easily create a border from an image or gradient?
webkit.org
As of Chrome 131 you have more options to style `<details>` and `<summary>`. You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses. developer.chrome.com/blog/styling...
🔥 CSS Tip: Use CSS :has() and :is() to create layouts based on contents. For my slides, I cover several common layouts - text only, text + image, two images. Then I just have to add the contents to the slide and the proper layout is applied.
a few tricks to this CSS-only styled range slider using a scroll animation on the underlying [type=range] to grab the value in CSS is only part of it 🤙 this video reveals one trick where we translate the track inside a clipped container learn about it in this week's "Craft of UI" 👇
Jhey ʕ·ᴥ· ʔ@jhey.dev · 2y agoCSS only balance slider ☕️ the trick: a scroll-driven animation on the [type=range] thumb that updates custom property values which are then used in a counter for the labels and to style the bar (few lines of JavaScript to "polyfill" it) video reveals the <input> 👇
One of my favourite things in the whole world is creating interactive explanations for things. It’s so cool that it somehow became my job 😄
Chris Kalmar ⚡️ Chief Agent Director 😜@chriskalmar.dev · 2y agoDiscovered this interactive guide to CSS Flexbox by @joshwcomeau.com today So much better than looking up the boring docs. 😅 www.joshwcomeau.com/css/interact...
Take my <dialog> this one is centered and pushes the page back exposing a nice gradient nerdy.dev/have-a-dialog
Every ~3 weeks we invite an expert to talk to our students about what it’s really like to work as a web developer, next week @emielvanbetsbrugge.bsky.social is talking about how projects work from pitch to production. We can’t wait! We’re always looking for front end speakers, btw, reach out! 🫶
For our open day one of our teachers, Sanne 't Hooft (CSS magician 🪄 sinds1971.nl), created this lovely explainer of frontend development and the focus points of our study 🤩 #frontenddevelopment #creativedevelopment #webdevelopment
This article by @ericwbailey.website on @piccalil.li is incredibly useful. It’s exactly how I prefer CSS articles to be written: starting with a problem, including clear illustrations, and offers a practical solution. Highly recommended 💯 piccalil.li/blog/making-...
Making content-aware components using CSS :has(), grid, and quantity queries
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
piccalil.li
