#CSS

#elk @elk が今年の1月のリリースを最後に更新が止まっていて、もうメンテナンスされていないんじゃないかという噂が。
シンプルで可愛いデザインで一時期使っていたので残念＆心配ではあるけど、 #Mastodon のデフォルトの Web UI も大分デザインがこなれてきたし、 #TangerineUI とか #MastodonBirdUI みたいな のカスタム #CSS も出てきたので、相対的に #Elk の存在意義みたいなものが薄れてしまっていた状況というのはあったような気はする。

#Phanpy のように、機能面でデフォルトの の Web UI を超えるいろんな機能（外部サーバーからの見た目を一時的にエミュレートできたり、CatchUP 器用や、独自の投稿ドラフトの自動保存機能とか、複数アカウント切り換え機能とか）があれば差別化できたんだろうけど、その点 #Elk はそこまで通常の Web UI と比較してリッチな機能が追加されてるわけじゃないからな…
いっそのこと、 のカスタム CSS テーマとしてリブートするみたいなほうがメンテナンスコストは小さくなりそう

💡 CSS Tip!

Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.

https://css-tip.com/responsive-stacked-img/

No hardcoded values, no magic numbers, and the gap is transparent!

#CSS #HTML

💡 CSS Tip!

Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.

https://css-tip.com/responsive-stacked-img/

No hardcoded values, no magic numbers, and the gap is transparent!

#CSS #HTML

やはり CSS でスタイリングされるオンスクリーンメディアの UI デザインするなら、素の CSS を書きたい。

#CSS

📢 #w3cTPAC
The @w3c "Hackathon TPAC 2025: Kobe Edition" is underway, and participants have 1.5 hours to tackle one of two available challenges!

▶️ https://www.w3.org/2025/11/TPAC/hackathon/
#hackathon #CSS #developers #dashboard #Kobe #Japan

Mastodon Bird UI v3.0.0 is now released! 🎉

Most notable changes:
- Support for Mastodon stable 4.5.0
- Fix profile links and alignment
- Re-style Quote Posts
- Improved UI for the new quote posts popper
- Improve status__quote--error being to high, update min-height
- Remove the separator dot redundant since 4.3
- Fix performance-expensive transitions
- Fix audio embed overflow
- Improve the accesibility of modals

Full changelog and download: https://github.com/ronilaukkarinen/mastodon-bird-ui/releases/tag/3.0.0

#MastodonBirdUI #BirdUI #Mastodon #MastoAdmin #CSS #UI #OpenSource

Mastodon Bird UI v3.0.0 is now released! 🎉

Most notable changes:
- Support for Mastodon stable 4.5.0
- Fix profile links and alignment
- Re-style Quote Posts
- Improved UI for the new quote posts popper
- Improve status__quote--error being to high, update min-height
- Remove the separator dot redundant since 4.3
- Fix performance-expensive transitions
- Fix audio embed overflow
- Improve the accesibility of modals

Full changelog and download: https://github.com/ronilaukkarinen/mastodon-bird-ui/releases/tag/3.0.0

#MastodonBirdUI #BirdUI #Mastodon #MastoAdmin #CSS #UI #OpenSource

I am working on a small #css framework (more soon), and I am very prod of how the tables look :D

I am working on a small #css framework (more soon), and I am very prod of how the tables look :D

Perfectly pointed tooltips. Temani Afif shows how to create auto-positioned tooltips using the new CSS Anchor Positioning with position-area, position-try-fallbacks, and the anchor() function. Tooltips stay visible, flip when needed, and keep their tails, all without JavaScript. Supported in Chrome, Edge, and Safari, with demos and practical tricks. #css

https://frontendmasters.com/blog/perfectly-pointed-tooltips-a-foundation/

Getting the screen dimension with a simple calc? Yes, it's possible!

https://css-tip.com/screen-dimension/

We are still waiting for Firefox to join the game, and the code below will become the favorite one of many developers!

(Until then, there is another method with better support)

#CSS #HTML

