正在加载视频...

视频加载失败

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

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually... enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.show more

Webstudio

9,850 subscribers

15,496 次观看 • 1 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 条评论

Webstudio 的头像

Webstudio1 年前

Learn more about CSS Variables

Webstudio 的头像

Webstudio1 年前

Learn about creating micro-interactions with CSS Variables

Open Props 的头像

Open Props1 年前

Rad work!

Webstudio 的头像

Webstudio1 年前

🙏

Andrey Vinitsky 的头像

Andrey Vinitsky1 年前

🚀

Alex K 的头像

Alex K1 年前

Nice feature addition! Keep developing 👍

Ricardo Ferreira 的头像

Ricardo Ferreira1 年前

Another great update, just have asked this a few weeks ago and it comes with extra cream and cherry on top

Benjamin Preiss 的头像

Benjamin Preiss1 年前

Great job! Are these compatible with webflow variables? I.e. can I use the relume components from @UntitledUI?

Jakob Sturm 的头像

Jakob Sturm1 年前

Huge news!

相关视频

Sharing a great tool here: The Genome Color Tool Is allows you to generate a colour palettes based on your brand, and then import those into Figma as styles You can then combine this with another plugin to spin variables up and save a tonne of time ⏰

luis.

22,029 次观看 • 3 年前

I made this tool 4 years ago for helping with customer support emails. Instead of typing, it allows you to compose an email by dragging from predefined blocks with variables. So you only write your blocks once, and then you only combine them with drag and drop into an email. You can also save a set of email blocks as a template. When you choose that template, it lets you fill the variables of the template like a form, and then send it. We only use it internally and now with all the gpt stuff going on it seems pointless to release it. or is it? 🤔

I made this tool 4 years ago for helping with customer support emails. Instead of typing, it allows you to compose an email by dragging from predefined blocks with variables. So you only write your blocks once, and then you only combine them with drag and drop into an email. You can also save a set of email blocks as a template. When you choose that template, it lets you fill the variables of the template like a form, and then send it. We only use it internally and now with all the gpt stuff going on it seems pointless to release it. or is it? 🤔

kitze the 🐐

72,424 次观看 • 3 年前

Say hello to the latest game-changer in Supa Palette 4.0 for @Figma! Fully customizable popular color systems you can save as variables or styles. Save hours—just a few clicks and you're all set! ⚡

Say hello to the latest game-changer in Supa Palette 4.0 for @Figma! Fully customizable popular color systems you can save as variables or styles. Save hours—just a few clicks and you're all set! ⚡

Angelo Libero

29,291 次观看 • 1 年前

We partnered with Anthropic so you can use the Webflow connector directly in Claude 🙌🏽 Instead of stopping at ideas or recommendations, Claude can now take real action in Webflow. Here are some of the things you can do with Claude + Webflow: - Bulk update CMS content across collections - Run SEO, content, and usability audits (and apply the fixes) - Clean up design systems with consistent variables, classes, and naming 👉 Learn more:

We partnered with Anthropic so you can use the Webflow connector directly in Claude 🙌🏽 Instead of stopping at ideas or recommendations, Claude can now take real action in Webflow. Here are some of the things you can do with Claude + Webflow: - Bulk update CMS content across collections - Run SEO, content, and usability audits (and apply the fixes) - Clean up design systems with consistent variables, classes, and naming 👉 Learn more:

Webflow

38,743 次观看 • 5 个月前

