Everybody is good, don’t know if you like me there is confusion, though CSS entry is easy, but the content is too much, a lot of properties at the specious, think you understand, to oneself also very puzzled, and use it every time you see beautiful effect or a hindrance, this is mainly for new property practice too little, cannot undertake flexible application, CSS makes some people feel bad. In fact, there is really no shortcut to learn CSS, and JS programming, to pay attention to, to see and practice, because now CSS is no longer the previous CSS.

For example, these two books “CSS authoritative guide fourth edition”, more than 1000 pages, bought a few months I have not finished reading, the text is too boring, read forget, forget to continue to see, really can not go down, do not know if we have the same feeling?

Ok, without further ado, today we are going to do a common example: many websites have a fixed floating message icon on the right side, we click this icon, will slide to display the message content panel. You may say this is not easy, using JQ is easy to implement, but I want to say, for the sake of the performance of the site, CSS implementation should not use JS, because CSS is now powerful enough.

In today’s example, we will use pure CSS to achieve this effect, here we will use the “CSS checkbox hack” technique, the effect is shown below:

Create HTML structure

Based on the above illustration, we will create three elements, a checkbox element with the corresponding label tag, and a form panel element.

Here’s a CSS feature worth noting: the for attribute of the <label> tag is used to specify which form element to associate with, expanding the click area of the form element. If we click on the label element tag, the corresponding form element will be highlighted.

This feature is one of the techniques that we use to implement this case, together with the CSS Checkbox pseudo-class selector to show and hide the message panel, so that we can implement this case without JS.

With that in mind, let’s start by first placing the checkbox and its corresponding label, and finally adding the form panel and related form elements.

We will associate the form’s ID attribute with the for value of the label element in the form. Finally, we complete the HTML structure as shown in the following code:

<input type="checkbox" id="mycheckbox">
<label for="mycheckbox" class="feedback-label">FEEDBACK</label>
<form class="form">
  <div>
    <label for="fullname">Full Name</label>
    <input type="text" id="fullname">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email">
  </div>
  <div>
    <label for="comment">Comment</label>
    <textarea id="comment"></textarea>
  </div>
  <div>
    <button type="submit">Send</button>
  </div>
</form>Copy the code

The finished renderings are as follows:

Define the basic style

Now let’s add some basic CSS expressions. Here we use CSS custom variables for global modification, as well as some reset rules and basic rule styles for forms. Example code is as follows:

:root {
  --white: white;
  --gradient: linear-gradient(-45deg, #FFA600 0%, #FF5E03 50%);
  --form: #eeefef;
  --border-radius: 4px;
  --form-width: 500px;
  --form-mob-width: 320px; {} *padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 20px/1.5 sans-serif;
  background: var(--white);
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin-top: 20vh;
}
 
button.label {
  cursor: pointer;
}
 
label {
  display: block;
}
 
button.input.textarea {
  font-family: inherit;
  font-size: 100%;
  border: none;
}
 
textarea {
  resize: none;
}Copy the code

Define the styles associated with form elements

1. Since the checkbox element does not need to be displayed in the case, we only use its pseudo-class properties in combination with the label to control the display and hiding of the message panel, so we need to remove it from the visible area. Remember that we cannot use the hidden attribute (display: None) here. Example code is as follows:

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}Copy the code

2. Next, we need to add these CSS operations:

  • Use the fix attribute to fix the label element corresponding to the checkbox in the right center.
  • Vertically display the “FEEDBACK” text first.
  • Hide the form panel, which we have moved 100% of its width to the right and centered vertically.

The corresponding CSS code is as follows:

/*CUSTOM VARIABLES HERE*/
.feedback-label..form {
  position: fixed;
  top: 50%;
  right: 0;
}
 
.feedback-label {
  transform-origin: top right;
  transform: rotate(-90deg) translate(50%, 100%);z-index: 2;
}
 
