Lmst

Because this @codepen demo just got hearted and I've never shared it here before https://codepen.io/thebabydino/pen/VwmQQwJ

The concept behind the XOR is something I explained in this
@csstricks article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

(should probably redo it with view transitions)

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

For Hugo there was '#blending in' and there was *blending in*.
This was too much.
Every week back home would ring an old phone line in Forrest's basement at 8:56 p.m. local time. He had to pick up on the eighth ring to actually make contact.
No more.
No fewer.
Two students ran past. Newspaper between their heads and the rain. Hugo stood back in the shadows and checked his watch.
8:43 p.m.
When the coast was clear, he bolted for the maintenance entrance. 2/x
#wss366

I handmade this 3ft Toothless Rug I designed myself 🙂
.
.
.
.
#toothless #howtotrainyourdragon #toothlessdragon #dreamworks #movie #movieart #dragon #dragonart #tufting #tufted #tuft #tuftingrugs #tuftedrug #tuftRug #yarn #yarnart #yarnartist #yarnaddict #rug #rugs #rugart #art #artwork #artist #craft #crafts #craftshow #craftfair #cute #cuteart #oddart #uniqueart #movies #animation #disney #blending #imadethis #somethingimade #handmade #handcrafted #customrug #customart #custom #carpet

Having a go on the wheel . wedged in some wild red ochre slip into white clay first . loving the magic #pottery #wheelturned #ochre #ceramics #blending #clay #wild

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

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

Screenshot of an interactive demo, highlighting how the `difference` blend mode works.

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

✳️ https://codepen.io/thebabydino/pen/mdOzLxE

✳️ https://codepen.io/thebabydino/pen/dyOVgeR

#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
}

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.

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
https://codepen.io/thebabydino/pen/vYyNyER

#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
}

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 https://codepen.io/thebabydino/pen/xxzjJXL - 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
}

By the way, the code is heavily commented https://codepen.io/thebabydino/pen/MYWxeew

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

Testing blending some clays . biggest lump I've been able to wedge since surgery . stoked . Core strength returning . Can I make a pinch pot from this? Or will it mess up the marbling? I'd like a coffee mug #pottery #handbuilding #blending #marbling

If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.

How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?

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

The visual result showing four lines of text, middle aligned, each with its own semitransparent background and padding. The padding on each line leads to intersection, and where we have intersection, the semi-transparent background becomes more opaque.

The CSS producing this is:
```
p > span {
padding: .25em;
border-radius: 5px;
background: rgb(0 0 0/ var(--a, .7));
color: #fff;
/* add lateral padding + border-radius to each line */
box-decoration-break: clone
}
```

Hi, mastodon 🦣 I have a new article out!

A Deep Dive into the Inline Background Overlap Problem: https://frontendmasters.com/blog/overlapping-inline-backgrounds/

How do you get the below result (semi-transparent background on inline span) with large padding & no overlap?

Answer in article, but think a bit about it first. 😼

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

✅ Desired result: consecutive line backgrounds overlap doesn't result in alpha increase and the text is always on top of the background, including that of adjacent lines.

❌ Problem: by default, consecutive span lines with semi-transparent backgrounds have an increase in alpha at the overlap and the text on all but the last line is partly covered by the background of the next.

Oh, Firefox, why are you doing this? 😭 🪲

https://bugzilla.mozilla.org/show_bug.cgi?id=1951653

#CSS #blending #blendMode #bug

Plan for #ColumnShaft of #IonicColumn

The #shaft of an #Ionic column is not perfectly cylindrical but gradually tapers off in the top 2/3 of the shaft. As such, the #primaryProfileCurve is not a straight line, nor is it composed of regular arcs. Instead, it is a complex amalgam of straight lines, circular arcs, and #NURBS curves, where the fancy acronym stands for an even fancier name — "Non-Uniform Rational B-Splines."

So, the promise [https://pixelfed.social/p/Splines/789956327130679640] was that we were going to get through this by drawing just straight lines and arcs. How are we going to draw NURBS? The answer is that we won't. The #CAD program will, as long as we give it sufficient information to carry out the task.

There are three NURBS curves in the profile shown in the plan. The longest and the most important one is between the points marked C through J. There is a smaller one between B and C, and an even smaller one between J and K.

While all three NURBS curves are mathematically similar, the information we must provide to the CAD program for the longest one is different from the other two short ones, and the operations the CAD program carries out to construct the longest one and the other two curves is also different.

This brings us to two new operations — #interpolate or "fit through points," and #blend shapes (existing curves or surfaces). When you choose a CAD program, make sure it supports NURBS, #interpolation, and #blending.

Starting at the bottom of the shaft, point A is 144 units from the #columnAxis, and so is point B, which is also 768 units higher than A. Starting with C through J, the points gradually move closer to the axis until J is exactly µ * 5/6, or 120 units from the axis. These points are equidistant vertically — all 192 units apart. However the horizontal distance is non-uniform.

In the next post we will mark the 8 points C through J using using one arc and 8 straight lines — I will keep my promise.

Pure #CSS 1 div halftone-masked background card https://codepen.io/thebabydino/pen/GRNKqRv on @codepen.

Made this 4 years ago - can you guess how before checking the code?

Doesn't work in Firefox due to an old bug 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498 not even related to the halftone mask, but caused by the duo text on the right.

#filter #code #coding #frontend #cssfFilter #web #dev #webDev #webDevelopment #blendMode #blending

card with halftone mask on image on the left and duo text on the right (two lines of text, top one white, bottom one reddish)

Tea lovers, assemble! Blending your own brews at home? A game changer! Be consistent, get creative, and connect with cultures. Why settle for ordinary when you can craft extraordinary? #tea #blending #homemade

Really cool to see people linking my Frontend Masters article as a resource https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

#CSS #code #coding #frontend #pattern #cssPattern #cssGradient #halftone #web #dev #webDev #webDevelopment #filter #cssFilter #blendMode #blending

Screenshot of a reddit post asking how to achieve a halftone effect and the top two answers suggesting my article.

By the way, this is my second article for Frontend Masters.

My first was a few months ago and it was about creating dynamic split effects (image, text, page) without any content duplication whatsoever https://frontendmasters.com/blog/split-effects-with-no-content-duplication/

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