#CSS

text-autospaceの初期値をめぐる議論と現状 #CSS - Qiita

https://qiita.com/uhyo/items/309bc9ca545797c2b3ee

全然技術レベルの違う話ではあるけど、自分もデザイナーなのに #反骨スタック っぽい選択をしてきた気がしている。
正確には、自分のスキルと時間的制約とワンオペでの制作・開発という事情でその選択肢しかなかったという側面が大きくて、能動的に選べる選択肢がそれしか無かったんだけど。
ただ、確かに低レイヤーを触る動機が生まれるという意味では良い面もあった気はする。
自分の生存戦略が、なるべくフレームワークとかライブラリに依存しないスキルの勉強にかける、だったから、そういう観点で当時選んだのが「薄い」フロントエンドライブラリとしての #RiotJS だったし、未だに素の #CSS を書きたくなってしまう性質に繋がっている気がする。

https://hackers.pub/@hongminhee/2025/contrarian-stack/ja

全然技術レベルの違う話ではあるけど、自分もデザイナーなのに #反骨スタック っぽい選択をしてきた気がしている。
正確には、自分のスキルと時間的制約とワンオペでの制作・開発という事情でその選択肢しかなかったという側面が大きくて、能動的に選べる選択肢がそれしか無かったんだけど。
ただ、確かに低レイヤーを触る動機が生まれるという意味では良い面もあった気はする。
自分の生存戦略が、なるべくフレームワークとかライブラリに依存しないスキルの勉強にかける、だったから、そういう観点で当時選んだのが「薄い」フロントエンドライブラリとしての #RiotJS だったし、未だに素の #CSS を書きたくなってしまう性質に繋がっている気がする。

https://hackers.pub/@hongminhee/2025/contrarian-stack/ja

💡 CSS Tip!

You created a CSS shape using shape(), and you want to invert it? Easy! With a few lines of code, you have both the main shape and its cut-out version.

https://css-tip.com/invert-shape/

As a bonus, you can also control the space around the inverted shape.

#CSS #HTML

💡 CSS Tip!

You created a CSS shape using shape(), and you want to invert it? Easy! With a few lines of code, you have both the main shape and its cut-out version.

https://css-tip.com/invert-shape/

As a bonus, you can also control the space around the inverted shape.

#CSS #HTML

Just like it says: #3D in #CSS. A nutritious part of Brad Woods’s Digital Garden.
h/t: @photomatt.

https://garden.bradwoods.io/notes/css/3d #frontend

Just like it says: #3D in #CSS. A nutritious part of Brad Woods’s Digital Garden.
h/t: @photomatt.

https://garden.bradwoods.io/notes/css/3d #frontend

Pure CSS animations that react to scrolling and other behavior. Easy to create, and just as easy to understand, thanks to this fabulous, fast-reading tutorial by Saron Yitbarek.

Hat tip: @jensimmons

https://webkit.org/blog/17101/a-guide-to-scroll-driven-animations-with-just-css/ #css #animation #design

Pure CSS animations that react to scrolling and other behavior. Easy to create, and just as easy to understand, thanks to this fabulous, fast-reading tutorial by Saron Yitbarek.

Hat tip: @jensimmons

https://webkit.org/blog/17101/a-guide-to-scroll-driven-animations-with-just-css/ #css #animation #design

Seeing #CSS carousels being promoted as accessible again, so here is a periodic reminder:

#CSS carousels are not "accessible by default" https://www.sarasoueidan.com/blog/css-carousels-accessibility/

They are still highly experimental and there are still many open #accessibility questions & issues being discussed.

+The browser will not do everything for you—you'll still have work to do, too.

Seeing #CSS carousels being promoted as accessible again, so here is a periodic reminder:

#CSS carousels are not "accessible by default" https://www.sarasoueidan.com/blog/css-carousels-accessibility/

They are still highly experimental and there are still many open #accessibility questions & issues being discussed.

+The browser will not do everything for you—you'll still have work to do, too.

Better #CSS Shapes Using shape(), Part 2: More on Arcs: "This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command." https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/

Better #CSS Shapes Using shape(), Part 2: More on Arcs: "This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command." https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/

Creating Blob Shapes using clip-path: shape(): "Blobs! Gooey weird shapes you can fill with any background and even animate." #CSS https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape/

💡 CSS Tip!

Do you know safe alignment? It's when you make sure your overflowing content is always fully accessible on scroll regardless of the alignment configuration.

https://css-tip.com/safe-align/

It's not something new but you are probably not aware about it.

#CSS #HTML

Creating Blob Shapes using clip-path: shape(): "Blobs! Gooey weird shapes you can fill with any background and even animate." #CSS https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape/

