Some complex interactions that can be achieved with just CSS
Nowadays, a variety of front-end framework is prevalent in the era, simply completing some of the interface features have become more and more convenient.
However, too much use of these frameworks without more research to think about the specific implementation of such frameworks, just will not be able to quickly improve their ability, on the contrary, with more sometimes will obscure their vision, unable to complete their knowledge system upgrade.
Today, I’m going to talk about CSS can do some functional interaction, these functions may be the first time you thought of before may be to use JS, and I do not know if the powerful CSS can also be completed, I hope that through my sharing can increase your knowledge of vision.
A single content area with multiple panels, each associated with a header in a list.
- Only one radio group with the same name property can be selected at a time to simulate panel switching.
- Use radio with the focusable property to simulate a click event.
- Use CSS derived selector, combined with a z-index hierarchy to complete the content of the visible and hidden switch.
- Use the checkbox multi-selection property to simulate simultaneous event focus.
- Use a checkbox with focusable property to simulate a click event.
- Use CSS derived selector to transform the height of the content to complete the face collapse effect.
Open content in an interactive overlay.
- Position the element by a tag aiming point, href and id are consistent, simulate the click.
- Position the modal element by the : target selector, toggle the display and hide.
- Position the element through the tag aiming point, href and id are consistent, simulating a click
- Position the element through the :target selector to display a larger image
Customizable, themeable tooltips, replacing native tooltips.
- Use the HTML custom attribute data-attr to store the hint content
- Use attr(data-attr) to get the hint content and use hover to display the text hint
- Set the background of the Body element to gradient
- Cover the body with a white background mask layer to reveal a little bit of the top to show the progress
After reading the above examples, I hope you now have a deeper understanding of the power of CSS. Please share some of your CSS special useful tips in the comments, so we can learn together.
Build composable web applications
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favourite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and speed up, scale, and standardize development as a team. Try composable frontends with a Design System or Micro Frontends, or explore the composable backend with serverside components.
- How We Build Micro Frontends
- How we Build a Component Design System
- How to build a composable blog
- Meet Component-Driven Content: Applicable, Composable