Getting the screen dimension with a simple calc? Yes, it's possible!

https://css-tip.com/screen-dimension/

We are still waiting for Firefox to join the game, and the code below will become the favorite one of many developers!

(Until then, there is another method with better support)

#CSS #HTML

Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.

https://css-tip.com/position-area/

Example with position-area: top 👇

#CSS #HTML

Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.

https://css-tip.com/position-area/

Example with position-area: top 👇

#CSS #HTML

Anchor positioning extends #CSS absolute positioning by letting elements align to other boxes, not just their container, automatically choosing the best placement to prevent overlap or overflow. @w3c's CSS Anchor Positioning Module Level 2 introduces the anchored container queries to allow querying certain aspects of elements #FPWD #timetogiveinput

▶️ https://www.w3.org/TR/css-anchor-position-2/

Explainer: https://github.com/w3c/csswg-drafts/blob/main/css-anchor-position-1/anchored_container_query.md

Feedback wlc: https://github.com/w3c/csswg-drafts/labels/css-anchor-position-2

Ready for another crazy demo? This time, I am considering the corner positions. Same HTML code and still 100% modern CSS!

Yes, Anchor Positioning is very cool. 🤩

https://css-tip.com/tooltip-anchor-3/

The code is a bit hard to decipher, but I am working on articles to explain all the magic 👍

#CSS #HTML

Ready for another crazy demo? This time, I am considering the corner positions. Same HTML code and still 100% modern CSS!

Yes, Anchor Positioning is very cool. 🤩

https://css-tip.com/tooltip-anchor-3/

The code is a bit hard to decipher, but I am working on articles to explain all the magic 👍

#CSS #HTML

I said 36 positions, but in reality, they are even more because within each position, we can control the alignment of the element using justify-self and align-self.

36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣

#CSS #HTML

I said 36 positions, but in reality, they are even more because within each position, we can control the alignment of the element using justify-self and align-self.

36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣

#CSS #HTML

💡 CSS Tip!

In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀

No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.

https://css-tip.com/position-area/

#CSS #HTML

💡 CSS Tip!

In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀

No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.

https://css-tip.com/position-area/

#CSS #HTML

The CSS Podcast is back! Together with @Una I’m co-hosting season 5 of the show, and we have some good episodes coming your way!

https://www.bram.us/2025/10/14/the-css-podcast-is-back-and-im-a-co-host-now/

The first episode of the season – episode 092 of the full show – got published and is about CSS if() and CSS Custom Functions.

#CSSPodcast #CSS

The CSS Podcast is back! Together with @Una I’m co-hosting season 5 of the show, and we have some good episodes coming your way!

https://www.bram.us/2025/10/14/the-css-podcast-is-back-and-im-a-co-host-now/

The first episode of the season – episode 092 of the full show – got published and is about CSS if() and CSS Custom Functions.

#CSSPodcast #CSS

"Oops… #CSS got away from me, send halp!"
🎥 video out now

a 25m tik-talk just given at @cascadiajs.com

⤷ https://nerdy.dev/oops-css-got-away-from-me-send-halp-at-cascadiajs-2025

"Oops… #CSS got away from me, send halp!"
🎥 video out now

a 25m tik-talk just given at @cascadiajs.com

⤷ https://nerdy.dev/oops-css-got-away-from-me-send-halp-at-cascadiajs-2025

#Safari はやっぱり #CSS まわりの再現度がちょっとイマイチだな…
#Firefox はまだ #Chromium と「違う」というだけで #Firefox のレンダリングエンジンの正義みたいなものが見えるというか納得感があるけど、 #Safari のそれは単純にバグみたいに見える挙動が多い印象がある

#Browser #Frontend

In addition to the CSS Tips & Tricks series, we run a monthly show called Winging It LIVE. We interview experts and dig into front-end web development. Topics range from htmx to #CSS to #UX to fluid type and more.

All Episodes: https://www.youtube.com/@wingingitoddbird/streams

