正在加载视频...

视频加载失败

返回首页

Lil progress update ✨ (Scan lines are an animating pseudoelement with mix-blend-mode 🤙)

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

148,127 subscribers

41,934 次观看 • 2 年前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 条评论

Mike-麥-Mai-v1.618 的头像
Mike-麥-Mai-v1.6182 年前

I am amazed that it captured all the text rather than spitting out gibberish.

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈2 年前

Right?! Did well with this one 🙌

William 的头像
William2 年前

can i try it yet?

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈2 年前

Very close 🤏 Get your AI keys ready 😅 I want to open source the code so want that to be in good shape so people can use it for other things. There are React components for the different input types which can be handy in AI apps in general 🤙

Marc Backes 的头像
Marc Backes2 年前

I can’t wait to see what cool reveal animation you will do at the end 👀

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈2 年前

Been thinking about some kind of stepped grid reveal like blocks dropping 😅

Aaron 的头像
Aaron2 年前

Uuuh I am loving this! When can we try it?

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈2 年前

Will do my best to get something out this week 🙏 Jus' need to tidy up the UI and deploy it 🤙

Amy Dutton 的头像
Amy Dutton2 年前

😍 Brilliant

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈2 年前

It's getting there 🙌

相关视频

reminder: you can use css mix-blend-mode to create knockout text ↓ 🧑‍🍳 .sticker { background: #000; color: #​fff; mix-blend-mode: multiply; }
0:25

reminder: you can use css mix-blend-mode to create knockout text ↓ 🧑‍🍳 .sticker { background: #000; color: #​fff; mix-blend-mode: multiply; }

jhey ʕ•ᴥ•ʔ

54,790 次观看 • 15 天前

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 次观看 • 2 年前

the trick: CSS position: sticky + mix-blend-mode: difference the bonus trick: add an extra layer and chain the blend to block content out 👨‍🍳
0:24

the trick: CSS position: sticky + mix-blend-mode: difference the bonus trick: add an extra layer and chain the blend to block content out 👨‍🍳

jhey ʕ•ᴥ•ʔ

160,153 次观看 • 1 年前

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 次观看 • 1 年前

А lil' physique update🤙
0:32

А lil' physique update🤙

Nataliya Kuznetsova

92,225 次观看 • 2 年前

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 次观看 • 2 年前

Page templates are *here* — plus a preview of page building mode. 👀 Now you can speed up static page creation by templatizing pages you build often, plus an update on progress towards page building mode. Learn more in the update post:
0:58

Page templates are *here* — plus a preview of page building mode. 👀 Now you can speed up static page creation by templatizing pages you build often, plus an update on progress towards page building mode. Learn more in the update post:

Webflow

33,811 次观看 • 2 年前

breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨
0:24

breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨

jhey ʕ•ᴥ•ʔ

42,712 次观看 • 1 年前

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

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

jhey ʕ•ᴥ•ʔ

14,210 次观看 • 2 个月前

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)
0:48

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

437,855 次观看 • 2 年前

🚨UPDATE UPDATE UPDATE. The ladies are getting bored because of cliche pickup lines …so guys update your pick up lines with this J-Cole masterpiece 😎😎
1:10

🚨UPDATE UPDATE UPDATE. The ladies are getting bored because of cliche pickup lines …so guys update your pick up lines with this J-Cole masterpiece 😎😎

BIGMINDSET⚔️

13,746 次观看 • 4 个月前

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target​.style.setProperty('--x', x - bounds.left) target​.style.setProperty('--y', y - bounds​.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @​supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇
0:27

CSS Tip! ⭐️ You can use mix-blend-mode with scoped custom properties to create this inverted :hover effect 🤙 button > span { left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); mix-blend-mode: difference; 👈 } The cool trick is that using mix-blend-mode acts like a color inverter which works well with monochromatic controls 😍 Saves defining the :hover colors, etc. It works it out for you! As for how to move that spot around? A teeny bit of JavaScript 🤏 const UPDATE = ({target, x, y }) => { const bounds = target.getBoundingClientRect() target​.style.setProperty('--x', x - bounds.left) target​.style.setProperty('--y', y - bounds​.top) } const BTNS = document.querySelectorAll('button') BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE)) On :hover you can use a scoped custom property to change the size of the spot button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } But, what about the bouncy easy? You can use linear() where supported to create a bouncy transition ✨ @​supports (transition-timing-function: linear(0, 1)) { button:is(:hover, :focus-visible) span { transition-duration: 0.5s; transition-timing-function: linear( 0, 0.5007 7.21%, 0.7803 12.29%, ... ); } } That's it! Thanks for the challenge Alohe 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

153,005 次观看 • 2 年前

My Pony Models are getting a lil visual update 🩵 ✨
0:43

My Pony Models are getting a lil visual update 🩵 ✨

Ninny 🌻 Pony Vtuber

43,300 次观看 • 4 个月前

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇
0:32

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇

jhey ʕ•ᴥ•ʔ

84,080 次观看 • 1 年前

PNGTube Remix Model for @/ASHA_EXE 🔶✨ loved animating the lil screen belt !!! 🥺
0:27

PNGTube Remix Model for @/ASHA_EXE 🔶✨ loved animating the lil screen belt !!! 🥺

Tori 🧶🐾

78,045 次观看 • 1 年前

more subtle forms in disguise 🤖 (now with holo scan mode)
0:23

more subtle forms in disguise 🤖 (now with holo scan mode)

jhey ʕ•ᴥ•ʔ

15,528 次观看 • 24 天前

Cubism Editor update✨ 5.3.00 is now released! Long-awaited features are finally here! 📢Watch intro video!📢 New Features: ・Blend mode ・Offscreen drawing ・Brush Tool Enhancements ・Warp Deformer Resize Support ・Added option to reverse Rotation Deformer position ・Added WebM to Video output settings. ■ Download ■ Introducing Ver 5.3 Features ■ Update History #Live2D
1:56

Cubism Editor update✨ 5.3.00 is now released! Long-awaited features are finally here! 📢Watch intro video!📢 New Features: ・Blend mode ・Offscreen drawing ・Brush Tool Enhancements ・Warp Deformer Resize Support ・Added option to reverse Rotation Deformer position ・Added WebM to Video output settings. ■ Download ■ Introducing Ver 5.3 Features ■ Update History #Live2D

Live2D

176,632 次观看 • 9 个月前

Blend into the snowy landscape with this week’s store update! ❄️
0:21

Blend into the snowy landscape with this week’s store update! ❄️

THE FINALS

23,251 次观看 • 9 个月前

Learning how to backfly (kinda)… slow and steady progress 🤙🤙
0:56

Learning how to backfly (kinda)… slow and steady progress 🤙🤙

Chef Donny

164,738 次观看 • 1 年前