PhD Students – How to identify a research gap in seconds? Use this FREE tool to identify research gap in seconds. 1. Go to 2. Click on 𝑇𝑜𝑝𝑖𝑐 𝐸𝑥𝑝𝑙𝑜𝑟𝑒𝑟 ---> 𝐶𝑟𝑒𝑎𝑡𝑖𝑣𝑒 𝑇𝑜𝑜𝑙 3. Enter your topic e.g., deep learning for healthcare 4. Now click on 𝑔𝑒𝑛𝑒𝑟𝑎𝑡𝑒 𝑖𝑑𝑒𝑎𝑠 5. ResearchCollab will give you the following 7 gaps ➝ Research that combines multiple existing research ➝ Research that adapts a new approach/technology ➝ Research that modifies existing variables in research ➝ Research that incorporates new variables ➝ Research that eliminates variables from research ➝ Research that re-arrange existing variables Pick the gap you think has the most potential. Then click on 𝑡𝑜𝑝𝑖𝑐 𝑎𝑛𝑎𝑙𝑦𝑠𝑖𝑠 𝐑𝐞𝐬𝐞𝐚𝐫𝐜𝐡𝐂𝐨𝐥𝐥𝐚𝐛 will dive deeper into the selected topic It gives you different angles of the chosen research gap. It is very helpful and at the same time very easy to use Try 𝐑𝐞𝐬𝐞𝐚𝐫𝐜𝐡𝐂𝐨𝐥𝐥𝐚𝐛 today:

PhD Students – How to identify a research gap in seconds? Use this FREE tool to identify research gap in seconds. 1. Go to 2. Click on 𝑇𝑜𝑝𝑖𝑐 𝐸𝑥𝑝𝑙𝑜𝑟𝑒𝑟 ---> 𝐶𝑟𝑒𝑎𝑡𝑖𝑣𝑒 𝑇𝑜𝑜𝑙 3. Enter your topic e.g., deep learning for healthcare 4. Now click on 𝑔𝑒𝑛𝑒𝑟𝑎𝑡𝑒 𝑖𝑑𝑒𝑎𝑠 5. ResearchCollab will give you the following 7 gaps ➝ Research that combines multiple existing research ➝ Research that adapts a new approach/technology ➝ Research that modifies existing variables in research ➝ Research that incorporates new variables ➝ Research that eliminates variables from research ➝ Research that re-arrange existing variables Pick the gap you think has the most potential. Then click on 𝑡𝑜𝑝𝑖𝑐 𝑎𝑛𝑎𝑙𝑦𝑠𝑖𝑠 𝐑𝐞𝐬𝐞𝐚𝐫𝐜𝐡𝐂𝐨𝐥𝐥𝐚𝐛 will dive deeper into the selected topic It gives you different angles of the chosen research gap. It is very helpful and at the same time very easy to use Try 𝐑𝐞𝐬𝐞𝐚𝐫𝐜𝐡𝐂𝐨𝐥𝐥𝐚𝐛 today:

Faheem Ullah

106,224 次观看 • 4 个月前

Excited to share Kigen Design System Figma plugin✨ Over the years, I’ve helped lots of brands build their DS - mostly doing the same variables and styles repeatedly for start. I thought, why not automate this? So, for the past few months, I’ve been building, testing, and improving it. Right now, it generates colors, typography styles, sizes, radii, and more. Plus, there’s an option to present everything for documentation. Give it a try and let me know what you think! ....

Excited to share Kigen Design System Figma plugin✨ Over the years, I’ve helped lots of brands build their DS - mostly doing the same variables and styles repeatedly for start. I thought, why not automate this? So, for the past few months, I’ve been building, testing, and improving it. Right now, it generates colors, typography styles, sizes, radii, and more. Plus, there’s an option to present everything for documentation. Give it a try and let me know what you think! ....

vijay verma

66,347 次观看 • 1 年前

Here is a quick walkthrough of everything new in Stitch: 🎨 The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS … light mode!) 🧠 A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. 🎙️ You can vibe design with your voice (in Preview). Stitch can ‘see’ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. ⚡️ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. 📐 DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video👇 Details for each major improvement 🧵

Here is a quick walkthrough of everything new in Stitch: 🎨 The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS … light mode!) 🧠 A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. 🎙️ You can vibe design with your voice (in Preview). Stitch can ‘see’ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. ⚡️ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. 📐 DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video👇 Details for each major improvement 🧵