.form {
  width: var(--form-width);
  max-height: 90vh;
  transform: translate(100%, 50%);padding: 30px;
  overflow: auto;
  background: var(--form);
  z-index: 1;
}Copy the code

Note: 1. What needs to be emphasized here is the feedback-label style. When it is vertically transformed, we rotate it counterclockwise first, and its X and y axes also rotate with it, so it translates (50%, -100%).

2. In the form, we use the transform method, translate(100%, -50%) to move it out of the display area of the page

3, we continue, don’t worry, we will soon finish, we need to make the page more beautiful, add some styles, sample code is as follows:

/*CUSTOM VARIABLES HERE*/
 
.feedback-label..form input..form textarea..form button {
  border-radius: var(--border-radius);
}
 
.feedback-label..form button {
  background: var(--gradient);
  color: var(--white);
}
 
.feedback-label:hover..form button:hover {
  filter: hue-rotate(-45deg);
}
 
.feedback-label {
  padding: 5px 10px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
 
form div:not(:last-child) {
  margin-bottom: 20px;
}
 
form div:last-child {
  text-align: right;
}
 
.form input..form textarea {
  padding: 0 5px;
  width: 100%;
}
 
.form button {
  padding: 10px 20px;
  width: 50%;
  max-width: 120px;
}
 
.form input {
  height: 40px;
}
 
.form textarea {
  height: 220px;
}Copy the code

Tip: Here we used linear-gradient() for the background color to achieve a nice gradient background. Another CSS3 syntax to watch is hue-rotate, which allows you to change the current color.

4. Use CSS selector to switch and hide the form panel

We toggle and display the message panel by clicking on the corresponding label of the checkbox. Here we use the: Checked pseudo-class, and ~ (subsequent sibling selector) and + (next sibling selector).

[type="checkbox"]:checked + .feedback-label {
  transform: rotate(-90deg) translate(50%, calc((var(--form-width) + 100%) * -1));
}
 
[type="checkbox"]:focus + .feedback-label {
  outline: 2px solid rgb(77, 144, 254);
}
 
[type="checkbox"]:checked ~ .form {
  transform: translate(0-50%); }.feedback-label..form {
  transition: all 0.35 s ease-in-out;
}Copy the code

Here are a few style rules we need to talk about:

  1. translate(50%, calc((var(–form-width) + 100%) * -1)); And if it’s a little bit complicated, and it’s not too hard, it just adds one more width to the form panel, and since you rotate it, the y axis becomes horizontal, and you move to the left as much as the Y axis moves up, it’s negative, so you have to multiply it by -1.
  2. In the second selector, we add the selected outline attribute mainly for the convenience of users who are accustomed to keyboard operation. When they use Tab to select feedback label element, then use Space to easily open the message panel for switching.
  3. For the third selector, we use transform: translate(0, -50%); Change the X-axis to 0 to restore the original position, so that our message board contents can be displayed.

5. Deal with responsive problems

Finally, we need to consider the issue of responsive adaptation when making pages. Here, we need to make some style adjustments for mobile devices, such as changing the width of the form panel from the original 500px to 320px, and changing the initial font size to 16px.

The resulting reactive code is as follows:

/*CUSTOM VARIABLES HERE*/
 
@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }
 
  .form {
    padding: 15px;
    width: var(--form-mob-width);
  }
 
  form div:not(:last-child) {
    margin-bottom: 10px;
  }
 
  [type="checkbox"]:checked + .feedback-label {
    transform: rotate(-90deg) translate(50%, calc((var(--form-mob-width) + 100%) * -1)); }}Copy the code

Six, section

Well, here, our case is all completed, you can enjoy the masterpiece you completed, is it very simple to implement, and finally I recommend you or hands-on practice again, so as to deepen the case to use the CSS properties of understanding.

The final effect can be experienced online by clicking on the following website:

https://www.qianduandaren.com/demo/feedback/

Thank you for your reading. If you like my sharing, please give me your attention, like and forward. Your support is the motivation for my sharing.

More exciting content, please pay attention to the wechat “front-end talent” public number!