htmx Episode:
https://www.youtube.com/playlist?list=PL4jAKUtAhpHkxpCTpSb9QDgF1KN6ZrzE7

In addition to the CSS Tips & Tricks series, we run a monthly show called Winging It LIVE. We interview experts and dig into front-end web development. Topics range from htmx to #CSS to #UX to fluid type and more.

All Episodes: https://www.youtube.com/@wingingitoddbird/streams

htmx Episode:
https://www.youtube.com/playlist?list=PL4jAKUtAhpHkxpCTpSb9QDgF1KN6ZrzE7

A more advanced 3D box where you can control the depth, angle, and perspective! 🤩

https://css-tip.com/3d-box/

Built using only the border properties and modern CSS features.

#CSS #HTML

A more advanced 3D box where you can control the depth, angle, and perspective! 🤩

https://css-tip.com/3d-box/

Built using only the border properties and modern CSS features.

#CSS #HTML

sticky slices

https://nerdy.dev/sticky-gradient-transitions #CSS

sticky slices

https://nerdy.dev/sticky-gradient-transitions #CSS

What Can We Actually Do With #CSS corner-shape? "So, corner-shape is actually a helluva lot of fun. It certainly has more uses than I expected, and no doubt with some experimentation you’ll come up with some more." https://css-tricks.com/what-can-we-actually-do-with-corner-shape/

What Can We Actually Do With #CSS corner-shape? "So, corner-shape is actually a helluva lot of fun. It certainly has more uses than I expected, and no doubt with some experimentation you’ll come up with some more." https://css-tricks.com/what-can-we-actually-do-with-corner-shape/

A 3D box with a simple CSS code.

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

#CSS #HTML

The @w3c #CSS Environment Variables Module Level 1 spec lets pages use environment data as CSS variables, such as "safe areas", viewport segments for foldable and hinged displays, and user text scale preferences #FPWD #timetogiveinput

▶️ https://www.w3.org/TR/css-env-1/

Environment variables are global and remain consistent everywhere. Their values can be inserted into different places using the 'env()' function, much like how 'var()' works.

Feedback welcome: https://github.com/w3c/csswg-drafts/labels/css-env-1

💡 CSS Tip!

Ready for the new corner-shape property? Learn how you can use it to create most of the common CSS Shapes without hassle.

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

All you have to do is adjust the border-radius. Yes, border-radius!

#CSS #HTML

💡 CSS Tip!

Ready for the new corner-shape property? Learn how you can use it to create most of the common CSS Shapes without hassle.

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

All you have to do is adjust the border-radius. Yes, border-radius!

#CSS #HTML

🆕 blog! “Targetting specific characters with CSS rules”

You can't. There is no way to use CSS to apply a style to every letter "E". It simply can't be done.

At least, that's what they want you to think…

What if I told you there was a secret and forbidden way to target specific characters in text and apply some styles to them?

As part of my experiments in creating a "drunk" C…

👀 Read more: https://shkspr.mobi/blog/2025/09/targetting-specific-characters-with-css-rules/
⸻
#css #HTML

🆕 blog! “Targetting specific characters with CSS rules”

You can't. There is no way to use CSS to apply a style to every letter "E". It simply can't be done.

At least, that's what they want you to think…

What if I told you there was a secret and forbidden way to target specific characters in text and apply some styles to them?

As part of my experiments in creating a "drunk" C…

👀 Read more: https://shkspr.mobi/blog/2025/09/targetting-specific-characters-with-css-rules/
⸻
#css #HTML

"Apple has a private #CSS property to add Liquid Glass effects to web content"

👉 https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/

The more things change, the more they stay the same... #webdev

"Apple has a private #CSS property to add Liquid Glass effects to web content"

👉 https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/

The more things change, the more they stay the same... #webdev

CSS Overrides Without “!important” Using Layers in Astro Components, by @jlengstorf (@codetv.dev):

https://codetv.dev/blog/astro-css-overrides-layers

#astro #components #css #cascade

CSS Overrides Without “!important” Using Layers in Astro Components, by @jlengstorf (@codetv.dev):

