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

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

На главную

Exploring Webflow's Beta Custom CSS with native blobs

jpthedio's profile picture

JP Dionisio

1,146 subscribers

11,456 просмотров • 2 лет назад •via X (Twitter)

LIVE

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

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

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

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

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

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

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