iiinova — where your digital self keeps evolving

Reposted by 🎓 Frontend Design & Development

Lisa @lisah.dev · 27/05/2025

Updated once again. This time with some blog posts added and experimented with CSS carousels, sibling-index(), and scroll state!

031

Reposted by 🎓 Frontend Design & Development

CSS Day @cssday.nl · 06/06/2025

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...

survey.devographics.com

State of CSS 2025

Take the State of CSS survey

097

🎓 Frontend Design & Development @fdnd.nl · 06/06/2025

We were at CSS Day with a LOT of students, thanks to both @bitsandletters.com and CSS Day for sponsoring them! 🫶

031

🎓 Frontend Design & Development @fdnd.nl · 08/03/2025

@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! 💚

Cassie standing behind a laptop during her talk

Slide: showing a 3d toolbox graphic and “Animation Toolbox” underneath

Slide about the containerAnimation prop in GSAP’s scroll trigger that allows you to link scroll triggered animations to the progress of a horizontally scrolling section that’s triggered by vertical scrolling 🤯

082

Reposted by 🎓 Frontend Design & Development

Stefan Judis @stefanjudis.com · 02/02/2025

And here's an updated version on Codepen. 👇 codepen.io/stefanjudis/...

codepen.io

View transitions - Demo

...

3355

Reposted by 🎓 Frontend Design & Development

Bramus @bram.us · 09/02/2025

CSS Custom Functions are coming … and they are going to be a game changer! 👉 brm.us/css-custom-f...

A custom function that returns different values based on light or dark mode being used to visit the page.

1839490

Reposted by 🎓 Frontend Design & Development

Josh W. Comeau @joshwcomeau.com · 27/01/2025

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. 😄

joshwcomeau.com

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...

1234460

Reposted by 🎓 Frontend Design & Development

James Stuckey Weber @jamessw.com · 29/01/2025

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.

oddbird.net

Here's why your anchor positioning isn't working

How to find an anchor element

2408

Reposted by 🎓 Frontend Design & Development

Adam Argyle @nerdy.dev · 29/01/2025

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!

818628

Reposted by 🎓 Frontend Design & Development

Adam Argyle @nerdy.dev · 15/01/2025

#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...

1236458

🎓 Frontend Design & Development @fdnd.nl · 09/01/2025

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!

020

Reposted by 🎓 Frontend Design & Development

Ana Tudor @anatudor.bsky.social · 04/12/2024

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

frontendmasters.com

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...

49616

Reposted by 🎓 Frontend Design & Development

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 03/12/2024

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 🎁

1133026

Reposted by 🎓 Frontend Design & Development

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 28/11/2024

"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

craftofui.substack.com

Scrolling a page out of the Playbook

Creating a scroll-driven gallery effect with CSS

4777

Reposted by 🎓 Frontend Design & Development

Ana Tudor @anatudor.bsky.social · 07/11/2024

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

2433

Reposted by 🎓 Frontend Design & Development

Jen Simmons @jensimmons.bsky.social · 20/11/2024

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...

webkit.org

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?

1025144

Reposted by 🎓 Frontend Design & Development

Bramus @bram.us · 20/11/2024

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...

1553990

Reposted by 🎓 Frontend Design & Development

Wes Bos @wesbos.com · 15/11/2024

🔥 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.

1233726

Reposted by 🎓 Frontend Design & Development

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 15/11/2024

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" 👇

1656

Reposted by 🎓 Frontend Design & Development

Josh W. Comeau @joshwcomeau.com · 14/11/2024

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 😄

51074

Reposted by 🎓 Frontend Design & Development

Adam Argyle @nerdy.dev · 14/11/2024

Take my <dialog> this one is centered and pushes the page back exposing a nice gradient nerdy.dev/have-a-dialog

5566

🎓 Frontend Design & Development @fdnd.nl · 13/11/2024

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! 🫶

071

🎓 Frontend Design & Development @fdnd.nl · 07/11/2024

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

062

Reposted by 🎓 Frontend Design & Development

Ahmad Shadeed @ishadeed.com · 06/11/2024

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-...

piccalil.li

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.

49315