Introduction

Nowadays, in the era of various front-end frameworks, it is more and more convenient to simply complete some functions on the interface. However, too much use of these frameworks without more research and thinking about the concrete implementation of such frameworks will not improve my personal ability quickly. On the contrary, if I use them too much, sometimes my vision will be obscured and my knowledge system cannot be upgraded. Today, I’m going to talk about the interaction of some functions that CSS can do. These functions may be the first thing you think of before using JS, but they can also be done with powerful CSS. I hope that through my sharing can increase your knowledge horizon.

1 Tabs

The online demo

1.1 on key

  1. The samenameProperties of theradioOnly one group can be selected at a time
  2. usingradioHas focatable properties that simulate click events
  3. throughCSSDerived selector, combinedz-indexLevel to complete explicit and implicit content switching

1.2 Key Codes

  <div class="tab">
    <input type="radio" id="radio1" name="radiogroup"/>
    <label for="radio1">Label 1</label>
    <section>The content of 1</section>
  </div>
  
  <div class="tab">
    <input type="radio" id="radio2" name="radiogroup"/>
    <label for="radio2">Label 2</label>
    <section>Content of the 2</section>
  </div>


Copy the code
#radio1:checked ~ label.#radio2:checked ~ label.#radio3:checked ~ label{
  background:#e67e22;
}

#radio1:checked ~ section.#radio2:checked ~ section.#radio3:checked ~ section{
  z-index:1
}
Copy the code

2 Collapse

The online demo

1.1 on key

  1. usingcheckboxMulti – choice feature simulates simultaneous event focusing
  2. usingcheckboxHas focatable properties that simulate click events
  3. throughCSSDerived selector to change the content height to complete the face folding effect

1.2 Key Codes

  <input type="checkbox" id="checkbox1" class="checkbox-common"/>
  <label for="checkbox1" class="panel-title">Panel 1</label>
  <section class="panel-content" id="content1">The content of 1</section>
Copy the code
#checkbox1:checked ~ #content1.#checkbox2:checked ~ #content2.#checkbox3:checked ~ #content3{
  height:100px;
}
Copy the code

3 Dialog

The online demo

3.1 on key

  1. Use the a tag to target the element,hrefandidConsistent, simulated click
  2. through:targetThe selector locates modal elements and toggles explicit and implicit

3.2 Key Codes

<a href="#dialog" class="dialog-btn">click me</a>
<div class="dialog-box" id="dialog">
  <div class="dialog-con">
    <a href="#" class="dialog-close">X</a>
    content
  </div>
</div>
Copy the code
.dialog-box:target{
  visibility:visible
}
Copy the code

4 lightBox (Image preview)

The online demo

4.1 on key

  1. Use the a tag to target the element,hrefandidConsistent, simulated click
  2. through:targetLarge view of selector location display

4.2 Key Codes

<div class="light-box">
  <a href="#img1"><img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png?w=100&h=100" alt=""></a>
  
  <a href="#" id="img1" class="lightbox">
    <img src="https://si.geilicdn.com/img-5cea0000016b6d86be730a217252-unadjust_900_383.png" alt="">
  </a>
  
</div>
Copy the code
.lightbox{
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,1);
  right:0;
  bottom:0;
  text-align:center;
  display:none;
  z-index:999;
}
.lightbox:target{
  display:block;
}
Copy the code

5 Tooltip (Text)

The online demo

5.1 on key

  1. usinghtmlCustom attributesdata-attrTo store the content of the tip
  2. throughattr(data-attr)To get the prompt content and passhoverTo display text prompts

5.2 Key Codes

<p class="poem">Short,<span data-tip="A night of pain and suffering." class="tooltip" href="" tabindex="0">Bitter night</span>Why don't long,<span href=""class="tooltip" data-tip="Let's have a night out." tabindex="0">Grasp the night</span>swim</p>
Copy the code
.tooltip:before{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:120%;
  display:block;
  padding:.5em;
  width:150px;
  transform:translateX(50%);background:#7d5fff;
  color:#fff;
  opacity:0;
  text-align:center;
  outline:none;
}
Copy the code

6 Indicator (Reading Progress)

The online demo

6.1 on key

  1. The body sets a diagonal gradient background
  2. Cover the body with a white background, exposing the top a little to show progress

6.2 Key Codes

body{	
	background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
	background-size: 100% calc(100% - 100vh + 129px);
	background-repeat: no-repeat;
}
Copy the code

7 Summary

After watching the above examples, do you have a deeper understanding of the power of CSS? Hope to share your CSS in the comments some special useful skills, we learn together.

Reference links:

  • www.youtube.com/watch?v=IRI…
  • Codepen. IO/MadeByMike /…