css demo's
Demo 1 - Dark-light mode
Dark light mode makes it so the colors change automatically depending on if the user is in dark or light mode with their browser so the website will also be in dark mode when the user is using dark mode.
Demo 2 - @property
The @property CSS at-rule is used to explicitly define CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.
Demo 3 - CSS Animations
CSS animations allows HTML elements to be animated with css without the use of javascript
Demo 4 - CSS Layers
The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.
Demo 5 - Variable Fonts
Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
Demo 6 - Pseudo-classes
A CSS pseudo-class is a keyword added to a selector that lets you select elements based on information that lies outside of the document tree, such as a specific state of the selected element(s). For example, the pseudo-class :hover can be used to style a button when a user's pointer hovers over it.