#webdevelopment

These are public posts tagged with #webdevelopment. You can interact with them if you have an account anywhere in the fediverse.

FluxCSS

📢 Announcement: FluxCSS Beta 0.1.0 is Live! 📢

I'm thrilled to announce that the beta 0.1.0 version of **[FluxCSS](fluxcss.org)** is now available! FluxCSS is a responsive CSS framework, inspired by Bulma and Bootstrap, designed to significantly speed up the web design process.

Thank you and happy testing! 🚀

#FluxCSS #CSSFramework #WebDesign #WebDevelopment #ResponsiveDesign #FrontendDevelopment #OpenSource #BetaRelease #WebDevTools #DeveloperLife #FeedbackWelcome

FluxCSS: Revolutionizing Responsive Design

fluxcss.org
Apr 13, 2025, 15:16 · · 1 · 0
Ana Tudor 🐯

You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on @csstricks css-tricks.com/taming-blend-mo

#CSS #blending #blendMode #cssGradient #code #web #webDev #webDevelopment #dev #coding #frontend

Screenshot of an interactive demo, highlighting how the `difference` blend mode works.
Apr 12, 2025, 12:21 · · 0 · 0
Ana Tudor 🐯

And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 #CSS declarations.

Live demos on @codepen

✳️ codepen.io/thebabydino/pen/mdO

✳️ codepen.io/thebabydino/pen/dyO

#blending #blendMode #cssGradient #code #web #webDev #webDevelopment #dev #coding #frontend

