Introduction

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.

Let’s begin.

1. Tabs

A single content area with multiple panels, each associated with a header in a list.

Key points

1. Only one radio group with the same name property can be selected at a time to simulate panel switching.
2. Use radio with the focusable property to simulate a click event.
3. Use CSS derived selector, combined with a z-index hierarchy to complete the content of the visible and hidden switch.

2. Collapse

Key points

1. Use the checkbox multi-selection property to simulate simultaneous event focus.
2. Use a checkbox with focusable property to simulate a click event.
3. Use CSS derived selector to transform the height of the content to complete the face collapse effect.

3. Dialog

Open content in an interactive overlay.

Key points

1. Position the element by a tag aiming point, href and id are consistent, simulate the click.
2. Position the modal element by the : target selector, toggle the display and hide.

4. LightBox

Key points

1. Position the element through the tag aiming point, href and id are consistent, simulating a click
2. Position the element through the :target selector to display a larger image

5. Tooltip

Customizable, themeable tooltips, replacing native tooltips.

Key points

1. Use the HTML custom attribute data-attr to store the hint content
2. Use attr(data-attr) to get the hint content and use hover to display the text hint

6. Indicator

Key points

1. Set the background of the Body element to gradient
2. Cover the body with a white background mask layer to reveal a little bit of the top to show the progress

Conclusion

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.

Code Links

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.

Give it a try →

Learn more