Login

Recent searches

No recent searches

Search options

Not available on mastodon.xyz.
mastodon.xyz is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Mastodon instance, open to everyone, but mainly English and French speaking.

Administered by:

Server stats:

842
active users

mastodon.xyz: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.4

#csstricks

0 posts0 participants0 posts today
Public
tiesselune

If you did not know, in CSS you can detect if the device you're running on has hover support or not (e.g. touchscreens) by using this media query:

@media (hover : hover) { ... }

or

@media (hover : none) { ... }

so you can handle the unavailability of hover effects even if you're planning to run on large tablets

#css#csstricks
Public
Ana Tudor 🐯

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

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 css-tricks.com/taming-blend-mo

GIF
#blendMode#code#coding
Public
Steve Frenzel

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."

alfy.blog/2024/10/19/linking-d?

Screenshot of a text fragment with highlighted text in light purple. Image by Ahmad Alfy.
#WebDev#frontend#design
Continued thread
Public
Ana Tudor 🐯

`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 css-tricks.com/mask-compositin

2 column illustration of mask-composite: subtract in action. On the first column, we have the individual gradient layers (both the visual results and the generating code), swapped - the one that was previously on top is now at the bottom and the other way around. On the second column, we can see what the layer resulting as a result of compositing using the subtract operation looks like.
#svgFilter#code#coding
Public
Ana Tudor 🐯

#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 codepen.io/thebabydino/pen/abr

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

Relevant CSS code: ``` .barcode { /* relevant styles */ background: /* along x axis between semi-transparent black & transparent */ linear-gradient(90deg, #0002, #0000), linear-gradient(90deg, #0003, #0000), linear-gradient(90deg, #0000, #0005), linear-gradient(90deg, #0000, #0007); /* each layer has a different size so that stacking these gradients /* results in a random-looking semitransparent vertical lines pattern */ background-size: 13px, 7px, 19px, 17px; filter: url(#f) } ```
<svg width='0' height='0'> <filter id='f'> <feComponentTransfer> <!-- push all alpha values < .5 to 0 and all others (>= .5) to 1 --> <feFuncA type='discrete' tableValues='0 1'/> </feComponentTransfer> </filter> </svg> <div class='barcode'></div>
Result of stacking prime-number of pixels size linear gradients, before applying the SVG filter: random-looking semitransparent vertical slightly blurry lines pattern.
After applying the SVG filter: proper barcode look!
#CSS#SVG#filter
Continued thread
Public
Ana Tudor 🐯

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

And a solution to mastodon.social/@anatudor/1112

*not yet in Firefox stable, only in Nightly mastodon.social/@anatudor/1121

GIF
#css#cssVariables#customProperty
ExploreLive feeds
About