#CSS とかで容易に模倣できない演出を「最新の UI トレンド」としてユーザーに印象付けてネイティブアプリのプラットフォームとしてアドバンテージを水増ししようとしているように見えなくもないんだよな…

それが穿った見方という自覚はあるんだけど、いままでの UI から背景色の不透明度と背景ブラーの量を下げて視認性を犠牲にしてまであの光の乱反射みたいな演出を際立たせる理由が、それ以外に今のところは思いつかないんだよな…

Appleが新デザイン「Liquid Glass」発表、全ての製品で採用 - ケータイ Watch
https://k-tai.watch.impress.co.jp/docs/news/2021216.html

💡 CSS Tip!

Do you know safe alignment? It's when you make sure your overflowing content is always fully accessible on scroll regardless of the alignment configuration.

https://css-tip.com/safe-align/

It's not something new but you are probably not aware about it.

#CSS #HTML

This took longer than expected. Pretty cool that it works.

Post featured in video: https://tapbots.social/@mark/114617305665385240

#PhanpySocialDev #CSS #ViewTransitions

This took longer than expected. Pretty cool that it works.

Post featured in video: https://tapbots.social/@mark/114617305665385240

#PhanpySocialDev #CSS #ViewTransitions

My team is still looking to hire two mid or senior frontend developers, fully remotely from Europe.

We're looking for like-minded individuals that share our love of artisanal #CSS #A11y, web standards, and #Astro

On the website team at Storyblok, we build marketing websites *for* Storyblok *using* Storyblok 🙂 (but we don't build the product itself)

https://www.storyblok.com/job?gh_jid=4519673101

My team is still looking to hire two mid or senior frontend developers, fully remotely from Europe.

We're looking for like-minded individuals that share our love of artisanal #CSS #A11y, web standards, and #Astro

On the website team at Storyblok, we build marketing websites *for* Storyblok *using* Storyblok 🙂 (but we don't build the product itself)

https://www.storyblok.com/job?gh_jid=4519673101

💡 CSS Tip!

Excited about the new if() function? Learn how to correctly use it before facing a lot of issues (and headaches).

https://css-tip.com/inline-if/

The code below looks straightforward, but there is a hidden gotcha! 🤨

#CSS #HTML

💡 CSS Tip!

Excited about the new if() function? Learn how to correctly use it before facing a lot of issues (and headaches).

https://css-tip.com/inline-if/

The code below looks straightforward, but there is a hidden gotcha! 🤨

#CSS #HTML

📝 New CSS Article!

The fun continues using shape()!

For this second part, we are drawing more CSS shapes while exploring the arc command. It's a very tricky command if you don't fully understand it.

https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/

#CSS #HTML

📝 New CSS Article!

The fun continues using shape()!

For this second part, we are drawing more CSS shapes while exploring the arc command. It's a very tricky command if you don't fully understand it.

https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/

#CSS #HTML

👀 #CSS

https://coliss.com/articles/build-websites/operation/work/chrome-137-adds-7-new-css-feature.html

shape() + Anchor Positioning + some magic 🪄

Demo: https://codepen.io/t_afif/full/PwqwOYz via @codepen

A CSS-only fancy effect for this week #CodePenChallenge

#CSS #HTML

shape() + Anchor Positioning + some magic 🪄

Demo: https://codepen.io/t_afif/full/PwqwOYz via @codepen

A CSS-only fancy effect for this week #CodePenChallenge

#CSS #HTML

🔟 521 ❤️ Pure #CSS #3D toggle with a single `input[type=checkbox]` and its `label` - check it out on @codepen https://codepen.io/thebabydino/pen/ajpqYW

#web #dev #webDev #webDevelopment #code #coding #frontend

🔟 521 ❤️ Pure #CSS #3D toggle with a single `input[type=checkbox]` and its `label` - check it out on @codepen https://codepen.io/thebabydino/pen/ajpqYW

#web #dev #webDev #webDevelopment #code #coding #frontend

9️⃣ 593 ❤️ Cycling gradient glow with no text duplication - see it on @codepen https://codepen.io/thebabydino/pen/rNPOpJK

A super simple, but cool #SVG #filter trick.

We create the gradient text.

The filter creates a blurred copy of it and places it underneath.

We then animate the #CSS #gradient stops... magic! 🪄✨

#cssGradient #svgFilter #glow #coding #filterEffect #gradientGlow #frontend #web #dev #webDev #webDevelopment #code

8️⃣ 736 ♥️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) - see it on @codepen https://codepen.io/thebabydino/pen/NWxBzRv

A bunch of variations on the pure CSS #halftone technique detailed in this article https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

#cssPattern #cssPatterns #cssGradient #halftonePattern #frontend #coding #web #dev #webDev #webDevelopment #code

7️⃣ 749 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd

The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/

Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.

#3D #Maths #geometry #cssTransform #cssTransforms #trigonometry #code #web #dev #webDev #webDevelopment #coding #frontend

6️⃣ 816 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRRRZE

Behind the demo https://css-tricks.com/recreating-the-twitter-heart-animation/

Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!

#CSS #code #coding #frontend #webDev #web #dev #webDevelopment

A little thing I made on @codepen.io: breathing with `shape()`
https://codepen.io/thebabydino/pen/vEEqMWo

`shape()` is supported in Chrome 135+ and Safari 18.4+.

Firefox 126+ supports it for simple shapes (but not for this demo) when setting thelayout.css.basic-shape-shape.enabled to true in about:config.

#CSS #clipPath #cssClipPath #animation #cssShapes #code #coding #clipping #web #dev #webDevelopment #webDev #frontend

A little thing I made on @codepen.io: breathing with `shape()`
https://codepen.io/thebabydino/pen/vEEqMWo

`shape()` is supported in Chrome 135+ and Safari 18.4+.

Firefox 126+ supports it for simple shapes (but not for this demo) when setting thelayout.css.basic-shape-shape.enabled to true in about:config.

#CSS #clipPath #cssClipPath #animation #cssShapes #code #coding #clipping #web #dev #webDevelopment #webDev #frontend

📝 New CSS Article!

It's me again exploring the new shape() function! ⭐

This time, I wrote a series of articles to help you understand this new and powerful tool and the first part is live 👇

https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/

#CSS #HTML

📝 New CSS Article!

It's me again exploring the new shape() function! ⭐

This time, I wrote a series of articles to help you understand this new and powerful tool and the first part is live 👇

https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/

#CSS #HTML

5️⃣ 850 ♥️ No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qByGqOm

#JS used only for
a) feature support detection
b) updating slider value in --val

Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler

