Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

🤌 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 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji Eğitim

Anya Rossi• Live Now

Private livecam show

11 Yorum

Patrick the LLM Engineer profil fotoğrafı

Patrick the LLM Engineer1 yıl önce

Do you mind sharing a CodePen?

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

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

Alex Casillas —アレックス profil fotoğrafı

Alex Casillas —アレックス1 yıl önce

Beautiful 😍

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

🤙🤙

Chris Sev profil fotoğrafı

Chris Sev1 yıl önce

amazing

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

Gotta love blurry blobs 😎

John Champ profil fotoğrafı

John Champ1 yıl önce

Extra clean, super beautiful! 😍👏

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

Thanks ✌️

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

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) 🤔

Matan Borenkraout 🥬 profil fotoğrafı

Matan Borenkraout 🥬1 yıl önce

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

Simon Vrachliotis profil fotoğrafı

Simon Vrachliotis1 yıl önce

Very nice!

Benzer Videolar

🤌 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 görüntüleme • 1 yıl önce

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,969 görüntüleme • 3 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 7 ay önce

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,749 görüntüleme • 1 yıl önce

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,961 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

⚡️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 görüntüleme • 3 ay önce

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,463 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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,830 görüntüleme • 2 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 3 yıl önce