.card { background: url(image.jpg) 50%/ cover, linear-gradient(90deg, #000, #fff); /* or the difference blend mode */ background-blend-mode: exclusion }
Original image: blue butterfly.
Inverted image using the exclusion blend mode. The butterfly goes from its original blue on the left to red on the right, passing through a 50% grey.
Pseudo-inversion of image using the difference blend mode. The butterfly goes from its original blue on the left to red on the right, this time passing through other hues rather than through a 50% grey.
Apr 12, 2025, 12:17 · · 0 · 0
Ana Tudor 🐯

Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.

So basically, it's again just one `background` + one `background-blend-mode` property.

Live demo on @codepen
codepen.io/thebabydino/pen/vYy

#CSS #blending #blendMode #pattern #cssGradient #coding #frontend #code #web #dev #webDev #webDevelopment #cssPattern #cssPatterns #patterns

.card { --s: rgb(0 0 0/ .2) 0, #0000 5px 50px; background: /* shadows */ repeating-linear-gradient(45deg, var(--s)), repeating-linear-gradient(-45deg, var(--s)), /* main pattern */ repeating-linear-gradient(45deg, var(--c)), repeating-linear-gradient(-45deg, var(--c)); background-blend-mode: multiply, multiply, lighten } .card:nth-child(1) { --c: #847971 0 10px, #938981 0 20px, #9e938a 0 30px, #a89c93 0 40px, #bfb6ab 0 50px } .card:nth-child(2) { --c: #333 0 10px, #555 0 20px, #c55 0 30px, #ccc 0 40px, #eee 0 50px }
Up arrow card patterns.
More up arrow card patterns.
Apr 11, 2025, 08:46 · · 0 · 0
Ana Tudor 🐯

And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.

Live on @codepen codepen.io/thebabydino/pen/xxz - only 2 CSS declarations necessary!

#CSS #tinyCSStip #blending #blendMode #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

Screenshot of demo with gradient cards, all showing left to right gradients, vibrant at the top of the card, but getting progressively more and more desaturated as we go towards the bottom.
.card { /* relevant code for the effect */ background: linear-gradient(90deg, var(--stop-list)), linear-gradient(#0000, grey); background-blend-mode: luminosity; /* other styles */ aspect-ratio: 3/ 2; border-radius: .5em; box-shadow: 2px 2px 5px 1px #040404 }
Apr 11, 2025, 06:52 · · 0 · 0
Ana Tudor 🐯

A much newer @codepen demo: smoothly connected cards codepen.io/thebabydino/pen/azb - continuous backgrounds across all, concave roundings + drop shadows, responsivity.

#CSS #SVG #filter #svgFilter #cssGradient #web #webDev #dev #webDevelopment #code #coding #frontend #CodePenChallenge

Smooth connected offset cards.
Apr 11, 2025, 06:21 · · · 0 · 0
LavX News

Navigating the New Landscape of <h1> Element Styles: What Developers Need to Know

As browser vendors begin to roll out significant changes to the default styles of <h1> elements, developers must adapt their coding practices to avoid unexpected results. This article delves into the ...

news.lavx.hu/article/navigatin

#news #tech #WebDevelopment #HTML #Lighthouse

Navigating the New Landscape of <h1> Element Styles: What Developers Need to Know
Apr 11, 2025, 02:30 · · 1 · 0
Ana Tudor 🐯

Ever want a box where the padding or content box (inner) rounding is bigger than the border-radius?

You can do it with a single element, no pseudos! Here's my take on it, including the particular case where you don't want any outer rounding, but sharp corners reddit.com/r/css/comments/1jvs

Live demo on @codepen
codepen.io/thebabydino/pen/rNJ

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

div { --r-inner: 4em; /* inner box corner rounding radius */ --bw-fake: 1em; /* fake (visible) border width along the edges */ /* real border width value that we set */ --bw-real: calc((var(--bw-fake) + var(--r-inner))*sqrt(2)); /* difference betwen real set border width and visible one */ --d: calc(var(--bw-real) - var(--bw-fake)); margin: calc(-1*var(--d)); border: solid var(--bw-real) brown; padding: 0; border-radius: calc(var(--bw-real)*sqrt(2)); background: beige; clip-path: inset(var(--d) /* use round if you want an outer radius too */) }
Example screenshot. Outer box rounding is smaller than that of inner one.
Apr 10, 2025, 16:57 · · 0 · 0
Ana Tudor 🐯

#tinyCSStip `clip-path` or `mask` are applied after `filter`.

This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.

We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.

codepen.io/thebabydino/pen/BRR

#CSS #filter #cssFilter #clipPath #clipping #cssClipPath #cssMask #coding #frontend #web #dev #webDev #webDevelopment #code

Diagram of how browsers apply filter and clip-path when they’re set on the same element. First the drop-shadow() filter is applied on the initial rectangular box, then the element with drop-shadow() is clipped, cutting out the drop-shadow() too.
Screenshot of the linked demo showing how applying the filter on the parent of the clipped (pseudo-)element can solve the problem if this parent has no other visible parts (borders, backgrounds, shadows).
Apr 10, 2025, 05:32 · · 0 · 0
Kote Isaev

Many people across the globe speak about the ways to #unplugUSservices #UnplugUSA and alike.

Because of React being product of Facebook, this question came to mind: what kind of alternatives to React-based development flows are exist? With rich ecosystems of components?
With some syntax that at least resemble the JSX, for an easier learning curve? (tagged templates of html counts too).

#programming #webDevelopment

Apr 10, 2025, 00:42 · · 1 · 0
Ana Tudor 🐯

Here's a quick breathing box demo with `clip-path: shape()` on @codepen.io: codepen.io/thebabydino/pen/ZYE

Working in Chrome 135 and Safari 18.4! 🥳🎉

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

GIF
Apr 09, 2025, 13:49 · · 0 · 0
Ana Tudor 🐯

Here's also a stepped `conic-gradient()` effect, with a grain effect applied cdpn.io/pvoBeZP

For more on the grain effect, check out this older post mastodon.social/@anatudor/1103

#CSS #SVG #filter #svgFilter #cssGradient #web #webDev #webDevelopment #dev #code #coding #frontend

Grainy stepped conic gradient.
Apr 09, 2025, 13:47 · · 0 · 0
Ana Tudor 🐯

By the way, the code is heavily commented codepen.io/thebabydino/pen/MYW

So you can see how it works without JS, without wrapping individual elements into spans, just letting it wrap naturally. And without covers that wouldn't allow for an image backdrop behind the text.

#CSS #SVG #filter #svgFilter #blendMode #blending #code #coding #frontend #web #dev #webDevelopment #webDev

GIF
Apr 09, 2025, 12:41 · · 0 · 0
Ana Tudor 🐯

Same visual result in both cases, it's just that the #CSS version specifies the entire RGBA value + (equidistant) stop positions for each stop, while the #SVG #filter one only specifies the alpha values for each stop. Given those are equidistant too, a `steps()` way of setting them would make sense.

More stepped gradient examples on @codepen
codepen.io/thebabydino/pen/jOo

These all use the same SVG filter.

#svgFilter #cssGradient #coding #frontend #web #webDev #webDevelopment #dev #code #stripes

More stepped gradient examples.
Apr 09, 2025, 10:38 · · 0 · 0

Resources

Developers

What is Mastodon?

qoto.org

More…

v3.5.19-qoto · Privacy policy