emaechlerWie verwendet man CSS Variablen (CSS & HTML & Javascript - Anleitung / Tutorial]
PeerTube
Ana Tudor ๐ฏ#CSS gotcha: if you set a list of gradient stops on an element:
.a { --l: var(--c0), var(--c1) }
... and expect to be able to get *a different gradient* if you just modify --c0 & --c1 on its .b children... I have bad news.๐พ
You need to set:
.a, .b { --l: var(--c0), var(--c1) }
Live demo on @codepen
https://codepen.io/thebabydino/pen/rNEpbJK?editors=1100
Particularly annoying when that gradient is used on tens of various children. ๐ฟ
#cssVariable #gotcha #cssGotcha #code #coding #fronten #web #webDev #dev #webDevelopment
#tinyCSStip What if you need to set `color` to the inverted value of a CSS variable? You can't invert the whole element because the rest of it shouldn't be inverted. And you can't use the Sass `invert()` on a CSS var.
Here's how! ๐
(see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors for more details)
#css #cssVariable #code #coding #rgb #frontend #web #webDev #webDevelopment #dev
Using relative colors - CSS | MDN
The CSS colors module defines relative color syntax, which allows a CSS <color> value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors โ such as lighter, darker, saturated, semi-transparent, or inverted variants โ enabling more effective color palette creation.
1โฃ1โฃ Pure CSS 1 div animated ๐ โ logo
https://codepen.io/thebabydino/pen/zRZKxK
Also has a video of me live coding it.
#CodePen #geometry #maths #CSS #noJS #transform #code #coding #web #webDev #dev #frontend #webDevelopment #cssGradient #cssVariable
Inautilo#Development #Techniques
Add superpowers to your CSS variables ยท โWeโre on the verge of yet another CSS revolution.โ https://ilo.im/15y7gy
_____
#Browser #ProgressiveEnhancement #WebDev #Frontend #CSS #MediaQuery #StyleQuery #CustomProperty #CssVariable
#Development #Techniques
CSS-based state management ยท The power and versatility of CSS custom properties https://ilo.im/15xiam
_____
#WebDev #Frontend #CSS #JavaScript #CustomProperty #CssVariable #StyleQuery