Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Exploring Webflow's Beta Custom CSS with native blobs

jpthedio's profile picture

JP Dionisio

1,146 subscribers

11,456 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

JP Dionisio profil fotoğrafı
JP Dionisio2 yıl önce

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 profil fotoğrafı
JP Dionisio2 yıl önce

Feel free to clone and mix it up!

Safari Web Extensions profil fotoğrafı
Safari Web Extensions1 yıl önce

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

Irina Zaman 🏄‍♀️ profil fotoğrafı
Irina Zaman 🏄‍♀️2 yıl önce

This is fantastic! Thank you!

JP Dionisio profil fotoğrafı
JP Dionisio2 yıl önce

You're welcome, Irina!

Riziki | Webflow design+dev profil fotoğrafı
Riziki | Webflow design+dev2 yıl önce

Such clever use of filters 😙🤌

JP Dionisio profil fotoğrafı
JP Dionisio2 yıl önce

Thanks, Riziki! ✨

Dave Latta profil fotoğrafı
Dave Latta2 yıl önce

Wow this is pretty cool.

JP Dionisio profil fotoğrafı
JP Dionisio2 yıl önce

For sure. Thanks, Dave!

Aonnoy Sengupta | Product Designer & WWX Developer profil fotoğrafı
Aonnoy Sengupta | Product Designer & WWX Developer2 yıl önce

Please make a tut on this JP

JP Dionisio profil fotoğrafı
JP Dionisio2 yıl önce

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

Benzer Videolar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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