Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

🤌 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 просмотров • 1 год назад •via X (Twitter)

Наука и технологии Образование

Anya Rossi• Live Now

Private livecam show

Комментарии: 11

Фото профиля Patrick the LLM Engineer

Patrick the LLM Engineer1 год назад

Do you mind sharing a CodePen?

Фото профиля Simon Vrachliotis

Simon Vrachliotis1 год назад

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

Фото профиля Alex Casillas —アレックス

Alex Casillas —アレックス1 год назад

Beautiful 😍

Фото профиля Simon Vrachliotis

Simon Vrachliotis1 год назад

🤙🤙

Фото профиля Chris Sev

Chris Sev1 год назад

amazing

Фото профиля Simon Vrachliotis

Simon Vrachliotis1 год назад

Gotta love blurry blobs 😎

Фото профиля John Champ

John Champ1 год назад

Extra clean, super beautiful! 😍👏

Фото профиля Simon Vrachliotis

Simon Vrachliotis1 год назад

Thanks ✌️

Фото профиля jhey ▲🐻🎈

jhey ▲🐻🎈1 год назад

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 🥬

Matan Borenkraout 🥬1 год назад

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

Фото профиля Simon Vrachliotis

Simon Vrachliotis1 год назад

Very nice!

Похожие видео

🤌 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 просмотров • 1 год назад

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 просмотров • 3 лет назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 3 лет назад

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 просмотров • 3 лет назад

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 просмотров • 6 месяцев назад

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 просмотров • 7 месяцев назад

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,790 просмотров • 1 год назад

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 просмотров • 1 год назад

⚡️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 просмотров • 3 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 6 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 4 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад