Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Exploring Webflow's Beta Custom CSS with native blobs

jpthedio's profile picture

JP Dionisio

1,146 subscribers

11,456 Aufrufe • vor 2 Jahren •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von JP Dionisio
JP Dionisiovor 2 Jahren

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!

Profilbild von JP Dionisio
JP Dionisiovor 2 Jahren

Feel free to clone and mix it up!

Profilbild von Safari Web Extensions
Safari Web Extensionsvor 1 Jahr

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

Profilbild von Irina Zaman 🏄‍♀️
Irina Zaman 🏄‍♀️vor 2 Jahren

This is fantastic! Thank you!

Profilbild von JP Dionisio
JP Dionisiovor 2 Jahren

You're welcome, Irina!

Profilbild von Riziki | Webflow design+dev
Riziki | Webflow design+devvor 2 Jahren

Such clever use of filters 😙🤌

Profilbild von JP Dionisio
JP Dionisiovor 2 Jahren

Thanks, Riziki! ✨

Profilbild von Dave Latta
Dave Lattavor 2 Jahren

Wow this is pretty cool.

Profilbild von JP Dionisio
JP Dionisiovor 2 Jahren

For sure. Thanks, Dave!

Profilbild von Aonnoy Sengupta | Product Designer & WWX Developer
Aonnoy Sengupta | Product Designer & WWX Developervor 2 Jahren

Please make a tut on this JP

Profilbild von JP Dionisio
JP Dionisiovor 2 Jahren

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

Ähnliche Videos

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

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

Software Mansion

246,019 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 11 Monaten

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

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

jhey ʕ•ᴥ•ʔ

214,653 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

42,712 Aufrufe • vor 1 Jahr

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.
0:20

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

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

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

nishan (o^▽^o)

68,412 Aufrufe • vor 6 Monaten

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

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

jhey ʕ•ᴥ•ʔ

64,278 Aufrufe • vor 1 Jahr

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.
0:21

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 Aufrufe • vor 1 Jahr

🤌 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
0:53

🤌 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 Aufrufe • vor 1 Jahr

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
0:33

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 Aufrufe • vor 1 Jahr

😎👋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
0:26

😎👋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 Aufrufe • vor 3 Jahren

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
0:23

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 Aufrufe • vor 3 Monaten

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
1:00

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 Aufrufe • vor 3 Monaten

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 💀
0:25

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 Aufrufe • vor 1 Jahr

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
7:09

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 Aufrufe • vor 1 Jahr

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.
1:15

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 Aufrufe • vor 3 Monaten

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. ▶️
0:34

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 Aufrufe • vor 10 Monaten

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

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

Ashu

31,861 Aufrufe • vor 2 Jahren

✨ 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 👇
0:35

✨ 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 Aufrufe • vor 1 Jahr