Stitch by Google

487,548 次观看 • 4 个月前

Ever wanted to try out the Kitty Customizer feature by itself? Well now you can, and for FREE on Steam! Make some unique, fun skins for your Kitty, save them, and send them to your friends. 🐈‍⬛✨If you so desire, you can explore the city in your new skin with a full purchase of the game! In the customizer, you can edit KItty’s colors, use patterns, and place different marking shapes to achieve the look you desire. ✨Unsure where to start? We have a great ‘how-to’ series on Youtube!

Ever wanted to try out the Kitty Customizer feature by itself? Well now you can, and for FREE on Steam! Make some unique, fun skins for your Kitty, save them, and send them to your friends. 🐈‍⬛✨If you so desire, you can explore the city in your new skin with a full purchase of the game! In the customizer, you can edit KItty’s colors, use patterns, and place different marking shapes to achieve the look you desire. ✨Unsure where to start? We have a great ‘how-to’ series on Youtube!

Little Kitty, Big City 🐈‍⬛🏙️ OUT NOW!!

31,974 次观看 • 2 个月前

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,739 次观看 • 2 年前

Is the Universe Actually a Hologram? “Is everything we see in 3D space, 4D spacetime, actually projected from a 2D surface like a hologram? I would say, in some sense, yeah, by definition. But how physical is it? If you can describe things the same way, you might as well use whatever definition is useful. I don’t always take it too literally in the sense of, like, we are in the celestial sphere. It’s more like, can I convert everything to variables on that celestial sphere, and does that help me organize scattering computations?”

Is the Universe Actually a Hologram? “Is everything we see in 3D space, 4D spacetime, actually projected from a 2D surface like a hologram? I would say, in some sense, yeah, by definition. But how physical is it? If you can describe things the same way, you might as well use whatever definition is useful. I don’t always take it too literally in the sense of, like, we are in the celestial sphere. It’s more like, can I convert everything to variables on that celestial sphere, and does that help me organize scattering computations?”

Shawn Ryan

66,352 次观看 • 1 个月前

This CSS trick is fascinating ⭐️ By setting: [type=range] { overflow: hidden; } You can create a view timeline on the handle: ::-webkit-slider-thumb { view-timeline: --thumb inline; } And then you can use that to build all sorts of custom range sliders 🚀

This CSS trick is fascinating ⭐️ By setting: [type=range] { overflow: hidden; } You can create a view timeline on the handle: ::-webkit-slider-thumb { view-timeline: --thumb inline; } And then you can use that to build all sorts of custom range sliders 🚀

jhey ʕ•ᴥ•ʔ

94,024 次观看 • 2 年前

Imagine an AI application that can type anywhere you can and use the full context of what's on your screen. This is the application we all deserve (at least if you have macOS.) Check out Omnipilot. It's an app that works with every other macOS application and uses Claude Sonet 3.5 in the background—it also supports Gemini and GPT-4o. Here is the idea: You can use the tool to ask questions about anything on your screen. Or you can use it to autocomplete the text you are typing. You don't need to copy and paste anymore or waste your time providing context to a model. It sees what you see. It works right where you are. That's pretty cool. Here are a couple of cool examples: • Use it to reply to an email • Use it in the terminal to autocomplete a command • Use it to finish a document • Use to send a message on Slack AI at the system level is bonkers. You can read a ton more on their Product Hunt launch page: Thanks to the Omnipilot team for collaborating with me on this post!

