#csstricks — Public Fediverse posts

Well it's live !

https://css-tricks.com/another-stab-at-the-perfect-css-pie-chart-sans-javascript

PS. First comment is fair. Pay attention to accesibility when trying to display data a/o charts on your website.

#css #csstricks #webdev #a11y #article

Well it's live !

https://css-tricks.com/another-stab-at-the-perfect-css-pie-chart-sans-javascript

PS. First comment is fair. Pay attention to accesibility when trying to display data a/o charts on your website.

#css #csstricks #webdev #a11y #article

I still find funny how people are still trying to replicate #Apple's Liquid Glass UI from iOS 26.

Those who try to make a simple or performant implementation end up with something "not quite" Liquid Glass.

Those who try to replicate it 1:1 end up with their computer blown up.

#Frontend #SoftwareDevelopment #JavaScript #CSS #CSSTricks #iOS26 #iOS #iPhone

I still find funny how people are still trying to replicate #Apple's Liquid Glass UI from iOS 26.

Those who try to make a simple or performant implementation end up with something "not quite" Liquid Glass.

Those who try to replicate it 1:1 end up with their computer blown up.

#Frontend #SoftwareDevelopment #JavaScript #CSS #CSSTricks #iOS26 #iOS #iPhone

🚀 "Revolutionary" CSS trick: let the browser do ALL the work while you sip coffee and pretend you're still relevant. Just make sure to read the dozen policies, post guidelines, and maybe catch a safari preview or two. 🙄 #WebDevGenius
https://webkit.org/blog/16929/contrast-color/ #WebDevGenius #CSSTricks #BrowserAutomation #CoffeeBreak #WebDevelopment #HackerNews #ngated

🚀 "Revolutionary" CSS trick: let the browser do ALL the work while you sip coffee and pretend you're still relevant. Just make sure to read the dozen policies, post guidelines, and maybe catch a safari preview or two. 🙄 #WebDevGenius
https://webkit.org/blog/16929/contrast-color/ #WebDevGenius #CSSTricks #BrowserAutomation #CoffeeBreak #WebDevelopment #HackerNews #ngated

Years ago, I saw some talk about CSS. In it, the host showed how you can take a rendered content of a <div> and display it in another div, just by referencing it, without actually copying the code or using JavaScript. Does anyone have any idea how it was called and whether it is still supported? Thanks a lot!

#html #css #webdev #frontend #csstricks #help

A little @codepen demo I made some years back: #duotone a B&W image using pure #CSS #blending (and very little code in total) https://codepen.io/thebabydino/pen/MWbdbrm

With a comparison slider between the two blend modes that may be used for the effect and a picker for duotone palette base.

Created for my Taming Blend Modes #CSSTricks article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

#blendMode #code #coding #frontend #web #dev #webDev #webDevelpment #interactive #CodePen #JS #JavaScript #slider #comparison #comparisonSlider

A little @codepen demo I made some years back: #duotone a B&W image using pure #CSS #blending (and very little code in total) https://codepen.io/thebabydino/pen/MWbdbrm

With a comparison slider between the two blend modes that may be used for the effect and a picker for duotone palette base.

Created for my Taming Blend Modes #CSSTricks article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

#blendMode #code #coding #frontend #web #dev #webDev #webDevelpment #interactive #CodePen #JS #JavaScript #slider #comparison #comparisonSlider

Saw this in @cassidoo newsletter and it blew my mind:

"Text fragments are a powerful feature of the modern web platform that allows for precise linking to specific text within a web page without the need to add an anchor! This feature is complemented by the ::target-text #CSS pseudo-element, which provides a way to style the highlighted text."

https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html?

#WebDev #frontend #design #CssTricks

Saw this in @cassidoo newsletter and it blew my mind:

"Text fragments are a powerful feature of the modern web platform that allows for precise linking to specific text within a web page without the need to add an anchor! This feature is complemented by the ::target-text #CSS pseudo-element, which provides a way to style the highlighted text."

https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html?

#WebDev #frontend #design #CssTricks

#tinyCSStip to avoid repetition and make your code more maintainable! 🌟

If you set a stop position to a value smaller than that of the previous, it's taken to be equal to the previous!

Want an abrupt change at 30% between aqua and blue?