One of my best sliders on @codepen.

#CSS #slider #rangeInput #coding #web #dev #webDevelopment #webDev #code #frontend #cssGrid #cssMask #cssGradient

3 Unintuitive #CSS Layout “Solutions”

```
min-width: 0?
flex-shrink: 0?
repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
```

wat?
https://nerdy.dev/3-unintuitive-layout-solutions

3 Unintuitive #CSS Layout “Solutions”

```
min-width: 0?
flex-shrink: 0?
repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
```

wat?
https://nerdy.dev/3-unintuitive-layout-solutions

The one where I muse about how this simple bit of code radically changes how the web itself seems to behave…

**Two lines of Cross-Document View Transitions code you can use on every website today**

https://webkit.org/blog/16967/two-lines-of-cross-document-view-transitions-code-you-can-use-on-every-website-today/

#css #webdev

#Development #Videos
The CSS mindset · CSS makes sense when seen as a set of algorithms https://ilo.im/1642es

_____
#CSS #Concepts #Algorithms #Layouts #Browser #WebDev #Frontend

#Development #Videos
The CSS mindset · CSS makes sense when seen as a set of algorithms https://ilo.im/1642es

_____
#CSS #Concepts #Algorithms #Layouts #Browser #WebDev #Frontend

⌨️ New blog post about #CSS masonry layout, the (fairly) new Item Flow proposal, maybe subsuming multicol, and a light tingling from my Web-Sense. That last part isn’t NSFW, I promise. (Sorry, @brucelawson.) https://meyerweb.com/eric/thoughts/2025/05/21/masonry-item-flow-and-gulp/

⌨️ New blog post about #CSS masonry layout, the (fairly) new Item Flow proposal, maybe subsuming multicol, and a light tingling from my Web-Sense. That last part isn’t NSFW, I promise. (Sorry, @brucelawson.) https://meyerweb.com/eric/thoughts/2025/05/21/masonry-item-flow-and-gulp/

💡 CSS Tip!

