A native CSS panel for your Webflow projects 🚀 Seamlessly recognizes your CSS classes and variables so you can embrace more (:advanced) and !important CSS 🎨
Joined August 2023
- Tweets78
- Following194
- Followers110
- Likes110
Pinned Tweet
🚀 Exciting news 🚀
You can now get LIFETIME ACCESS to Zest for Webflow with a one-time purchase of $59.99!
😮💨 No more embeds for custom CSS
🤓 Recognises your CSS classes and variables
🔓Unlock :advanced(CSS)
Sign up for a FREE 7-day trial: buy.stripe.com/fZe9BQ8LqbZpc…
#Webflow
Zest for Webflow - Custom CSS extension retweeted
Writing custom CSS in #webflow should be easier. It's why we launched Zest. No more code embeds or global CSS components on every page, just one simple panel, accessible via the sidebar, to manage all of your custom CSS.
Sign up for a FREE 7-day trial: tinyurl.com/3jzrx2zv
Zest for Webflow - Custom CSS extension retweeted
Unsure how a custom CSS panel could help you with your #webflow projects - have you heard of clamp()?
🧵 (I know you love a thread.. yes YOU!)
Excellent examples of advanced CSS here from @Prathkum - look forward to trying these out in Webflow!
Writing custom CSS in #webflow should be easier. It's why we launched Zest. No more code embeds or global CSS components on every page, just one simple panel, accessible via the sidebar, to manage all of your custom CSS.
Sign up for a FREE 7-day trial: tinyurl.com/3jzrx2zv
How cool is this from @DavorEgyed !? We are definitely adding RTLflow to our CSS checklist with localization on its way to Webflow.
Work chat - I am loving @zestforwebflow
Can’t tell you how tedious this would’ve been to manage without custom CSS in the Webflow UI - lovely bit of business!
Unsure how a custom CSS panel could help you with your #webflow projects - have you heard of clamp()?
🧵 (I know you love a thread.. yes YOU!)
🙌 With our browser extension, you can harness the full power of clamp() and other advanced CSS functions.
Here’s an example of us combining CSS variables with clamp() to create a responsive font-size:
💫 With Zest for Webflow, your custom CSS is always there in the UI. No need to search for embedded code or go back-and-forth to the site settings.
More info: getzest.io
Sign up for a FREE 7-day trial: tinyurl.com/3jzrx2zv
Download the extension: tinyurl.com/bddr2kdc
Oh we do love a good <footer> 🤩
We just went live with @footrdesign on Product Hunt!
I'm a web designer and realized a footer inspiration site didn't exist. We built this to curate and share the best footers around.
If you dig what we're doing, show your support!
producthunt.com/posts/footer
Love this SVG importer from @timdaffx - go check it out 🚀
Hellooo #webflow friends! SVG Import extension went live today 🥳🚀
This is my first app for the @webflow community, with more ideas on the way 😊
You can get it here: webflow.com/apps/detail/svg-…
Would love to hear how you find it.
A great example of the power of CSS from @jh3yy - you can easily implement this CSS in your #webflow projects with our extension.
More info: getzest.io/
Sign up for a FREE 7-day trial: tinyurl.com/3jzrx2zv
Download the extension: tinyurl.com/bddr2kdc
CSS Tip! 🤙
You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥
article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}
How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️
ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}
This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏
This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it.
1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️
2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶
3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨
That's it!
@CodePen link below! 👇