Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

Simon Vrachliotis

25,301 subscribers

23,445 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie Bildung

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Patrick the LLM Engineer

Patrick the LLM Engineervor 1 Jahr

Do you mind sharing a CodePen?

Profilbild von Simon Vrachliotis

Simon Vrachliotisvor 1 Jahr

I should do that yeah! I'll make some time to add a Tailwind Play for each clip.

Profilbild von Alex Casillas —アレックス

Alex Casillas —アレックスvor 1 Jahr

Beautiful 😍

Profilbild von Simon Vrachliotis

Simon Vrachliotisvor 1 Jahr

🤙🤙

Profilbild von Chris Sev

Chris Sevvor 1 Jahr

amazing

Profilbild von Simon Vrachliotis

Simon Vrachliotisvor 1 Jahr

Gotta love blurry blobs 😎

Profilbild von John Champ

John Champvor 1 Jahr

Extra clean, super beautiful! 😍👏

Profilbild von Simon Vrachliotis

Simon Vrachliotisvor 1 Jahr

Thanks ✌️

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 1 Jahr

Love seeing different approaches with Tailwind 👏 For me, I'd likely hoist some of those classes onto the parent to target the children blobs. And then I'd inline some custom properties on them to handle delay and translate across 2 reusable keyframes (x, y) 🤔

Profilbild von Matan Borenkraout 🥬

Matan Borenkraout 🥬vor 1 Jahr

Thanks for this one, I re-did the shadow of the main image on my personal site with your help :)

Profilbild von Simon Vrachliotis

Simon Vrachliotisvor 1 Jahr

Very nice!

Ähnliche Videos

🤌 Glassmorphism with Tailwind CSS 1️⃣ set a semi-transparent background 2️⃣ use `backdrop-filter: blur` 3️⃣ play with the bg opacity, blur level, border and shadow ✨

🤌 Glassmorphism with Tailwind CSS 1️⃣ set a semi-transparent background 2️⃣ use `backdrop-filter: blur` 3️⃣ play with the bg opacity, blur level, border and shadow ✨

Simon Vrachliotis

12,802 Aufrufe • vor 1 Jahr

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

shadcn

531,753 Aufrufe • vor 3 Jahren

I have been exploring a good workflow for animations like these and one thing I have been using Blend Shapes a lot! Because of the simpler cutting and needing to adjust the mesh a lot, Blend Shapes have been super handy for managing everything!

I have been exploring a good workflow for animations like these and one thing I have been using Blend Shapes a lot! Because of the simpler cutting and needing to adjust the mesh a lot, Blend Shapes have been super handy for managing everything!

Bila 🐧✨

16,759 Aufrufe • vor 2 Jahren

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 👇

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 ʕ•ᴥ•ʔ

83,703 Aufrufe • vor 11 Monaten

WILD HEARTS Almanac | Gather Your Allies To invite friends to #PlayWildHearts: 1️⃣ Create a session at a campfire 2️⃣ Add party tags (including custom tags) 3️⃣ OPTIONAL: Add search target for friends, or add a password 4️⃣ Let your friends find you, and enjoy the hunt! 🏹

WILD HEARTS Almanac | Gather Your Allies To invite friends to #PlayWildHearts: 1️⃣ Create a session at a campfire 2️⃣ Add party tags (including custom tags) 3️⃣ OPTIONAL: Add search target for friends, or add a password 4️⃣ Let your friends find you, and enjoy the hunt! 🏹

WILD HEARTS S

51,221 Aufrufe • vor 3 Jahren

You can decorate photos and video in the redesigned media editor – with auto-smoothing lines and dynamic brush widths. New tools let you blur, add shapes and apply text with different backgrounds and fonts – and all users can add custom emoji for extra flair. #TelegramTips

You can decorate photos and video in the redesigned media editor – with auto-smoothing lines and dynamic brush widths. New tools let you blur, add shapes and apply text with different backgrounds and fonts – and all users can add custom emoji for extra flair. #TelegramTips

Telegram Messenger

81,919 Aufrufe • vor 3 Jahren

he'll be my lab rat for this tutorial...for this you need to understand the basic shapes of what exactly do you lining, otherwise it'll be plain. then i copy the layer, set the blur opacity to 6.0 and lower the transparency to 50%. you add some grad maps if you like

he'll be my lab rat for this tutorial...for this you need to understand the basic shapes of what exactly do you lining, otherwise it'll be plain. then i copy the layer, set the blur opacity to 6.0 and lower the transparency to 50%. you add some grad maps if you like

Rina228🇸🇪🩸🌱ᛉ cmms closed

64,933 Aufrufe • vor 6 Monaten

Witness some of the stump flying deliveries - a treat to watch. 🤯 1️⃣ Lasith Malinga 2️⃣ Umesh Yadav 3️⃣ Bhuvneshwar Kumar 4️⃣ Mohammed Shami 5️⃣ Lasith Malinga