Just write `aqua 30%, blue 0`! 😎

#CSS #gradient #cssGradient #coding #code #webDev #dev #frontend #cssTricks #webDevelopment

#tinyCSStip to avoid repetition and make your code more maintainable! 🌟

If you set a stop position to a value smaller than that of the previous, it's taken to be equal to the previous!

Want an abrupt change at 30% between aqua and blue?

Just write `aqua 30%, blue 0`! 😎

#CSS #gradient #cssGradient #coding #code #webDev #dev #frontend #cssTricks #webDevelopment

@cr0ybot
😯 One of the reason I don't like #CSS anymore, I can't follow. Too much has happened during last 5 years and it seems it's not gonna stop soon. Unfortunately I still have to use it, a lot.
I was wondering in what cases the "of" operator might be useful. Yes, makes sense here:
`tbody > tr:nth-child(even of :not([hidden])) {...}`
#webdesign #csstricks

@cr0ybot
😯 One of the reason I don't like #CSS anymore, I can't follow. Too much has happened during last 5 years and it seems it's not gonna stop soon. Unfortunately I still have to use it, a lot.
I was wondering in what cases the "of" operator might be useful. Yes, makes sense here:
`tbody > tr:nth-child(even of :not([hidden])) {...}`
#webdesign #csstricks

A handy CSS trick for handling text overflow like a pro!

#css #csstricks #webdesign #webdev

My little brain dump about font sizes became a talking piece on CSS Tricks.

That escalated quickly. 😂

https://css-tricks.com/font-size-limbo/

#WebDesign
#cssTricks
#Frontend

My little brain dump about font sizes became a talking piece on CSS Tricks.

That escalated quickly. 😂

https://css-tricks.com/font-size-limbo/

#WebDesign
#cssTricks
#Frontend

#Development #Relaunches
CSS Chronicles XLII · Guess what? Yes, CSS-Tricks is back! https://ilo.im/15zqya

_____
#CssTricks #WebTechnology #Design #WebDesign #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Relaunches
CSS Chronicles XLII · Guess what? Yes, CSS-Tricks is back! https://ilo.im/15zqya

_____
#CssTricks #WebTechnology #Design #WebDesign #WebDev #Frontend #HTML #CSS #JavaScript

Hey hey hey CSS Tricks is actually back!!

@geoff is going through updating the articles that need it and writing great new ones! Yessssssssss

Go check out @csstricks - find the new ones and scroll down past a few strange test posts to find lots of recent links to fabulous older articles that have been updated 🧡

https://css-tricks.com

#CSS #CSSTricks

Hey hey hey CSS Tricks is actually back!!

@geoff is going through updating the articles that need it and writing great new ones! Yessssssssss

Go check out @csstricks - find the new ones and scroll down past a few strange test posts to find lots of recent links to fabulous older articles that have been updated 🧡

https://css-tricks.com

#CSS #CSSTricks

#Development #Explorations
Is CSS Tricks back? · The once-popular blog is showing signs of a revival https://ilo.im/15z4br

_____
#CssTricks #WebTechnology #Design #WebDesign #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Explorations
Is CSS Tricks back? · The once-popular blog is showing signs of a revival https://ilo.im/15z4br

_____
#CssTricks #WebTechnology #Design #WebDesign #WebDev #Frontend #HTML #CSS #JavaScript

#tinyCSStip Avoid ugly edges for CSS gradient circles!