Create an arc shape with rounded edges using shape() and arc commands. Another shape made easy using shape() (I know, it's a lot of "shape" in the post 😅)

https://css-tip.com/arc-shape-rounded/

And look at that if() statement 👀

#CSS #HTML

3️⃣ 1044 ♥️ Pure #CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv - a bit mixed about it, it was just an exercise in getting a certain result - don't use it in the wild!

My first ever @codepen demo to get to 1K ♥️. And it got copied left and right.
¯\_(ツ)_/¯

#cssTransforms #cssTransform #coding #web #dev #webDev #webDevelopment #code #frontend

💡 CSS Tip!

Create an arc shape with rounded edges using shape() and arc commands. Another shape made easy using shape() (I know, it's a lot of "shape" in the post 😅)

https://css-tip.com/arc-shape-rounded/

And look at that if() statement 👀

#CSS #HTML

2️⃣ 1076 ♥️ Simplest inner glow card animation https://codepen.io/thebabydino/pen/WNVPdJg - a super simple pure #CSS demo I made in a few minutes to answer a reddit question and never expected would even get noticed much. It was my only 2024 demo to make into the most hearted 100 Pens of the year on @codepen.

#cssFilter #borderImage #glow #code #cssGradient #conicGradient #coding #web #dev #webDevelopment #webDev #frontend

📝 New CSS Article!

My first article about using shape() is live. I am officially a shape() spammer so get ready 🫣

https://frontendmasters.com/blog/creating-flower-shapes-using-clip-path-shape/

Learn the "arc" command by creating flower-like shapes.

#CSS #HTML

📝 New CSS Article!

My first article about using shape() is live. I am officially a shape() spammer so get ready 🫣

https://frontendmasters.com/blog/creating-flower-shapes-using-clip-path-shape/

Learn the "arc" command by creating flower-like shapes.

#CSS #HTML

I turn 13 on @codepen in June, so here are my 13 most hearted demos:

1️⃣ 1092 ♥️ #CSS infinite #scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb - my only demo to ever get to 1K ♥️ without being in most hearted of the year first

mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)

#cssVariables #cssTransforms #coding #code #frontend #cssTransform #3D #web #webDev #webDevelopment #dev #maths #mathematics #geometry #filter

And here is the CSS logo made with the shape() function.

Demo: https://codepen.io/t_afif/full/JooZWMq via @codepen

Take a deep breath before looking at the code 🫣

#CSS #HTML

And here is the CSS logo made with the shape() function.

Demo: https://codepen.io/t_afif/full/JooZWMq via @codepen

Take a deep breath before looking at the code 🫣

#CSS #HTML

The @codepen logo using the new shape() function.

https://codepen.io/t_afif/full/JoovLam

Do you think SVG is hard? Wait until this beast becomes widely supported 😈

#CSS #HTML

⚙️ New CSS Generator

It's finally possible. A blob shape using only CSS! 🤩

https://css-generators.com/blob/

Play with the setting and get a cool shape in no time.
✅ Single element (works with images)
✅ One line of code
✅ Responsive

⚠️ Limited support (Chrome and Safari for now) ⚠️

#CSS #HTML

⚙️ New CSS Generator

It's finally possible. A blob shape using only CSS! 🤩

https://css-generators.com/blob/

Play with the setting and get a cool shape in no time.
✅ Single element (works with images)
✅ One line of code
✅ Responsive

⚠️ Limited support (Chrome and Safari for now) ⚠️

#CSS #HTML

New #CSS features to know for 2025
by @kevinpowell
https://www.youtube.com/watch?v=jSCgZqoebsM

#CSS だけでも #MPA での #ViewTransitions を使えることを知った

Blob in progress! Stay tuned 👀

They are finally possible using only CSS (no SVG and no Canvas)

How? The new shape() function!

#CSS #HTML

Blob in progress! Stay tuned 👀

They are finally possible using only CSS (no SVG and no Canvas)

How? The new shape() function!

#CSS #HTML

#CSSVariables をはじめ #CSS まわりの最近の進化はほんともっと注目されてよいと思っている。

#CSS ってなんか最近のフロントエンドでも「低レイヤーの話」みたいになっちゃってて、目新しいフレームワークっぽいシャレた名前もない「 #CSS の新機能！」っていっても、なんかいまいち盛り上がりきらない感があるような気がするんだけど、 #CSS はいま素で書くだけでもすごい強力になってきている（むしろフレームワークに寄らずに素の CSS 書きたい気持ちすらある

I updated my online generator to add the radius option! The easiest way to generate regular polygons with rounded corners.

https://css-generators.com/polygon-shape/

And look at that border-only version! 🤩

#CSS #HTML

New #CSS features to know for 2025
by @kevinpowell
https://www.youtube.com/watch?v=jSCgZqoebsM

I updated my online generator to add the radius option! The easiest way to generate regular polygons with rounded corners.

https://css-generators.com/polygon-shape/

And look at that border-only version! 🤩

#CSS #HTML

one of my favorite uses of #CSS `:has()` is to change the grid layout based on what's inside the grid

```
grid-template-areas: /* simple layout */

&:has(.thing) {
grid-template-areas: /* more complex layout */;
}
```

Back when I was learning about #css, there was an amazing resource called CSS Zen Garden. It helped expand my knowledge of what was possible. It was like magic. TIL it's still around (no Internet Archive needed). https://csszengarden.com

Back when I was learning about #css, there was an amazing resource called CSS Zen Garden. It helped expand my knowledge of what was possible. It was like magic. TIL it's still around (no Internet Archive needed). https://csszengarden.com

And here is the code to generate any polygon shape with rounded corners!

https://css-tip.com/rounded-polygon/

Update the variables then get your code (There is another variation using CSS variables as well).

#CSS #HTML

And here is the code to generate any polygon shape with rounded corners!

https://css-tip.com/rounded-polygon/

Update the variables then get your code (There is another variation using CSS variables as well).

#CSS #HTML

💡 CSS Tip!

Shapes with rounded corners are a nightmare in CSS but it's now easy with the new shape() function! 🥳

Let's start with a classic: The Hexagon

https://css-tip.com/rounded-hexagon/

Yes, you can animate the radius and rotate the shape. Modern CSS is cool!

Do you want another polygon shape? I am cooking a generic code to create all of them.

#CSS #HTML

某所で #oklch とか #RelativeColorSyntax とか最新の #CSS のカラー周りの機能について雑談してみて、oklch() とか使って色管理するにはまだデザインソフト側が対応してないからやっぱり採用ハードルあるよなーと思ったんだけど

いまふと「いや、むしろだからこそインブラウザデザインの時代なんじゃないか！？」と思ったりした

インブラウザデザインの夜明けぜよ

* 🎨 明度・彩度・色相もそれぞれ変数化できる #CssVariables
* 🧮 特定の色を相対的に変化可能な #RelativeColorSyntax
* 🌈 色をより人間の知覚に近い形で扱える #oklch

このあたりは、現存するどのデザインツールよりも、現在のブラウザーで使える #CSS の機能のほうが柔軟で拡張性が高い。

…あれ、ということはやっぱり最強のデザインツールは #CSS なのでは

某所で #oklch とか #RelativeColorSyntax とか最新の #CSS のカラー周りの機能について雑談してみて、oklch() とか使って色管理するにはまだデザインソフト側が対応してないからやっぱり採用ハードルあるよなーと思ったんだけど

いまふと「いや、むしろだからこそインブラウザデザインの時代なんじゃないか！？」と思ったりした

インブラウザデザインの夜明けぜよ

#CSS 変数を活用したフレームワークの #OpenProps の作者で Chrome for developers でも最新の #CSS を中心にたくさんの記事を執筆してる Adam Argyle さん、急に Google での仕事を失った（クビになった？）っぽい…
何があったんだ…

G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025
https://nerdy.dev/ex-googler

#CSS 変数を活用したフレームワークの #OpenProps の作者で Chrome for developers でも最新の #CSS を中心にたくさんの記事を執筆してる Adam Argyle さん、急に Google での仕事を失った（クビになった？）っぽい…
何があったんだ…

G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025
https://nerdy.dev/ex-googler

🚨 New Podcast! What’s next for CSS? Bruce chats with Miriam Suzanne, CSS expert and independent contributor to the CSS Working Group, about game-changing features like Cascade Layers, Scope, Mixins, and Container Queries, and how they’re shaping the future of web design.

🎧 Spotify: https://open.spotify.com/episode/4D72MJ5AwP89PKxPXCz7Fq
📺 YouTube: https://youtu.be/ukUewXT_Ifk

#Podcast #CSS #WebDesign #WebDevelopment

🚨 New Podcast! What’s next for CSS? Bruce chats with Miriam Suzanne, CSS expert and independent contributor to the CSS Working Group, about game-changing features like Cascade Layers, Scope, Mixins, and Container Queries, and how they’re shaping the future of web design.

🎧 Spotify: https://open.spotify.com/episode/4D72MJ5AwP89PKxPXCz7Fq
📺 YouTube: https://youtu.be/ukUewXT_Ifk

#Podcast #CSS #WebDesign #WebDevelopment

new Notebook
- #CSS relative color

https://nerdy.dev/notebook/relative-color.html

new Notebook
- #CSS relative color

https://nerdy.dev/notebook/relative-color.html

🟡🔵 Matching drop shadows across CSS, Android, iOS, Figma, and Sketch
by @bjango.com @bjango

#DropShadow #css #webdev #Android #Figma #iOS #Sketch

https://bjango.com/articles/matchingdropshadows/

🟡🔵 Matching drop shadows across CSS, Android, iOS, Figma, and Sketch
by @bjango.com @bjango

#DropShadow #css #webdev #Android #Figma #iOS #Sketch

https://bjango.com/articles/matchingdropshadows/

💡 CSS Tip!

Want to see some magic using the new attr() function? Here is a trick to create a progress element with a dynamic coloration based on the progression!

https://css-tip.com/custom-progress/

⚠️ Chrome-only for now ⚠️

#CSS #HTML

💡 CSS Tip!

Want to see some magic using the new attr() function? Here is a trick to create a progress element with a dynamic coloration based on the progression!

https://css-tip.com/custom-progress/

⚠️ Chrome-only for now ⚠️

#CSS #HTML

#Development #Approaches
Revisiting CSS ‘border-image’ · “It remains one of the most underused CSS tools.” https://ilo.im/162y7m

_____
#Image #Decoration #Callout #Button #Design #WebDesign #WebDev #Frontend #SVG #CSS

#CSS only carousels arrive in Chrome 135

⤷ https://nerdy.dev/css-carousel-in-chrome-135

#CSS only carousels arrive in Chrome 135

⤷ https://nerdy.dev/css-carousel-in-chrome-135

#CSS only carousels arrive in Chrome 135

⤷ https://nerdy.dev/css-carousel-in-chrome-135

For everyone who has told me the #CSS + #SVG stuff I've been sharing is cool, remember that praise doesn't pay for all this work..

but you can https://ko-fi.com/anatudor

amazing what a few lines of #CSS can do

https://codepen.io/argyleink/pen/LEYOgxy

amazing what a few lines of #CSS can do

https://codepen.io/argyleink/pen/LEYOgxy

This is wild. I began designing and building websites in 1995. From today, in 2025, I’ve been designing and writing code for most of the internet’s existence. 👀

#Web #Internet #Design #Code #HTML #CSS #WebDesign
https://w3c.social/@w3c/114150554471950167

This is wild. I began designing and building websites in 1995. From today, in 2025, I’ve been designing and writing code for most of the internet’s existence. 👀

#Web #Internet #Design #Code #HTML #CSS #WebDesign
https://w3c.social/@w3c/114150554471950167

#CSS sibling-index() and sibling-count()
available Chrome Canary with experiments enabled!

`transition-delay: calc(sibling-index() * .1s);`

or

```css
--hue: calc(sibling-index() * 50);
color: oklch(70% 70% var(--hue));
```

more info and a Codepen to fork
⤷ https://nerdy.dev/sibling-index

#CSS sibling-index() and sibling-count()
available Chrome Canary with experiments enabled!

`transition-delay: calc(sibling-index() * .1s);`

or

```css
--hue: calc(sibling-index() * 50);
color: oklch(70% 70% var(--hue));
```

more info and a Codepen to fork
⤷ https://nerdy.dev/sibling-index

TIL about CSS image-rendering: pixelated;

Allowing pixel art to scale up to any size and not look bad.

On / Off comparison for increasing scale 32px, 64px, 128px, and 256px.

#CSS

TIL about CSS image-rendering: pixelated;

Allowing pixel art to scale up to any size and not look bad.

On / Off comparison for increasing scale 32px, 64px, 128px, and 256px.

#CSS

📝 The second part is live!

This time, I am using scroll-driven animation to create the star rating component! It's a good exercise to discover some modern features.

https://css-tricks.com/a-css-only-star-rating-component-and-more-part-2/ via @csstricks

Single element and 100% CSS magic!

#CSS #HTML

📝 The second part is live!

This time, I am using scroll-driven animation to create the star rating component! It's a good exercise to discover some modern features.

https://css-tricks.com/a-css-only-star-rating-component-and-more-part-2/ via @csstricks

Single element and 100% CSS magic!

#CSS #HTML

#oklch について昨夜調べて少し理解が深まった。
そもそも「色空間」と「カラープロファイル」を自分は少し混同していたので、まずそこの理解が整理できた。
oklch は色空間。色空間は色を数学的に記述する方法であって、あくまで色の「表現方法」なので特定の色の同一性は保持されない。
sRGB とか Display P3 はカラープロファイル。カラープロファイルは、oklch を含む色空間によって記述された色を実際のディスプレイにどういう色で表示するかをマッピングしたもので、つまり色の「再現方法」であり、最終的に出力される色の同一性を保持するためのもの。

#CSS #ColorManagement

#Tailwind は設定周りを #CSS 関数化して大分 JS から #CSS 的なアプローチに変わった感があるけど、CSS 変数はそういう設定周りだけじゃなくてスタイリングの定義にガツガツ使ってはじめて効果が実感できるみたいな感覚もあり、「そこまで CSS 的なアプローチするならそもそも Tailwind 使わなくてよくない？」という気持ちがある。scoped なスタイル書く方法は色々あるわけだし、特に色周りなんかはカラーパレットを段階的に用意するのはもうナンセンスというか、主だった元カラーだけを用意して末端のスタイルでそれらを color-mix() とか color() とかで合成するほうが理にかなってる気がしてきている

What do you want to learn about typography on the web? What CSS have you been meaning to learn? What’s still frustrating or confusing — that you wish you could do or polish more easily?

#css #typography

What do you want to learn about typography on the web? What CSS have you been meaning to learn? What’s still frustrating or confusing — that you wish you could do or polish more easily?

#css #typography

Made a little tool to better visualize the effect of the new text-box property and also generate the code for you!

https://css-tip.com/text-box/

#CSS #HTML

Made a little tool to better visualize the effect of the new text-box property and also generate the code for you!

https://css-tip.com/text-box/

#CSS #HTML

I’ve been designing web experiences for 20+ years. While I use and enjoy dedicated design software, I’m pretty sure I design “in the browser” more than most.

Here are just a few reasons why… https://cloudfour.com/thinks/why-i-like-designing-in-the-browser/

#WebDesign #DesignProcess #HTML #CSS

💡 CSS Tip!

Save this one line of code for the future!

https://css-tip.com/center-uppercase/

No more hacky code trying to remove those spaces above and below an uppercase text. You can easily have a perfect centering for the text!

#CSS #HTML

💡 CSS Tip!

Save this one line of code for the future!

https://css-tip.com/center-uppercase/

No more hacky code trying to remove those spaces above and below an uppercase text. You can easily have a perfect centering for the text!

#CSS #HTML

この oklch() と current color の使い方好き。
自分も color-mix() でこういう風に currentColor 使ったけど oklch() でこういうふうに書けるならこっちがいいかも

Combining currentcolor with relative color syntax

https://fullystacked.net/currentcolor-with-relative-color-syntax/

#CSS #oklch

fun little #CSS kaleidoscope gradient trick

⤷ https://nerdy.dev/css-kaleidoscopes

fun little #CSS kaleidoscope gradient trick

⤷ https://nerdy.dev/css-kaleidoscopes

めっちゃアガる記事だった

OKLCH, explained for designers | Samuel Wong — Hong Kong UI/UX Designer | Desktop of Samuel

https://desktopofsamuel.com/oklch-explained-for-designers

#CSS #Oklch

Turn your image into a fancy heart animation ♥️

https://css-tip.com/heart-shape-hover-2/

A CSS only single-element implementation

#CSS #HTML

Turn your image into a fancy heart animation ♥️

https://css-tip.com/heart-shape-hover-2/

A CSS only single-element implementation

#CSS #HTML

Redoing the line-up section of @cssdayconf with a cool hover effect! 🤩

Demo: https://codepen.io/t_afif/full/raNNbyG via @codepen

Psst, there is no keyframes in the code! Can you guess how it's done?

#CSS #HTML

Every time I see utility classes sprayed all over basic tags like <p> and <a>… 😂
#CSS #WebDev #Humor

Every time I see utility classes sprayed all over basic tags like <p> and <a>… 😂
#CSS #WebDev #Humor

Redoing the line-up section of @cssdayconf with a cool hover effect! 🤩

Demo: https://codepen.io/t_afif/full/raNNbyG via @codepen

Psst, there is no keyframes in the code! Can you guess how it's done?

#CSS #HTML

And the horizontal version as well!

Demo: https://codepen.io/t_afif/full/MYWWjvE via @codepen

#CSS #HTML #CodePenChallenge

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!)

