正在加载视频...

视频加载失败

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

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,834 subscribers

15,497 次观看 • 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!

相关视频

With unnamed variables, you don’t have to name a variable you don't plan to use. You can write _ instead. Nothing goes into scope, so nobody can read it later. Works on locals, catch parameters, lambda parameters, and patterns. Not fields. codebysophy shares the details. Learn more here:

With unnamed variables, you don’t have to name a variable you don't plan to use. You can write _ instead. Nothing goes into scope, so nobody can read it later. Works on locals, catch parameters, lambda parameters, and patterns. Not fields. codebysophy shares the details. Learn more here:

Java

14,976 次观看 • 19 天前

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 次观看 • 2 年前

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,838 次观看 • 7 个月前

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

14,172 次观看 • 28 天前

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,943 次观看 • 6 个月前

We just launched a generative craft system inside Marble App. Kids can now create anything and turn it into a 3D object on their map. It's designed to be realistic, so kids have to use their brain to make things happen. It works like this: 1) You describe or sketch what you want to build 2) Marble creates a blueprint you can iterate on 3) You pick the resources and tools you think you need to make it (if you have them) 4) Marble crafts the object. If the build is successful and you can drop it on your map! Since you can create your own tools, there is no limit to what you can build with this system. So excited to see what kids make with it!

We just launched a generative craft system inside Marble App. Kids can now create anything and turn it into a 3D object on their map. It's designed to be realistic, so kids have to use their brain to make things happen. It works like this: 1) You describe or sketch what you want to build 2) Marble creates a blueprint you can iterate on 3) You pick the resources and tools you think you need to make it (if you have them) 4) Marble crafts the object. If the build is successful and you can drop it on your map! Since you can create your own tools, there is no limit to what you can build with this system. So excited to see what kids make with it!

Lionel Mora

22,203 次观看 • 1 个月前

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,483 次观看 • 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

489,220 次观看 • 6 个月前

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!!

32,208 次观看 • 4 个月前

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,873 次观看 • 3 个月前

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,847 次观看 • 2 年前

🧸 i think the design is extremely cute, it gives you a very sophisticated and cute vibe…glasses that can give you a stylish vibe, you know? 🧸 the lenses are slightly big so i heard that it makes your face looks smaller, doesn’t my face look really small right now? 🐿️🐧 i think it’s true 🙂‍↕️ 🐧 the design isn’t excessive so you can naturally use it as a fashion item and not just at home, you can also use it while going out for little things like going to convenience stores by your house to subtly look fashionable 🐿️ the crapt glasses have 16 different styles and there’s such a huge variety that you can even pick the color based on your taste so the design is definitely cute and they don’t differ by face type so i think they’re glasses that look good on anybody 🐧 that’s true 👍 🐿️ so i hope you guys find the crapt glasses that perfectly suit you

🧸 i think the design is extremely cute, it gives you a very sophisticated and cute vibe…glasses that can give you a stylish vibe, you know? 🧸 the lenses are slightly big so i heard that it makes your face looks smaller, doesn’t my face look really small right now? 🐿️🐧 i think it’s true 🙂‍↕️ 🐧 the design isn’t excessive so you can naturally use it as a fashion item and not just at home, you can also use it while going out for little things like going to convenience stores by your house to subtly look fashionable 🐿️ the crapt glasses have 16 different styles and there’s such a huge variety that you can even pick the color based on your taste so the design is definitely cute and they don’t differ by face type so i think they’re glasses that look good on anybody 🐧 that’s true 👍 🐿️ so i hope you guys find the crapt glasses that perfectly suit you

💬

40,448 次观看 • 9 天前

It takes 5 minutes to create a world-class web research agent that runs 24/7 and returns structured search results. 1. You can limit the sources it's allowed to use 2. You can specify the goals it needs to complete 3. You can design the format structure of the results 4. You can configure how much computing power it will use I show you how to set up a Web Search Agent in the video. A few benefits here: 1. This is great for complex research tasks 2. It's really easy to add this like a LEGO piece to a more complex workflow 3. Create an agent once, and reuse it with different inputs 4. The agent adapts to your use case as you work with it By the way, Nimble published a whole library of templates and research agents you can reuse and modify. You can start sending queries to one of these existing agents, and it will begin to adapt to Go here to try it out: Thanks to the Nimble team for partnering with me on this post.

It takes 5 minutes to create a world-class web research agent that runs 24/7 and returns structured search results. 1. You can limit the sources it's allowed to use 2. You can specify the goals it needs to complete 3. You can design the format structure of the results 4. You can configure how much computing power it will use I show you how to set up a Web Search Agent in the video. A few benefits here: 1. This is great for complex research tasks 2. It's really easy to add this like a LEGO piece to a more complex workflow 3. Create an agent once, and reuse it with different inputs 4. The agent adapts to your use case as you work with it By the way, Nimble published a whole library of templates and research agents you can reuse and modify. You can start sending queries to one of these existing agents, and it will begin to adapt to Go here to try it out: Thanks to the Nimble team for partnering with me on this post.

Santiago

21,079 次观看 • 1 个月前

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 年前

✨ Finally built a timeline for now I always wanted to make my site a bit more social, because I had profiles and trip overlaps and you could kinda see where other people went, but not something like this So on this new page you can see people near you, where everyone's traveling too, etc. There's the [ For you ] tab and [ Following ], like on X. So you can see people you follow, or just everyone I hope I can improve it more so the site will result in more serendipitous connections, especially now that's it's free Also nice you can see where people will be in the future so you can plan trips to places where other members are, or if you're in the FOR YOU tab, where your friends are Let me know any ideas you have and things I should build and I'll do it, I want to make it the biggest and most fun to use nomad/travel site in the world! (Please tell your friends about that it's free, so you can use it as a social friends travel tracker kinda thing)

✨ Finally built a timeline for now I always wanted to make my site a bit more social, because I had profiles and trip overlaps and you could kinda see where other people went, but not something like this So on this new page you can see people near you, where everyone's traveling too, etc. There's the [ For you ] tab and [ Following ], like on X. So you can see people you follow, or just everyone I hope I can improve it more so the site will result in more serendipitous connections, especially now that's it's free Also nice you can see where people will be in the future so you can plan trips to places where other members are, or if you're in the FOR YOU tab, where your friends are Let me know any ideas you have and things I should build and I'll do it, I want to make it the biggest and most fun to use nomad/travel site in the world! (Please tell your friends about that it's free, so you can use it as a social friends travel tracker kinda thing)

@levelsio

53,286 次观看 • 4 天前

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,745 次观看 • 2 年前