❌ DON'T 😭
(abrupt change, no semi-transparent pixels at the edge, jagged look)
radial-gradient(circle, #202 5em, #0000 0)

✅ DO 😻
(semi-transparent edge pixels, smooth look)
radial-gradient(5em, #202 calc(100% - 1px), #0000)

#css #cssGradient #cssTricks #jagged #jaggedEdge #smooth #smoothEdge #code #coding #frontend #web #webDev #dev #webDevelopment

#tinyCSStip Avoid ugly edges for CSS gradient circles!

❌ DON'T 😭
(abrupt change, no semi-transparent pixels at the edge, jagged look)
radial-gradient(circle, #202 5em, #0000 0)

✅ DO 😻
(semi-transparent edge pixels, smooth look)
radial-gradient(5em, #202 calc(100% - 1px), #0000)

#css #cssGradient #cssTricks #jagged #jaggedEdge #smooth #smoothEdge #code #coding #frontend #web #webDev #dev #webDevelopment

`feComposite` & `feBlend` take 2 inputs: the 2 layers we're compositing/ blending. Compositing/ blending take 2 layers and combine them in a single one using a compositing operation/ blend mode.

`operator='out'` for `feComposite` is kinda like `mask-composite: subtract` - mask compositing is something I've detailed in this #cssTricks article https://css-tricks.com/mask-compositing-the-crash-course/#aa-subtract

#svgFilter #code #coding #frontend #gotcha #web #dev #webDev #webDevelopment #compositing #blending #alpha

`feComposite` & `feBlend` take 2 inputs: the 2 layers we're compositing/ blending. Compositing/ blending take 2 layers and combine them in a single one using a compositing operation/ blend mode.

`operator='out'` for `feComposite` is kinda like `mask-composite: subtract` - mask compositing is something I've detailed in this #cssTricks article https://css-tricks.com/mask-compositing-the-crash-course/#aa-subtract

#svgFilter #code #coding #frontend #gotcha #web #dev #webDev #webDevelopment #compositing #blending #alpha

#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!

Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa

The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes

#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment

#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!

Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa

The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes

#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment

Animating a custom property* that the gradients used for the effect depend on can also produce cool effects, like in https://codepen.io/thebabydino/pen/wvRVNgv - also an entry for this week's #CodePenChallenge😎

And a solution to https://mastodon.social/@anatudor/111261576456520013

*not yet in Firefox stable, only in Nightly https://mastodon.social/@anatudor/112157049928865915

#css #cssVariables #customProperty #filter #cssFilter #blending #blendMode #cssTricks #code #coding #frontend #webDev #webDevelopment #CodePen

Animating a custom property* that the gradients used for the effect depend on can also produce cool effects, like in https://codepen.io/thebabydino/pen/wvRVNgv - also an entry for this week's #CodePenChallenge😎

And a solution to https://mastodon.social/@anatudor/111261576456520013

*not yet in Firefox stable, only in Nightly https://mastodon.social/@anatudor/112157049928865915

#css #cssVariables #customProperty #filter #cssFilter #blending #blendMode #cssTricks #code #coding #frontend #webDev #webDevelopment #CodePen

The .jpg image map case is... special. Most of my demos use extra pseudos/ elements and `mix-blend-mode` for compatibility reasons.

But Safari, only browser to support `filter()` (*not* `filter`!) allows for the no extra pseudo/ element #halftone solution https://codepen.io/thebabydino/pen/rNgBqNy

For reference, article on `filter()` https://iamvdo.me/en/blog/advanced-css-filters#filter

#css #safari #filter #cssFilter #web #blending #blendMode #code #coding #CodePen #frontend #cssTricks #webDev #webDevelopment

The .jpg image map case is... special. Most of my demos use extra pseudos/ elements and `mix-blend-mode` for compatibility reasons.

But Safari, only browser to support `filter()` (*not* `filter`!) allows for the no extra pseudo/ element #halftone solution https://codepen.io/thebabydino/pen/rNgBqNy

For reference, article on `filter()` https://iamvdo.me/en/blog/advanced-css-filters#filter

#css #safari #filter #cssFilter #web #blending #blendMode #code #coding #CodePen #frontend #cssTricks #webDev #webDevelopment

A `linear-gradient()` pattern coupled with a `linear-gradient()` map is what's behind this retro wave #CodePen demo https://codepen.io/thebabydino/pen/jOvMQMO

And animating the map's `background-position` is how we get this progressive close/ open blinds effect https://mastodon.social/@anatudor/110153344888593740

#css #filter #cssFilter #blending #blendMode #halftone #cssAnimation #code #coding #frontend #webDev #cssTricks #webDevelopment

A `linear-gradient()` pattern coupled with a `linear-gradient()` map is what's behind this retro wave #CodePen demo https://codepen.io/thebabydino/pen/jOvMQMO

And animating the map's `background-position` is how we get this progressive close/ open blinds effect https://mastodon.social/@anatudor/110153344888593740

#css #filter #cssFilter #blending #blendMode #halftone #cssAnimation #code #coding #frontend #webDev #cssTricks #webDevelopment

Pattern part may be anything small & repeating. We may also use thin blurry stripes - linear-gradient, rays - repeating-conic-gradient, rings - repeating-radial-gradient https://codepen.io/thebabydino/pen/qBGWXNR

Map part may also be another type of gradient or even a .jpg https://codepen.io/thebabydino/pen/LYGGwrm

#css #CodePen #halftone #filter #cssFilter #blending #blendMode #cssGradient #cssTricks #code #coding #fontend #webDev #webDevelopment

Pattern part may be anything small & repeating. We may also use thin blurry stripes - linear-gradient, rays - repeating-conic-gradient, rings - repeating-radial-gradient https://codepen.io/thebabydino/pen/qBGWXNR

Map part may also be another type of gradient or even a .jpg https://codepen.io/thebabydino/pen/LYGGwrm

#css #CodePen #halftone #filter #cssFilter #blending #blendMode #cssGradient #cssTricks #code #coding #fontend #webDev #webDevelopment

I first came up with the idea and gave a talk on it almost half a decade ago. And then I refined the topic a bit for another talk which used these slides https://codepen.io/thebabydino/project/full/ZjwjBe you may have seen me share before.

(yes, Kreator shirt 😼 )

#css #blendMode #blending #cssGradient #halftone #cssFilter #filter #filterEffect #code #coding #frontend #cssTricks #webDev #webDevelopment

I first came up with the idea and gave a talk on it almost half a decade ago. And then I refined the topic a bit for another talk which used these slides https://codepen.io/thebabydino/project/full/ZjwjBe you may have seen me share before.

(yes, Kreator shirt 😼 )

#css #blendMode #blending #cssGradient #halftone #cssFilter #filter #filterEffect #code #coding #frontend #cssTricks #webDev #webDevelopment

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment

Beyond aspect-ratio queries.💡

Since I came across this older tweet https://twitter.com/anatudor/status/1547144654017249280/photo/1 - we can do it! #tinyCSStip

Needs a fallback for Chrome without flag and doesn't yet work in Firefox stable, but it works in Nightly!

Live test https://codepen.io/thebabydino/pen/PogvwWo

Using this hack https://twitter.com/Jane0ri/status/1711258881521795295

#css #CodePen #code #cssTricks #cssVariables #tips #tipsAndTricks #tip #coding #frontend #webDev #webDevelopment

Beyond aspect-ratio queries.💡

Since I came across this older tweet https://twitter.com/anatudor/status/1547144654017249280/photo/1 - we can do it! #tinyCSStip

Needs a fallback for Chrome without flag and doesn't yet work in Firefox stable, but it works in Nightly!

Live test https://codepen.io/thebabydino/pen/PogvwWo

Using this hack https://twitter.com/Jane0ri/status/1711258881521795295

#css #CodePen #code #cssTricks #cssVariables #tips #tipsAndTricks #tip #coding #frontend #webDev #webDevelopment

#tinyCSStip By default, gradient stop positions are evenly distributed.

So if even distribution is what you want, just omit writing the % values explicitly.

This makes your life easier, especially when you want to add/ remove stops.

#CSS #cssTricks #cssGradient #code #coding #frontend #webDev #webDevelopment #codingTip

#tinyCSStip By default, gradient stop positions are evenly distributed.

So if even distribution is what you want, just omit writing the % values explicitly.

This makes your life easier, especially when you want to add/ remove stops.

#CSS #cssTricks #cssGradient #code #coding #frontend #webDev #webDevelopment #codingTip

@SaraSoueidan almost needs a “w3fools” campaign like was run against w3schools back in the day.

I may need to add #csstricks to excluded results domains 😔

@SaraSoueidan almost needs a “w3fools” campaign like was run against w3schools back in the day.

I may need to add #csstricks to excluded results domains 😔

I totally missed that: #CSSTricks is coming back! They are looking for writers and there are already 5 new articles up!
https://css-tricks.com/guest-writing-for-css-tricks/?utm_team=devrel
#CSS #WebDev

I totally missed that: #CSSTricks is coming back! They are looking for writers and there are already 5 new articles up!
https://css-tricks.com/guest-writing-for-css-tricks/?utm_team=devrel
#CSS #WebDev