Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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!

wesbos's profile picture

Wes Bos

438,116 subscribers

232,041 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

Code for this (and all tips) in the hot tips repo:

Ana Tudor 🐯🖤🌻 profil fotoğrafı
Ana Tudor 🐯🖤🌻1 yıl önce

No need for the result attribute or for the in attributes of the first two primitives. Or for the operator attribute of the last primitive. I'd also use feBlend instead. Here's a text example from last year And an img one + grain

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

Ahh because the order! Thanks and great examples

Matt Pocock profil fotoğrafı
Matt Pocock1 yıl önce

On fire with these recently

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

🚒🚒🚒 thanks, Matt!

Artur Bień profil fotoğrafı
Artur Bień1 yıl önce

@sulco One step further with SVG filters and you’ll get Ambilight effect where only the bright colors are visible and dark ones are removed ✨

James @ Outseta profil fotoğrafı
James @ Outseta1 yıl önce

Holy crap.

Carl 💥 Creative Coding Club profil fotoğrafı
Carl 💥 Creative Coding Club1 yıl önce

great job. this is going to be everywhere!

Muhammad Muhsin profil fotoğrafı
Muhammad Muhsin1 yıl önce

Added this nifty effect to my homepage:

Marc Grabanski profil fotoğrafı
Marc Grabanski1 yıl önce

Wes cranking out hits 🤌

Benzer Videolar

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!
0:27

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,591 görüntüleme • 1 yıl önce

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below
0:38

electric border effect based on a design by Oleg Kulik ⚡️ pulled it off without shaders, only CSS and some animated SVG filters. the trickiest part was getting feTurbulence to animate smoothly. CodePen link below

balint

1,579,103 görüntüleme • 1 yıl önce

🖱 Scrub through a CSS @‍keyframe with an element's scroll position. What do you think of this effect? Is it OK when very subtle?
1:53

🖱 Scrub through a CSS @‍keyframe with an element's scroll position. What do you think of this effect? Is it OK when very subtle?

Wes Bos

44,261 görüntüleme • 1 yıl önce

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇
0:36

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

jhey ʕ•ᴥ•ʔ

160,641 görüntüleme • 3 yıl önce

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself
6:51

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

Wes Bos

222,832 görüntüleme • 2 yıl önce

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨
2:19

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

Simon Vrachliotis

127,870 görüntüleme • 3 yıl önce

I'll also take it a step further and say it shows that BW are capable of having flourishing relationships with HANDSOME men of VALUE who appreciate them. This makes them EXTREMELY BITTER
1:28

Sensitive content

I'll also take it a step further and say it shows that BW are capable of having flourishing relationships with HANDSOME men of VALUE who appreciate them. This makes them EXTREMELY BITTER

Bl💓ck Barbies

76,922 görüntüleme • 9 ay önce

This new AI model for anime is insane! It stylizes any video in minutes with high quality. Step-by-step tutorial right here 🧵👇
0:41

This new AI model for anime is insane! It stylizes any video in minutes with high quality. Step-by-step tutorial right here 🧵👇

TechHalla

41,339 görüntüleme • 1 yıl önce

I saw this cool pixel zoom effect, so i made it with Fractal Noise #aftereffects
0:53

I saw this cool pixel zoom effect, so i made it with Fractal Noise #aftereffects

Seter

28,198 görüntüleme • 1 yıl önce

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,851 görüntüleme • 3 yıl önce

damn, when i see videos and edits like this, it makes all the hard work worth it! full video in comments!
0:40

damn, when i see videos and edits like this, it makes all the hard work worth it! full video in comments!

Agelvik | Wishlist TUMBLEBEE

13,036 görüntüleme • 1 ay önce

Don't believe I've seen this video of Barbora Krejcikova meeting with her legendary Chinese fan, probably missed it but I'm posting anyway cuz this is too cool 😂
0:44

Don't believe I've seen this video of Barbora Krejcikova meeting with her legendary Chinese fan, probably missed it but I'm posting anyway cuz this is too cool 😂

til polarity's end 🎾⚡#SpallettiEra⚡⚫⚪

54,814 görüntüleme • 11 ay önce

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!
0:23

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

jhey ʕ•ᴥ•ʔ

72,045 görüntüleme • 8 ay önce

Throwing in some Adele along with some "it is what it is" to cool down after a work day because why not!
0:32

Throwing in some Adele along with some "it is what it is" to cool down after a work day because why not!

Pushpak Saroop

33,673 görüntüleme • 1 yıl önce

The Bulawayo Cooling towers looked sooooo cool the other day. It was a beautiful collaboration with the clouds!🙃 Seraphic!
0:46

The Bulawayo Cooling towers looked sooooo cool the other day. It was a beautiful collaboration with the clouds!🙃 Seraphic!

Vuyo Brown

11,934 görüntüleme • 7 ay önce

Take any Python code and build a dynamic GUI on top of it by dragging and dropping components. Python is already the most popular language in the world. This makes it even better! The attached video is only 45 seconds. It will show you how it works. Here is the important part: You can now build an interface for your Python code without learning HTML, JavaScript, or CSS. Go to this link to try this: Remember to work smarter, not harder! Thanks to the team behind Taipy for partnering with me on this post.
0:45

Take any Python code and build a dynamic GUI on top of it by dragging and dropping components. Python is already the most popular language in the world. This makes it even better! The attached video is only 45 seconds. It will show you how it works. Here is the important part: You can now build an interface for your Python code without learning HTML, JavaScript, or CSS. Go to this link to try this: Remember to work smarter, not harder! Thanks to the team behind Taipy for partnering with me on this post.

Santiago

155,254 görüntüleme • 2 yıl önce

Slept on Runway feature that actually changes how you work specially with New Seedance 2. Extract any frame from a clip and extend it further. Everything stays consistent. No drift. No chaos. This is the kind of control AI video needed.
0:29

Slept on Runway feature that actually changes how you work specially with New Seedance 2. Extract any frame from a clip and extend it further. Everything stays consistent. No drift. No chaos. This is the kind of control AI video needed.

madpencil_

18,543 görüntüleme • 4 ay önce

Try it with your partner! This is cool.
0:25

Try it with your partner! This is cool.

Damsons

114,476 görüntüleme • 1 ay önce

You Use Ballistic Tactical Wrong note: I haven't posted any coaching content lately because I've been swamped with coaching my team plus work. Also, I don't want to give our competition any sauce. This video is a small thing and character specific, so it isn't a big deal.
2:58

You Use Ballistic Tactical Wrong note: I haven't posted any coaching content lately because I've been swamped with coaching my team plus work. Also, I don't want to give our competition any sauce. This video is a small thing and character specific, so it isn't a big deal.

Balvarine+

89,886 görüntüleme • 1 yıl önce