Code & Demo: https://css-tip.com/bouncy-input/

Is it useful? Probably not.
Is it cool? Yes!

#CSS #HTML #codepenchallenge

And the horizontal version as well!

Demo: https://codepen.io/t_afif/full/MYWWjvE via @codepen

#CSS #HTML #CodePenChallenge

A fun CSS-only experimentation using modern features (anchor positioning, @​property, :has(), and more!)

Code & Demo: https://css-tip.com/bouncy-input/

Is it useful? Probably not.
Is it cool? Yes!

#CSS #HTML #codepenchallenge

30 #CSS scroll driven animation examples

which is your favorite?
- z-stack and slither are mine

https://nerdy.dev/scroll-driven-animations-notebook

30 #CSS scroll driven animation examples

which is your favorite?
- z-stack and slither are mine

https://nerdy.dev/scroll-driven-animations-notebook

Adding another CSS shape to the collection

https://css-shape.com/pointy-box/

#CSS #HTML

Adding another CSS shape to the collection

https://css-shape.com/pointy-box/

#CSS #HTML

Does #SVG support #CSS filters on its elements?

Of course it does, for years.

Ah, but does #Webkit support it?

Of course not, because it's webkit.

Does #SVG support #CSS filters on its elements?

Of course it does, for years.

Ah, but does #Webkit support it?

