Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨

k_grajeda's profile picture

Kevin Grajeda

4,946 subscribers

29,161 Aufrufe • vor 1 Jahr •via X (Twitter)

KunstWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏 (now with improved timing ✨)
0:16

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏 (now with improved timing ✨)

jhey ʕ•ᴥ•ʔ

94,093 Aufrufe • vor 2 Jahren

this effect can be achieved using only css by combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hovered
0:10

this effect can be achieved using only css by combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hovered

daniel petho

18,843 Aufrufe • vor 2 Monaten

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.
0:10

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.

Stammy

72,584 Aufrufe • vor 1 Jahr

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.
0:12

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

Soren

426,005 Aufrufe • vor 11 Monaten

The triangle🔺 is the most popular shape and I still see old and obsolete methods to create it. ⚠️STOP DOING THIS⚠️ 👉 A collection of CSS-only triangles made with a single-element and modern CSS. With the border-only and rounded corners variations.
0:16

The triangle🔺 is the most popular shape and I still see old and obsolete methods to create it. ⚠️STOP DOING THIS⚠️ 👉 A collection of CSS-only triangles made with a single-element and modern CSS. With the border-only and rounded corners variations.

CSS by T. Afif

14,689 Aufrufe • vor 2 Jahren

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!
0:18

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!

jhey ʕ•ᴥ•ʔ

103,816 Aufrufe • vor 6 Monaten

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.
0:16

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.

Roma Komarov (inactive)

138,374 Aufrufe • vor 3 Jahren

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇
0:15

Future CSS Tip! 🔮 Create that cool gallery effect with the scroll-driven animations API 😎 ul, img { animation-timeline: scroll(root); 👈 animation: spin; } ul { --r: 270deg; } img { --r: -270deg; } keyframes spin { to { rotate: var(--r); }} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,247 Aufrufe • vor 3 Jahren

Adding the new hud stuff to target smash, pretty new to html+css but happy with this menu so far
0:11

Adding the new hud stuff to target smash, pretty new to html+css but happy with this menu so far

Lillykyu

14,692 Aufrufe • vor 10 Tagen

A creative coding club student asked me about this curved wipe effect. Is it possible with just CSS? I did a super-quick prototype with GSAP and MorphSVG 🚀 How would you do it?💎 engagement reward 👀
0:13

A creative coding club student asked me about this curved wipe effect. Is it possible with just CSS? I did a super-quick prototype with GSAP and MorphSVG 🚀 How would you do it?💎 engagement reward 👀

Carl 💥 Creative Coding Club

29,726 Aufrufe • vor 11 Monaten

How to create a Simple Sushi 🍣 Restaurant Landing Page. I’ll provide you with the HTML, CSS, and JavaScript code snippets to build it step by step.
0:13

How to create a Simple Sushi 🍣 Restaurant Landing Page. I’ll provide you with the HTML, CSS, and JavaScript code snippets to build it step by step.

Dhanian 🗯️

46,880 Aufrufe • vor 2 Jahren

With AI raising the floor I now have these little signals/tests for quality bar at companies - e.g. in the marketing site, did they create html/css mini prototypes people can use/explore vs. static images. The Fed10 site is a great example of this...
0:15

With AI raising the floor I now have these little signals/tests for quality bar at companies - e.g. in the marketing site, did they create html/css mini prototypes people can use/explore vs. static images. The Fed10 site is a great example of this...

Ben Blumenrose

24,183 Aufrufe • vor 5 Monaten

Thank you so much for the love!! 💖 Here's another dance animations I made! This was actually the first dance animations I ever animated🙆‍♂️ #live2d #vtubers
0:19

Thank you so much for the love!! 💖 Here's another dance animations I made! This was actually the first dance animations I ever animated🙆‍♂️ #live2d #vtubers

KH😼Live2D ALT

115,955 Aufrufe • vor 1 Monat

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
0:15

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 Aufrufe • vor 11 Monaten

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 Aufrufe • vor 4 Monaten

I really like 3D modeling detailed metallic accessories for my Vtuber clients! 😼 This shiny effect was made by using a hand painted matcap blended with the texture. With this, you can achieve a dynamic, camera based metallic effect.
0:10

I really like 3D modeling detailed metallic accessories for my Vtuber clients! 😼 This shiny effect was made by using a hand painted matcap blended with the texture. With this, you can achieve a dynamic, camera based metallic effect.

Nekochi 3D (bragok)

37,209 Aufrufe • vor 1 Jahr

#myphai I dunno this just came to mind so i made it ANIMATIONS MADE BY KITSUBEE (me), RENDERED WITH BLENDER. DRAWINGS / ASSETS BELONG TO THEIR ORIGINAL CREATORS! Assets belong to Hoyoverse/ Mken
0:15

Sensitive content

#myphai I dunno this just came to mind so i made it ANIMATIONS MADE BY KITSUBEE (me), RENDERED WITH BLENDER. DRAWINGS / ASSETS BELONG TO THEIR ORIGINAL CREATORS! Assets belong to Hoyoverse/ Mken

loaf 🇵🇸🇸🇩🇨🇩

230,266 Aufrufe • vor 9 Monaten

How i build with Claude👇 Three.js = 360 rotatable product zero plugin needed WebGL PointLight = UVC glow reacts to scroll position CSS scroll-snap = buttery infinite horizontal product scroll GSAP ScrollTrigger = product pins while copy scrolls alongside Lottie via lottie-web = After Effects animations play in browser Save this
0:10

How i build with Claude👇 Three.js = 360 rotatable product zero plugin needed WebGL PointLight = UVC glow reacts to scroll position CSS scroll-snap = buttery infinite horizontal product scroll GSAP ScrollTrigger = product pins while copy scrolls alongside Lottie via lottie-web = After Effects animations play in browser Save this

FHILY👑

168,621 Aufrufe • vor 3 Monaten

pov: you have ZERO experience with Shopify and starting a clothing brand, but u know how to code... I used Shopify's custom code editor w/ Cursor to create this drop page for my NEW clothing brand - only HTML + CSS launching my clothing brand soon lfggg 👀
0:10

pov: you have ZERO experience with Shopify and starting a clothing brand, but u know how to code... I used Shopify's custom code editor w/ Cursor to create this drop page for my NEW clothing brand - only HTML + CSS launching my clothing brand soon lfggg 👀

Rexan Wong

11,744 Aufrufe • vor 1 Jahr