Imagine an AI application that can type anywhere you can and use the full context of what's on your screen. This is the application we all deserve (at least if you have macOS.) Check out Omnipilot. It's an app that works with every other macOS application and uses Claude Sonet 3.5 in the background—it also supports Gemini and GPT-4o. Here is the idea: You can use the tool to ask questions about anything on your screen. Or you can use it to autocomplete the text you are typing. You don't need to copy and paste anymore or waste your time providing context to a model. It sees what you see. It works right where you are. That's pretty cool. Here are a couple of cool examples: • Use it to reply to an email • Use it in the terminal to autocomplete a command • Use it to finish a document • Use to send a message on Slack AI at the system level is bonkers. You can read a ton more on their Product Hunt launch page: Thanks to the Omnipilot team for collaborating with me on this post!

Santiago

72,306 次观看 • 2 年前

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

CSS Tip! ⭐️ You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️ h1 { background: linear-gradient(white, white), grey; background-size: 100% calc(var(--lines) * 1lh), 100% 100%; background-clip: text; color: transparent; } Here you emphasize the first two lines of the heading with white using a sized background-image layer It has a size of 2lh ✨ Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎 Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙 Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥 Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶 Have a play with it and see what you can come up with! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

413,657 次观看 • 2 年前

I made the worlds best Clipboard for your AI Agents Its called Bluey and its a dumb pointer which you can use to give 10x better context to your agent And you can point at your screen, talk to it, and it will generate a really good annotated screenshot which you can now give to your AI Agent You can use it while designing your website You can use it while explaining something on your screen. And it understands you and you can be really vague about things like "move this" , modify the color "here" and it will understand what you are pointing at. Im loving using it and I built it for myself as I was tired of clicking screenshots all the time and attaching it to my codex or claude code sessions Now I can just point, speak or type and drag and drop it anywhere I am giving free access to it in the comments and I would love for you to try it out. Join the discord and I am sharing the download link there. By the way everything stays 100 percent local. No screenshots are shared anywhere!

I made the worlds best Clipboard for your AI Agents Its called Bluey and its a dumb pointer which you can use to give 10x better context to your agent And you can point at your screen, talk to it, and it will generate a really good annotated screenshot which you can now give to your AI Agent You can use it while designing your website You can use it while explaining something on your screen. And it understands you and you can be really vague about things like "move this" , modify the color "here" and it will understand what you are pointing at. Im loving using it and I built it for myself as I was tired of clicking screenshots all the time and attaching it to my codex or claude code sessions Now I can just point, speak or type and drag and drop it anywhere I am giving free access to it in the comments and I would love for you to try it out. Join the discord and I am sharing the download link there. By the way everything stays 100 percent local. No screenshots are shared anywhere!

Milind S

11,917 次观看 • 1 个月前

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

Addy Osmani

36,911 次观看 • 1 年前

you can now share canvases in cursor! also, you can use design mode to make sniper edits in your canvases. very in flow with the speed of composer 2.5 here's a paperclipmaxxing canvas i just built and shared using slack mcp

you can now share canvases in cursor! also, you can use design mode to make sniper edits in your canvases. very in flow with the speed of composer 2.5 here's a paperclipmaxxing canvas i just built and shared using slack mcp

eric zakariasson

37,279 次观看 • 1 个月前

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.IO link below! 👇

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.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,349 次观看 • 2 年前

You can now create a REAL-TIME chatbot with any voice and customize its personality. Steps: 1. Go to ElevenLabs 2. Click on voices 3. you can type in a name for the voice 4. then you can drag in an audio file to use for your voice 5. then go to the agents tab in side panel 6. and create a new agent 7. the voice 8. Create system instructions 9. Optional (Upload knowledge docs) 10. Test This can be easily implemented into your applications. I'll make a tutorial on that soon.

You can now create a REAL-TIME chatbot with any voice and customize its personality. Steps: 1. Go to ElevenLabs 2. Click on voices 3. you can type in a name for the voice 4. then you can drag in an audio file to use for your voice 5. then go to the agents tab in side panel 6. and create a new agent 7. the voice 8. Create system instructions 9. Optional (Upload knowledge docs) 10. Test This can be easily implemented into your applications. I'll make a tutorial on that soon.

Riley Brown

40,108 次观看 • 1 年前