@aungthuyawin96.bsky.social
Reposted
I'd be remiss if I didn't say that @monknow.bsky.social put A LOT of effort into editing the CSS Color Functions Guide we published yesterday.
And this post is an excellent roundup of things he learned along the way... things that I think confuse a lot of us. I appreciate having this.
And this post is an excellent roundup of things he learned along the way... things that I think confuse a lot of us. I appreciate having this.
Color spaces? Color models? Color gamuts? Color functions?
There's a lot of terminology related to CSS colors and @monknow.bsky.social put together a glossary to help wrap your head around these things.
css-tricks.com/color-everyt...
There's a lot of terminology related to CSS colors and @monknow.bsky.social put together a glossary to help wrap your head around these things.
css-tricks.com/color-everyt...
Color Everything in CSS | CSS-Tricks
An introduction to "Color spaces", "Color models", "Color gamuts," and basically all of the "Color somethings" in CSS.
css-tricks.com
June 20, 2025 at 2:25 PM
I'd be remiss if I didn't say that @monknow.bsky.social put A LOT of effort into editing the CSS Color Functions Guide we published yesterday.
And this post is an excellent roundup of things he learned along the way... things that I think confuse a lot of us. I appreciate having this.
And this post is an excellent roundup of things he learned along the way... things that I think confuse a lot of us. I appreciate having this.
Reposted
Now that my blog post got the thumbs up from @zeldman.bsky.social, I can die a happy evangelist 🥰
Check out my intro to scroll-driven animations, hope you like it too ❤️ webkit.org/blog/17101/a...
Check out my intro to scroll-driven animations, hope you like it too ❤️ webkit.org/blog/17101/a...
A guide to Scroll-driven Animations with just CSS
CSS animations have come a long way since Apple first introduced them to the web in 2007.
webkit.org
June 25, 2025 at 1:16 AM
Now that my blog post got the thumbs up from @zeldman.bsky.social, I can die a happy evangelist 🥰
Check out my intro to scroll-driven animations, hope you like it too ❤️ webkit.org/blog/17101/a...
Check out my intro to scroll-driven animations, hope you like it too ❤️ webkit.org/blog/17101/a...
Reposted
My entire April and May are packed, but if I had the time, I would attend this workshop by @miriam.codes! Sounds great!
“Take your sites to the next level with this 3-session workshop on building more resilient and maintainable web layouts using modern CSS.”
www.oddbird.net/workshops/ca...
“Take your sites to the next level with this 3-session workshop on building more resilient and maintainable web layouts using modern CSS.”
www.oddbird.net/workshops/ca...
Cascading Layouts
A workshop on resilient CSS layouts
www.oddbird.net
April 14, 2025 at 5:50 AM
My entire April and May are packed, but if I had the time, I would attend this workshop by @miriam.codes! Sounds great!
“Take your sites to the next level with this 3-session workshop on building more resilient and maintainable web layouts using modern CSS.”
www.oddbird.net/workshops/ca...
“Take your sites to the next level with this 3-session workshop on building more resilient and maintainable web layouts using modern CSS.”
www.oddbird.net/workshops/ca...
Reposted
Struggling with color theory or building accessible palettes? I’ve put together my go-to resources and tools to help designers make better, more inclusive color choices. Whether you're a beginner or refining your skills, this curated list has you covered!
stephaniewalter.design/blog/color-t...
stephaniewalter.design/blog/color-t...
February 18, 2025 at 8:31 AM
Struggling with color theory or building accessible palettes? I’ve put together my go-to resources and tools to help designers make better, more inclusive color choices. Whether you're a beginner or refining your skills, this curated list has you covered!
stephaniewalter.design/blog/color-t...
stephaniewalter.design/blog/color-t...
Reposted
🗂️ From the archives
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
piccalil.li/blog/making-...
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
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
February 18, 2025 at 1:34 PM
🗂️ From the archives
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
piccalil.li/blog/making-...
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
piccalil.li/blog/making-...
Reposted
Lazy loading hidden images:
cloudfour.com/thinks/lazy-...
Images in menus or carousels etc that's technically above the fold, but not visible, all you need is add loading="lazy" and browser will defer downloading the image.
No longer need a #JavaScript solution for those use cases
#CSS #webdev
cloudfour.com/thinks/lazy-...
Images in menus or carousels etc that's technically above the fold, but not visible, all you need is add loading="lazy" and browser will defer downloading the image.
No longer need a #JavaScript solution for those use cases
#CSS #webdev
Lazy loading hidden images
A few years ago, browsers implemented a standard way of lazy loading images. The standard was a huge boon because it was straightforward to use and less code than JavaScript solutions. Unfortunately, ...
cloudfour.com
February 18, 2025 at 10:00 PM
Lazy loading hidden images:
cloudfour.com/thinks/lazy-...
Images in menus or carousels etc that's technically above the fold, but not visible, all you need is add loading="lazy" and browser will defer downloading the image.
No longer need a #JavaScript solution for those use cases
#CSS #webdev
cloudfour.com/thinks/lazy-...
Images in menus or carousels etc that's technically above the fold, but not visible, all you need is add loading="lazy" and browser will defer downloading the image.
No longer need a #JavaScript solution for those use cases
#CSS #webdev
Reposted
Going to be doing a live stream Friday where I add a dark theme to html-css-tip-of-the-week.netlify.app
I'll be on Twitch (www.twitch.tv/kevinpowellcss) and YouTube (youtube.com/live/7ijxVDW...)
It'll start at 12pm EST (if you follow the YT link, you'll get your local timezone)
I'll be on Twitch (www.twitch.tv/kevinpowellcss) and YouTube (youtube.com/live/7ijxVDW...)
It'll start at 12pm EST (if you follow the YT link, you'll get your local timezone)
Creating a dark theme for a website live
YouTube video by Kevin Powell
youtube.com
January 22, 2025 at 1:46 PM
Going to be doing a live stream Friday where I add a dark theme to html-css-tip-of-the-week.netlify.app
I'll be on Twitch (www.twitch.tv/kevinpowellcss) and YouTube (youtube.com/live/7ijxVDW...)
It'll start at 12pm EST (if you follow the YT link, you'll get your local timezone)
I'll be on Twitch (www.twitch.tv/kevinpowellcss) and YouTube (youtube.com/live/7ijxVDW...)
It'll start at 12pm EST (if you follow the YT link, you'll get your local timezone)
Reposted
Very cool! 😄
🎉 OMG OMG OMG Chrome is shipping CSS attr() for every property!!! 🎉
I’ve been asking for this for over a decade!! w00t!!! 🤩
developer.chrome.com/blog/advance...
I’ve been asking for this for over a decade!! w00t!!! 🤩
developer.chrome.com/blog/advance...
CSS attr() gets an upgrade | Blog | Chrome for Developers
You can now use attr() with any CSS property–including custom properties–and it can parse values into data types other than strings.
developer.chrome.com
January 17, 2025 at 1:36 AM
Very cool! 😄
Reposted
"Is there such a thing as a web-safe font?" 🤔
www.highperformancewebfonts.com/read/web-saf... #css #fonts #webdev
www.highperformancewebfonts.com/read/web-saf... #css #fonts #webdev
High-Performance Web Fonts
Tools and resources on how to use web fonts without sacrificing page loading speeds
www.highperformancewebfonts.com
January 17, 2025 at 4:28 AM
"Is there such a thing as a web-safe font?" 🤔
www.highperformancewebfonts.com/read/web-saf... #css #fonts #webdev
www.highperformancewebfonts.com/read/web-saf... #css #fonts #webdev
Reposted
#CSS text-box
a very exciting feature!
available in:
Chrome 133 & Safari 18.2
My post on Chrome Developers:
developer.chrome.com/blog/css-tex...
↪ nerdy.dev/text-box-trim
a very exciting feature!
available in:
Chrome 133 & Safari 18.2
My post on Chrome Developers:
developer.chrome.com/blog/css-tex...
↪ nerdy.dev/text-box-trim
January 14, 2025 at 9:34 PM
#CSS text-box
a very exciting feature!
available in:
Chrome 133 & Safari 18.2
My post on Chrome Developers:
developer.chrome.com/blog/css-tex...
↪ nerdy.dev/text-box-trim
a very exciting feature!
available in:
Chrome 133 & Safari 18.2
My post on Chrome Developers:
developer.chrome.com/blog/css-tex...
↪ nerdy.dev/text-box-trim
Reposted
Did you know you can center both vertically and horizontally in CSS now, without Flexbox or Grid?
Throw this on your block level element, and it works:
align-content: center;
justify-items: center;
And my trick to remembering it's those properties? It's the ones I never use normally 😆
Throw this on your block level element, and it works:
align-content: center;
justify-items: center;
And my trick to remembering it's those properties? It's the ones I never use normally 😆
January 14, 2025 at 8:01 PM
Did you know you can center both vertically and horizontally in CSS now, without Flexbox or Grid?
Throw this on your block level element, and it works:
align-content: center;
justify-items: center;
And my trick to remembering it's those properties? It's the ones I never use normally 😆
Throw this on your block level element, and it works:
align-content: center;
justify-items: center;
And my trick to remembering it's those properties? It's the ones I never use normally 😆
Reposted
CSS Wishlist for 2025
Hey we might as well spill out all these wishes as the CSS feature train has been rolling and we oughta get while the getting is good.
Hey we might as well spill out all these wishes as the CSS feature train has been rolling and we oughta get while the getting is good.
CSS Wishlist for 2025 – Frontend Masters Boost
Hey we might as well spill out all these wishes as the CSS feature train has been rolling and we oughta get while the getting is good.
frontendmasters.com
January 15, 2025 at 8:39 AM
CSS Wishlist for 2025
Hey we might as well spill out all these wishes as the CSS feature train has been rolling and we oughta get while the getting is good.
Hey we might as well spill out all these wishes as the CSS feature train has been rolling and we oughta get while the getting is good.
Reposted
I wrote about `lh` units and `margin-trim’ for @5t3ph.bsky.social ‘s 12 Days of Web!
12daysofweb.dev/2024/css-mar...
12daysofweb.dev/2024/css-mar...
CSS margin-trim and line height units | 12 Days of Web
Learn ways of perfecting design with line height units and margin-trim.
12daysofweb.dev
December 24, 2024 at 10:33 PM
I wrote about `lh` units and `margin-trim’ for @5t3ph.bsky.social ‘s 12 Days of Web!
12daysofweb.dev/2024/css-mar...
12daysofweb.dev/2024/css-mar...
Reposted
📝 I know it's the end of year and I should be doing a yearly wrap up post but this one aspect of #CSS has been noodling at me for awhile now.
daverupert.com/2024/12/css-...
daverupert.com/2024/12/css-...
CSS wants to be a system
I’ve realized something obvious again, this time about CSS; that CSS wants to be a system. At the core of CSS is a series of cascading rules and classes marrying and mingling in an elegant symphony of...
daverupert.com
December 23, 2024 at 11:10 PM
📝 I know it's the end of year and I should be doing a yearly wrap up post but this one aspect of #CSS has been noodling at me for awhile now.
daverupert.com/2024/12/css-...
daverupert.com/2024/12/css-...
Reposted
"CSS Selectors Playground"
An easy and simple way to learn how to master #CSS selectors.
selectors.sandroroth.com #webdev
An easy and simple way to learn how to master #CSS selectors.
selectors.sandroroth.com #webdev
December 20, 2024 at 10:24 PM
"CSS Selectors Playground"
An easy and simple way to learn how to master #CSS selectors.
selectors.sandroroth.com #webdev
An easy and simple way to learn how to master #CSS selectors.
selectors.sandroroth.com #webdev
Reposted
1️⃣
This post from @5t3ph.bsky.social shared a dozen CSS properties well worth knowing — it includes one-line upgrades that will help reduce technical debt, remove unnecessary lines of JavaScript, and score some easy wins for the user experience, too.
This post from @5t3ph.bsky.social shared a dozen CSS properties well worth knowing — it includes one-line upgrades that will help reduce technical debt, remove unnecessary lines of JavaScript, and score some easy wins for the user experience, too.
12 Modern CSS One-Line Upgrades | Modern CSS Solutions
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing...
moderncss.dev
December 18, 2024 at 4:20 PM
1️⃣
This post from @5t3ph.bsky.social shared a dozen CSS properties well worth knowing — it includes one-line upgrades that will help reduce technical debt, remove unnecessary lines of JavaScript, and score some easy wins for the user experience, too.
This post from @5t3ph.bsky.social shared a dozen CSS properties well worth knowing — it includes one-line upgrades that will help reduce technical debt, remove unnecessary lines of JavaScript, and score some easy wins for the user experience, too.
Reposted
Scroll-Driven & Fixed
It's quite fun to have an element react to another element scrolling in an unexpected way!
It's quite fun to have an element react to another element scrolling in an unexpected way!
Scroll-Driven & Fixed – Frontend Masters Boost
It's quite fun to have an element react to another element scrolling in an unexpected way!
frontendmasters.com
December 21, 2024 at 8:39 AM
Scroll-Driven & Fixed
It's quite fun to have an element react to another element scrolling in an unexpected way!
It's quite fun to have an element react to another element scrolling in an unexpected way!
Reposted
i wrote about light-dark() 12daysofweb.dev/2024/css-lig...
CSS light-dark() | 12 Days of Web
A new CSS function that returns one of two color values based on the current color scheme.
12daysofweb.dev
December 21, 2024 at 4:25 PM
i wrote about light-dark() 12daysofweb.dev/2024/css-lig...