Leuchtturm @leuchtturm

0 posts0 participants0 posts today

**Pure Tuft** @Pure_Tuft@pixelfed.social · Apr 15

Replied in thread

**Ana Tudor** @anatudor@mastodon.social · Apr 12

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/

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

#CSS #blending #blendMode

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 12

Apr 12

Ana Tudor @anatudor@mastodon.social

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

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

#blending #blendMode #cssGradient

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 11

Apr 11

Ana Tudor @anatudor@mastodon.social

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

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

#CSS #blending #blendMode

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Apr 11

Apr 11

Ana Tudor @anatudor@mastodon.social

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!

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
}

#CSS #tinyCSStip #blending

**Ana Tudor** @anatudor@mastodon.social · Mar 18 *

Mar 18 *

Ana Tudor @anatudor@mastodon.social

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.

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

#CSS #SVG #filter

**Ana Tudor** @anatudor@mastodon.social · Sep 27, 2024

Sep 27, 2024

Ana Tudor @anatudor@mastodon.social

Another request, mastodon

If you can test in Safari, can you let me know what the second (moving) line looks like for you?

https://codepen.io/thebabydino/pen/JjgdLQL?editors=1100

Cyan like expected/ Chrome/ Firefox? Lime like what I'm seeing with Epiphany?

Boosts appreciated if you cannot test. Thanks!

Screenshot. Shows two lines of text, top one is stationary, bottom one is translated back and forth. The fixed one is always cyan, the moving one should be cyan too, but is lime in Epiphany.

#CSS #blending #blendMode

**Ana Tudor** @anatudor@mastodon.social · Sep 18, 2024

Sep 18, 2024

Ana Tudor @anatudor@mastodon.social

If you can test in actual Safari, could you let me know how this looks for you?

https://codepen.io/thebabydino/pen/YzoobYd

Like in the first screenshot or like in the second?

Thanks!

Screenshot, Chrome. Shows a paragraph with a hotpink link with a hotpink underline.

Screenshot, Epiphany. Shows a paragraph with a greenish link with a hotpink underline.

#CSS #frontend #web

**grayrattus** @grayrattus@mastodon.social · Aug 28, 2024

Aug 28, 2024

grayrattus @grayrattus@mastodon.social

https://m.youtube.com/watch?v=_tGMA7Qa0QE&pp=ygUVUGFpbnQgd2l0aCBwYXN0ZWwgb2ls

I'm still looking for this one perfect tool as a future artist to focus on. #watercolor is really nice, but every so often I want to use tools which do not require cleanup afterward.

That's why I bought myself some cheap #oilpastels and started to draw with them without understanding that you can actually blend them …

This video allowed me to explore the topic of color #blending with #pastels and definitely I'll start exploring this topic further.

www.youtube.com - YouTubeAuf YouTube findest du die angesagtesten Videos und Tracks. Außerdem kannst du eigene Inhalte hochladen und mit Freunden oder gleich der ganzen Welt teilen.

#art

**eris** @eris@universeodon.com · May 29, 2024

May 29, 2024

eris @eris@universeodon.com

happy glassy trees

#StainedGlass #Trees #Blending #Colors #Abstract #Forest #Multicolored #IntricatePatterns #OrganicShapes #Img2Img #AiArt #AiArtists #StableDiffusion #AiArtCommunity

hardcopies: https://aieris.art/featured/happy-glassy-trees-eris-and-ai.html

Abstract stained glass style forest, with leaves of harmonious colors blending together to hide or become the sky.

Replied in thread

**Ana Tudor** @anatudor@mastodon.social · May 27, 2024

May 27, 2024

Ana Tudor @anatudor@mastodon.social

688 Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) https://codepen.io/thebabydino/pen/NWxBzRv

A variation on the pure CSS halftone technique https://mastodon.social/@anatudor/112401133442879091

19 cards, each with a different kind of pattern.

#halftone #pattern #gradient

Continued thread

**Ana Tudor** @anatudor@mastodon.social · May 15, 2024

May 15, 2024

Ana Tudor @anatudor@mastodon.social

There's also the option of duotone images... and by the way, the palette can be animated (even if leaving the palette animation to randomness makes the result look more like monochrome at times).

Anyway, here's the demo on @codepen https://codepen.io/thebabydino/pen/RwdjEBW