ๆญฃๅœจๅŠ ่ฝฝ่ง†้ข‘...

่ง†้ข‘ๅŠ ่ฝฝๅคฑ่ดฅ

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

15,497 ๆฌก่ง‚็œ‹ โ€ข 1 ๅนดๅ‰ โ€ขvia X (Twitter)

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!

็›ธๅ…ณ่ง†้ข‘

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:

Faheem Ullah

106,943 ๆฌก่ง‚็œ‹ โ€ข 6 ไธชๆœˆๅ‰

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 ๅนดๅ‰