One neat CSS trick I recently used on my homepage to make pseudo-random rotations of items so they appear a little odd is the :nth-child thick you can learn more about here:
https://www.the215guys.com/learning/nth-child-cicada-principle/
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!
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/
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?
#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`! 
@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
My little brain dump about font sizes became a talking piece on CSS Tricks.
That escalated quickly. 
#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
https://skillivo.in/css-variables-key-empowering-stylesheets/
Are you ready to take your CSS skills to the next level?
Discover the magic of CSS Variables and how they can revolutionize your web design process! 
In this blog post, you'll learn: 
What CSS Variables are and why they matter How to implement them in your projects Tips and tricks to maximize their potential Real-world examples to inspire your designs
Don't miss out on this game-changing technique that will make your stylesheets more dynamic, maintainable, and scalable! 
Read Full Article - https://skillivo.in/css-variables-key-empowering-stylesheets/
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 
#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)
`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
#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
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
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
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
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
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 
)
#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
