Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

css mix-blend-mode + svg filters + mess w/ contrast, etc. love stuff like this when it comes up 🙏

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,387 subscribers

14,210 Aufrufe • vor 1 Monat •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Love riffin' on stuff like this 🤙 – 1 element – 2 CSS background-images – 1 background-blend-mode – 1 filter – < 10 lines of JavaScript Magic! 🪄
0:20

Love riffin' on stuff like this 🤙 – 1 element – 2 CSS background-images – 1 background-blend-mode – 1 filter – < 10 lines of JavaScript Magic! 🪄

jhey ʕ•ᴥ•ʔ

93,311 Aufrufe • vor 2 Jahren

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!
3:17

This CSS Backlight Effect is sooooo damn cool! I've taken it a step further with SVG Filters Makes it work with any element - including video!

Wes Bos

232,041 Aufrufe • vor 1 Jahr

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡
0:24

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

jhey ʕ•ᴥ•ʔ

213,841 Aufrufe • vor 10 Monaten

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇
0:36

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,830 Aufrufe • vor 2 Jahren

image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙
0:25

image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙

jhey ʕ•ᴥ•ʔ

108,894 Aufrufe • vor 1 Jahr

Kitchen Mess tore it up with this #ForTheLoveOfFriday live mix!
1:00

Kitchen Mess tore it up with this #ForTheLoveOfFriday live mix!

Y

23,078 Aufrufe • vor 11 Monaten

I love it when stuff like this happens in the wild
0:24

I love it when stuff like this happens in the wild

MAGA Cult Slayer🦅🇺🇸

282,124 Aufrufe • vor 3 Monaten

On being excited when stuff like this comes out
1:23

On being excited when stuff like this comes out

Ante D. Luvian

212,708 Aufrufe • vor 6 Monaten

#tinyCSStip You may have seen some of my demos using this on CodePen.IO already. 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
0:20

#tinyCSStip You may have seen some of my demos using this on CodePen.IO already. 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

Ana Tudor 🐯 (find me on Bluesky/ Mastodon)

27,203 Aufrufe • vor 2 Jahren

i love when gay people treat memes like dress up because then we get stuff like this
0:23

i love when gay people treat memes like dress up because then we get stuff like this

❒

145,487 Aufrufe • vor 8 Monaten

Reality is funnier than satire when it comes to the modern far left. Can’t make this stuff up.
1:09

Reality is funnier than satire when it comes to the modern far left. Can’t make this stuff up.

Vivek Ramaswamy

78,810 Aufrufe • vor 3 Monaten

Nailed it - terfs are not very clever when it comes to this stuff
1:34

Nailed it - terfs are not very clever when it comes to this stuff

Daniel Lismore

15,935 Aufrufe • vor 4 Monaten

Sometimes I forget Mingi is a 'T' (thinking) type when it comes to MBTI until he talks about stuff like this:
2:23

Sometimes I forget Mingi is a 'T' (thinking) type when it comes to MBTI until he talks about stuff like this:

𝐄𝐕𝐈𝐄 ฅᗢฅ 🤍

14,236 Aufrufe • vor 6 Monaten

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇
1:23

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#​goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 Aufrufe • vor 2 Jahren

"We don't know what domestic terrorism looks like when it comes to charging individuals. It's really easy to do so when it comes to foreign terrorist organizations... but when it comes to holding up the mirror... it's quite difficult" - Dr. Donell Harvin w/ Nicolle Wallace
2:40

"We don't know what domestic terrorism looks like when it comes to charging individuals. It's really easy to do so when it comes to foreign terrorist organizations... but when it comes to holding up the mirror... it's quite difficult" - Dr. Donell Harvin w/ Nicolle Wallace

Deadline White House

28,971 Aufrufe • vor 3 Jahren

THIS IS ABSOLUTE CINEMA 🔥 Never mess with Pradeep bhai when it comes to facts
1:34

THIS IS ABSOLUTE CINEMA 🔥 Never mess with Pradeep bhai when it comes to facts

desi mojito

24,008 Aufrufe • vor 9 Monaten

"I'm a huge nerd when it comes to stuff like that" 😅 Taylor Fritz 🤝 Renaissance Faire
0:49

"I'm a huge nerd when it comes to stuff like that" 😅 Taylor Fritz 🤝 Renaissance Faire

BBC Sport

55,221 Aufrufe • vor 2 Monaten

I don't like it when fire comes out like this 👀
0:29

I don't like it when fire comes out like this 👀

😈 Xavier ✞

42,918 Aufrufe • vor 4 Monaten