Witness some of the stump flying deliveries - a treat to watch. 🤯 1️⃣ Lasith Malinga 2️⃣ Umesh Yadav 3️⃣ Bhuvneshwar Kumar 4️⃣ Mohammed Shami 5️⃣ Lasith Malinga

Kshitij

225,105 Aufrufe • vor 6 Monaten

Introducing Marketplace Connect for OBS. Use and share advanced OBS scene collections in just a few clicks. 1️⃣ Get the plugin 2️⃣ Pick your setup 3️⃣ Install assets 4️⃣ Start streaming Learn more:

Introducing Marketplace Connect for OBS. Use and share advanced OBS scene collections in just a few clicks. 1️⃣ Get the plugin 2️⃣ Pick your setup 3️⃣ Install assets 4️⃣ Start streaming Learn more:

Elgato

363,743 Aufrufe • vor 1 Jahr

I pasted the Three.js code from the previous 3D scene in Grok 4 from xAI and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇

I pasted the Three.js code from the previous 3D scene in Grok 4 from xAI and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇

Techartist

3,103,803 Aufrufe • vor 1 Jahr

⚡️Affinity finally has a Blend Tool — and more. My version of the Blend Tool produces much cleaner vector shapes than Illustrator and gives consistent, high-quality results even with complex forms. With the new Claude integration, you can build your own tools in Affinity via scripting and vibe coding. I’ve already made a few that significantly improve my workflow. Might release it later — after some more testing.

⚡️Affinity finally has a Blend Tool — and more. My version of the Blend Tool produces much cleaner vector shapes than Illustrator and gives consistent, high-quality results even with complex forms. With the new Claude integration, you can build your own tools in Affinity via scripting and vibe coding. I’ve already made a few that significantly improve my workflow. Might release it later — after some more testing.

Constantine

28,748 Aufrufe • vor 2 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! 👇

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

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Matthias Martin

13,307 Aufrufe • vor 1 Jahr

Picture Word Inductive Model (PWIM) does wonders for Newcomers 🙌🏽🤩 The process of their English acquisition. 1️⃣ analyze the image 2️⃣ create a list of what you see 3️⃣ form sentences using the list of words 4️⃣ discuss what’s happening in the image 5️⃣ unscramble sentences

Picture Word Inductive Model (PWIM) does wonders for Newcomers 🙌🏽🤩 The process of their English acquisition. 1️⃣ analyze the image 2️⃣ create a list of what you see 3️⃣ form sentences using the list of words 4️⃣ discuss what’s happening in the image 5️⃣ unscramble sentences

Emily Fɾαɳƈιʂ

17,457 Aufrufe • vor 2 Jahren

Neat #Maya add-on BlendShape Monitor 1.0 helps troubleshoot complex character rigs by displaying the influence of individual shapes as color-coded heatmaps in the viewport Works for facial and full-body rigs #characterrigging #animation #VFX #gamedev

Neat #Maya add-on BlendShape Monitor 1.0 helps troubleshoot complex character rigs by displaying the influence of individual shapes as color-coded heatmaps in the viewport Works for facial and full-body rigs #characterrigging #animation #VFX #gamedev

CG Channel

11,100 Aufrufe • vor 5 Monaten

This was the first sequence I animated for Dreamworks #Dogman Officer Knight and Greg the dog were secondary characters and had very limited rigs. But using lots of shot sculpting I made it through with some of the more pushed shapes / poses I was aiming for. #animation

This was the first sequence I animated for Dreamworks #Dogman Officer Knight and Greg the dog were secondary characters and had very limited rigs. But using lots of shot sculpting I made it through with some of the more pushed shapes / poses I was aiming for. #animation

Chester Sampson

12,049 Aufrufe • vor 1 Jahr

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! 👇

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,795 Aufrufe • vor 2 Jahren

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎

jhey ʕ•ᴥ•ʔ

93,589 Aufrufe • vor 2 Jahren

Benefits of Merging the Rail Budget with the Union Budget 1️⃣ Assured adequate funding for projects 2️⃣ Year-round project approvals & new services 3️⃣ Greater transparency

Benefits of Merging the Rail Budget with the Union Budget 1️⃣ Assured adequate funding for projects 2️⃣ Year-round project approvals & new services 3️⃣ Greater transparency

Ashwini Vaishnaw

27,036 Aufrufe • vor 4 Monaten

6 Shot Series 1️⃣ Floater 2️⃣ Pull Up 3️⃣ Catch & Shoot 4️⃣ Repeat The Other Direction Shoot each shot until you make it. Go through 2-3x. Player with the least amount of attempts wins.

6 Shot Series 1️⃣ Floater 2️⃣ Pull Up 3️⃣ Catch & Shoot 4️⃣ Repeat The Other Direction Shoot each shot until you make it. Go through 2-3x. Player with the least amount of attempts wins.

Reid Ouse

100,617 Aufrufe • vor 3 Jahren