Of course not, because it's webkit.

Another cool shape

Demo: https://codepen.io/t_afif/full/JoPzpgV via @codepen

Also available at: https://css-shape.com/wiggly-box/

#CSS #HTML

Another cool shape

Demo: https://codepen.io/t_afif/full/JoPzpgV via @codepen

Also available at: https://css-shape.com/wiggly-box/

#CSS #HTML

📝 New CSS article!

Want to understand the logic behind the full-bleed layout technique I shared? Read my latest article @frontendmasters.com

https://frontendmasters.com/blog/full-bleed-layout-with-modern-css/

See how modern CSS can improve old methods. A more robust solution with less of code.

#CSS #HTML

📝 New CSS article!

Want to understand the logic behind the full-bleed layout technique I shared? Read my latest article @frontendmasters.com

https://frontendmasters.com/blog/full-bleed-layout-with-modern-css/

See how modern CSS can improve old methods. A more robust solution with less of code.

#CSS #HTML

Greetings to all #JavaScript #HTML #CSS #SVG #HTTP #Accessibility #webdev #mdn developers and enthusiasts.

I'm a bot, now on a new instance at https://front-end.social/! If you're already following, the transition should happen automatically. However, if you have any bookmarked posts, I recommend re-bookmarking the direct links to articles in your browser for safe keeping.

