How to create micro-interactions with CSS variables
Want to interact with some parent instance and modify the children? CSS variables are the answer. In this video, you'll learn how to create micro-interactions so when you hover over a link, the child icon SVG changes colors, the background color changes, and an arrow appears.
**As a prerequisite, it would be helpful to watch CSS Variables 101 first: • CSS Variables 101
Here are the high-level steps to accomplish this pattern:
Take note of the various properties you want to change such as color and background color.
Create a variable on the parent for each style property such as --child-color and --child-bg. Leave the values empty for now.
Add the variables to the various children's style inputs, such as setting background to --child-bg (no style changes will happen yet because the variables don't have values).
Go back to the parent, where the variables are defined, and give them values for the default state.
Switch to the other state, such as hover, and change the variables' values.
Interact with the parent and see the child change!
Docs for CSS variables: https://docs.webstudio.is/university/...
Build unlimited sites with Webstudio for FREE 👉 https://wstd.us/future-web
Watch video How to create micro-interactions with CSS variables online without registration, duration hours minute second in high quality. This video was added by user Webstudio 15 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 816 once and liked it 44 people.