正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Exploring Webflow's Beta Custom CSS with native blobs

JP Dionisio

1,146 subscribers

11,456 次观看 • 2 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 条评论

JP Dionisio 的头像

JP Dionisio2 年前

Instead of an SVG we can use native div blocks. Need a bit of layout gymnastics though. And having a transparent background doesn't seem possible right now. You'd need a full color like the solid black background here. Let me know if you have a solution!

JP Dionisio 的头像

JP Dionisio2 年前

Feel free to clone and mix it up!

Safari Web Extensions 的头像

Safari Web Extensions1 年前

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

Irina Zaman 🏄‍♀️ 的头像

Irina Zaman 🏄‍♀️2 年前

This is fantastic! Thank you!

JP Dionisio 的头像

JP Dionisio2 年前

You're welcome, Irina!

Riziki | Webflow design+dev 的头像

Riziki | Webflow design+dev2 年前

Such clever use of filters 😙🤌

JP Dionisio 的头像

JP Dionisio2 年前

Thanks, Riziki! ✨

Dave Latta 的头像

Dave Latta2 年前

Wow this is pretty cool.

JP Dionisio 的头像

JP Dionisio2 年前

For sure. Thanks, Dave!

Aonnoy Sengupta | Product Designer & WWX Developer 的头像

Aonnoy Sengupta | Product Designer & WWX Developer2 年前

Please make a tut on this JP

JP Dionisio 的头像

JP Dionisio2 年前

Thanks, Aonnoy! I'll try to do a quick one. :)

相关视频

Announcing React Native Reanimated 4 🐎 Long-awaited CSS Animations and Transitions support is here Available now in Beta Read more 👇

Announcing React Native Reanimated 4 🐎 Long-awaited CSS Animations and Transitions support is here Available now in Beta Read more 👇

Software Mansion

246,019 次观看 • 1 年前

React Native Reanimated 4 is now stable and ready for production 🐎 Featuring CSS Animations & Transitions, multithreading with React Native Worklets and more.

React Native Reanimated 4 is now stable and ready for production 🐎 Featuring CSS Animations & Transitions, multithreading with React Native Worklets and more.

Software Mansion

112,818 次观看 • 11 个月前

custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }

custom <select> with CSS 🧑‍🍳 select { &, &::picker(select) { appearance: base-select; } }

jhey ʕ•ᴥ•ʔ

214,653 次观看 • 1 年前

breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨

breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨

jhey ʕ•ᴥ•ʔ

42,712 次观看 • 1 年前

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.

You can do blobs with CSS filter but it only works as black or white as far as I know but you can use SVGs to achieve the result you want.

matia 🇭🇷

290,664 次观看 • 2 年前

Here is a patch to test CSS grid in React native.

Here is a patch to test CSS grid in React native.

nishan (o^▽^o)

68,412 次观看 • 6 个月前

it's all about easing curves ⏱️ translation powered via CSS custom properties

it's all about easing curves ⏱️ translation powered via CSS custom properties

jhey ʕ•ᴥ•ʔ

64,278 次观看 • 1 年前

The new version of React Native Bottom Tabs is out! 🎉 A new highly anticipated feature: Custom JavaScript Tabs! ✨ Provide your custom tab bar while leveraging native navigation underneath 🚀 Here is a demo of it in the 🦋 app! This demonstrates smooth screen transitions using native animations along with their custom tab bar.

The new version of React Native Bottom Tabs is out! 🎉 A new highly anticipated feature: Custom JavaScript Tabs! ✨ Provide your custom tab bar while leveraging native navigation underneath 🚀 Here is a demo of it in the 🦋 app! This demonstrates smooth screen transitions using native animations along with their custom tab bar.

Oskar

35,725 次观看 • 1 年前

🤌 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

🤌 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

23,445 次观看 • 1 年前

Having a fun Saturday morning playing with Tailwind CSS v4 Beta 😊 Here are a few cool new things you can do: 🪄 CSS only modals 🎨 Starting style variants 🪟 Perspective transforms

Having a fun Saturday morning playing with Tailwind CSS v4 Beta 😊 Here are a few cool new things you can do: 🪄 CSS only modals 🎨 Starting style variants 🪟 Perspective transforms

Tony Lea

52,132 次观看 • 1 年前

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,364 次观看 • 3 年前

The CSS Custom Highlight API lets you highlight search results — Without affecting the DOM structure. ::highlight(search-results) { background-color: #ff0066; color: white; } #CSS #WebAPIs

The CSS Custom Highlight API lets you highlight search results — Without affecting the DOM structure. ::highlight(search-results) { background-color: #ff0066; color: white; } #CSS #WebAPIs

Bharat Kara

44,405 次观看 • 3 个月前

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Chrome for Developers

219,689 次观看 • 3 个月前

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

jhey ʕ•ᴥ•ʔ

196,528 次观看 • 1 年前

Introducing Zeego 2: dropdown & context menus that work everywhere → Pure Radix UI on Web → react-native-web dependency dropped → Works with Tailwind, shadcn UI, pure CSS, etc. → Native menu on iOS & Android → Works in web-only codebases with zero config yarn add zeego

Introducing Zeego 2: dropdown & context menus that work everywhere → Pure Radix UI on Web → react-native-web dependency dropped → Works with Tailwind, shadcn UI, pure CSS, etc. → Native menu on iOS & Android → Works in web-only codebases with zero config yarn add zeego

Fernando Rojo

46,219 次观看 • 1 年前

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.

HeroUI

533,795 次观看 • 3 个月前

What's the latest with React Native? Reanimated 4 brings a more declarative, CSS-style approach to animations and transitions. ✨ We break down what you can do with this new API. ▶️

What's the latest with React Native? Reanimated 4 brings a more declarative, CSS-style approach to animations and transitions. ✨ We break down what you can do with this new API. ▶️

GitHub

28,617 次观看 • 10 个月前

How to Implement a custom Accordion in react-native? using reanimated

How to Implement a custom Accordion in react-native? using reanimated

Ashu

31,861 次观看 • 2 年前

✨ Introducing Apple Music on React Native! UI with a custom modal view, built with expo, react-native-reanimated, and gesture-handler. Took me about two days, but still needs a few fixes. Link to the GitHub project below 👇

✨ Introducing Apple Music on React Native! UI with a custom modal view, built with expo, react-native-reanimated, and gesture-handler. Took me about two days, but still needs a few fixes. Link to the GitHub project below 👇

Saúl

81,826 次观看 • 1 年前