Starting December 15th, the original instance will no longer be active. I'll send a reminder before then.

…

About three weeks ago, I had the honor to speak at the 10th anniversary edition of #CSSDay about the most powerful design tool for the Web: the new #CSS.

The video of the talk is now up! 🎉

I hope you like it. And in case you do, SMASH THAT LIKE BUTTON!!! 😁 (Am I doing this right, @kevinpowell?)

https://www.youtube.com/watch?v=su6WA0kUUJE

one of my favorite uses of #CSS `:has()` is to change the grid layout based on what's inside the grid

```
grid-template-areas: /* simple layout */

&:has(.thing) {
grid-template-areas: /* more complex layout */;
}
```

New CSS Project! 🥳

Are you looking for a CSS Shape? look no further!

👉 https://css-shape.com 👈

The Ultimate Collection of CSS-Only shapes
✅ Single-element implementation
✅ Optimized code
✅ Easy to customize using CSS variables
✅ One click to copy the code

Stop relying on old and obsolete resources. Use modern CSS to create Shapes! 🤩

#CSS #HTML

🎉 New CSS Project 🎉

It took me a while, but I finally collected all my CSS-only loaders into one place! 🥳

👉 https://css-loaders.com 👈

The Biggest Collection of Loading Animations. More than 500 single-element CSS loaders. Yes, only one element per loader!

Related Article: https://dev.to/afif/css-loaderscom-the-biggest-collection-of-loading-animations-more-than-500--23jg

Pick your favorite one and share it 👇

#CSS

Hello, fediverse! 👋🐘

We’re Cloud Four, a small but mighty agency founded in the Pacific Northwest. 🌥🌲

We solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations. ✨📱

https://cloudfour.com/

#Introduction #WebDesign #WebDev #Responsive #Ecommerce #Performance #CSS #JavaScript

Fresh #introduction for a fresh instance 👋

I’m Tyler Sticka, a designer and creative director. I co-own @cloudfour, a small but mighty #WebDesign and #WebDev company. I do a lot of my design in the browser, and I frequently write about #CSS, #SVG and #ResponsiveDesign.

I’m also occassionally a #GameDev (Ramps was briefly an early App Store hit) and #Artist / #Cartoonist (I love to draw).

💡 I shared a lot of CSS Tips on the bird app so I decided to put everything in a website for easy finding.

👉 https://css-tip.com👈

A simple website powered by @eleventy with more than 60 CSS Tips to date.

Want an RSS Feed for the future Tips? Here you go: https://css-tip.com/feed/feed.xml

Don't know where to start? Surprise yourself with a random CSS Tip: https://random.css-tip.com

(You can find all the code on Github: https://github.com/Afif13/CSS-Tip)

#CSS

Here is my #introduction:

My name is Christian, I live in Tübingen in southern #Germany.
I'm a #frontend developer. I love working with #CSS and #JS, especially #Vue but I'm also interested in #Svelte and #Astro.

Beside that I am a #music "addict", especially (but not only) #ClassicalMusic. I can hardly live one day without listing, playing #piano or #singing.

I love good #children #books. My side project: Translating "Het grote #rintje voorleesboek" into German without speaking any #Dutch.

Hi, I'm treefit, a #foss dev working on #deltachat. I'm responsible for the desktop client together with @jikstra.
My favorite coding language is #rustlang, but I "speak" #typescript, #javascript, #html, #css, too.
I'm also capable in #python and #swift, but not as much.

I'm new to the mastodon/toot style of communication (never used Twitter, either), so I'm still learning of how this all works.

My goal is to give you some behind-the scenes peeks onto the DeltaChat development.

#introduction

Time for a little #introduction :)

I'm Jikstra, a #foss developer working on #deltachat desktop and a few smaller side projects. I do #ui #ts #html #css and #rust. I want to use this account to blog about ideas, experiments and dev things.