https://codetv.dev/blog/astro-css-overrides-layers

#astro #components #css #cascade

By correctly understanding all the alignment mechanisms, you can unlock "secret" ways to center an element inside a container.

Demo: https://codepen.io/t_afif/pen/dPYBPGm via @codepen.io

flex-wrap and space-around?! Yes, it's valid and it works!

Don't miss my exploration for more alignment tricks: https://css-tip.com/explore/alignment/

#CSS #HTML

By correctly understanding all the alignment mechanisms, you can unlock "secret" ways to center an element inside a container.

Demo: https://codepen.io/t_afif/pen/dPYBPGm via @codepen.io

flex-wrap and space-around?! Yes, it's valid and it works!

Don't miss my exploration for more alignment tricks: https://css-tip.com/explore/alignment/

#CSS #HTML

#cssChallenge2025 How would you code this with:

✨ 1 HTML element, no JS, no SVG
✨ inner border interrupted by text box shape
✨ responsive
✨ text wraps depending on space
✨ contenteditable
✨ 1 image = the background one

(if you're Cheetah+ on Ko-fi/ Patreon, you know where to find the answer)

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

#cssChallenge2025 How would you code this with:

✨ 1 HTML element, no JS, no SVG
✨ inner border interrupted by text box shape
✨ responsive
✨ text wraps depending on space
✨ contenteditable
✨ 1 image = the background one

(if you're Cheetah+ on Ko-fi/ Patreon, you know where to find the answer)

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

#css subgrid is the best. Often my go-to for avoiding nested interactive elements #a11y https://codepen.io/noleli/pen/qEOyKEJ

#css subgrid is the best. Often my go-to for avoiding nested interactive elements #a11y https://codepen.io/noleli/pen/qEOyKEJ

#CSS

✅ contrast-color()
✅ control-value()
✅ sibling-index()
✅ scroll-state()
✅ mixins/functions
✅ @starting-style

We chat these and much more over on the @workingdraft show

⤷ https://nerdy.dev/working-draft-show-revision-672

#CSS

✅ contrast-color()
✅ control-value()
✅ sibling-index()
✅ scroll-state()
✅ mixins/functions
✅ @starting-style

We chat these and much more over on the @workingdraft show

⤷ https://nerdy.dev/working-draft-show-revision-672

There's `@starting-style` in #CSS https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style but no 'ending-style' 🫠

Wondering how it got spec-ed out in the first place and even got implemented in browsers (around 2023-2024), where there's start but no end… 🤔

Draft discussion here: https://github.com/w3c/csswg-drafts/issues/9500

There's `@starting-style` in #CSS https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style but no 'ending-style' 🫠

Wondering how it got spec-ed out in the first place and even got implemented in browsers (around 2023-2024), where there's start but no end… 🤔

Draft discussion here: https://github.com/w3c/csswg-drafts/issues/9500

I published a couple of YouTube shorts with 1-minute CSS/HTML tips and tricks. They are vertical versions of previous non-short movies.

Accent-color: https://www.youtube.com/shorts/KyVeQ1FTwOg

Theme color: https://www.youtube.com/shorts/_Ru5hHCxqQc

My wife will record some voice over later... something tells me those will be more successful than these ones that are only instrumentals with some jazzy music 😅

#html #css #video

I published a couple of YouTube shorts with 1-minute CSS/HTML tips and tricks. They are vertical versions of previous non-short movies.

Accent-color: https://www.youtube.com/shorts/KyVeQ1FTwOg

Theme color: https://www.youtube.com/shorts/_Ru5hHCxqQc

My wife will record some voice over later... something tells me those will be more successful than these ones that are only instrumentals with some jazzy music 😅

#html #css #video

I have spent the last few days creating dark mode #CSS for a site that didn’t have any, and I have to say, I do not understand how you people can stand it. (Much as you don’t understand my preference for light mode, of course.) My optic nerve hurts SO MUCH right now.

I don’t begrudge the effort: the accessibility win alone made it worth doing, let alone supporting user preference. It was a necessary update, long overdue. But still, OW.

I have spent the last few days creating dark mode #CSS for a site that didn’t have any, and I have to say, I do not understand how you people can stand it. (Much as you don’t understand my preference for light mode, of course.) My optic nerve hurts SO MUCH right now.

I don’t begrudge the effort: the accessibility win alone made it worth doing, let alone supporting user preference. It was a necessary update, long overdue. But still, OW.

言いたいことはわからないでもないけど、後方互換を切り捨ててまで車輪を再発明する必要あるかな…？ height: 50% の例も、自分には「深刻な問題」には感じられなかった…

自分が #CSS 推しの視点から見てるだけかもしれないけど

https://techfeed.io/entries/6893cfcfce1a4c33b991cffa

`revert` という #CSS の値、恥ずかしながら知らなかった。もっと早く知りたかった

https://developer.mozilla.org/ja/docs/Web/CSS/revert

CSS mixins & functions are coming! And the best way to prepare is by re-visiting CSS variables.

Don’t let the Guaranteed Invalid value & Invalid at Computed Value Time behavior trip you up. Watch my CSS Day talk, or book a workshop to go in depth with modern #CSS!

https://www.oddbird.net/talks/mixins/

CSS mixins & functions are coming! And the best way to prepare is by re-visiting CSS variables.

Don’t let the Guaranteed Invalid value & Invalid at Computed Value Time behavior trip you up. Watch my CSS Day talk, or book a workshop to go in depth with modern #CSS!

https://www.oddbird.net/talks/mixins/

💡 CSS Tip!

Create an infinite logo marquee using modern CSS and less than 10 lines of code.

https://css-tip.com/logo-marquee/

Where's the novelty, you might ask? It's responsive, works with any number of images, doesn't rely on magic numbers, and you can easily control it using CSS variables.

Another use case for modern CSS features (shape(), sibling-index(), sibling-count(), etc).

#CSS #HTML

💡 CSS Tip!

Create an infinite logo marquee using modern CSS and less than 10 lines of code.

https://css-tip.com/logo-marquee/

Where's the novelty, you might ask? It's responsive, works with any number of images, doesn't rely on magic numbers, and you can easily control it using CSS variables.

Another use case for modern CSS features (shape(), sibling-index(), sibling-count(), etc).

#CSS #HTML

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

ICYMI, I got real nerdy about responsive type scales. Graphs! Equations! #CSS! And a peek at some CSS functions that don’t even exist yet, like `progress()` and `calc-mix()` 😮 https://noahliebman.net/2024/01/the-math-and-css-of-responsive-type-scales/

🎉 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

Finally wrote a bit about my jiggly nav links.

It was mostly an exercise in making a very custom ease for #GSAP out of a damped cosine function. #webdev #animation #css #javascript https://noahliebman.net/2022/12/waves-part-2-plucky/

I recently redid my personal site and made it 〰️wavey🌊

I know everyone loves the plucky nav underlines, but first I wrote about the bottom of the header.

Sine waves! Interference patterns! #math! #javascript! #css! #d3! #animation! https://noahliebman.net/2022/11/waves-part-1-scroll-phaser/

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.

Figured I should post an #intro here for those who don’t know me! I’m Aubrey and I love #html, #css, and front end development in general.

For fun I #knit, #run, and plan in my #hobonichi using my many #fountainpens. Give me a follow if any of that sounds interesting!

Nouvelle #introduction / #introductionfr pour le Fediverse.

Je fais du #design et du #webdev (#markup #css) à #Paris. Je fais du développement (#python, j’ai collaboré à @bookwyrm), je fais du #vélo surtout en #vélotaf, j'aime la #photo #argentique (#filmphotography) même si je ne pratique plus autant qu'avant.

Je parle souvent de #climat, parfois de #politique (#frpol). Ma chatte Pourriel est la plus belle du monde.

(#velo et #velotaf pour que le motdièze marche sans l'accent)

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.