CSS implements the web component function of sliding the message panel

Hello everyone, I wonder if you have the same confusion as me. Although it is easy to get started with CSS, it has too much content. Many attributes seem to be true. I think I understand them, but I find it difficult to use them myself. I don’t know where to start when I see beautiful effects. This is mainly because I have too little practice with new attributes and cannot apply them flexibly. CSS always makes some people lose their feeling. In fact, there are really not many shortcuts to learning CSS well. Just like JS programming, you have to take it seriously, read more and practice more, because the CSS today is no longer the CSS of the past.

For example, these two books, "CSS Definitive Guide Fourth Edition", are more than 1,000 pages long. I bought them several months ago but I still haven't finished reading them. The text is too boring. I forget what I've read after I finish it, and I forget to continue reading. I really can't continue reading. I wonder if you have the same feeling?

Okay, without further ado, today we are going to take a look at a common example: on the right side of many websites there is a fixed floating message icon. When we click on this icon, the message content panel will slide sideways. You may say that this is not simple and it can be easily achieved using JQ, but what I want to say is that for the performance of the website, try not to use JS if it can be achieved with CSS, because CSS is powerful enough now.

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

1. Create HTML structure

Based on the above effect diagram, we need to create three elements, a checkbox element and the corresponding label tag, and a form panel element.

A CSS feature used here is worth your attention: 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. When we click the label element mark, the corresponding form element will be focused and selected.

This feature is one of the techniques we use to implement this case. Combined with the CSS checkbox pseudo-class selector to display and hide the message panel, we can get rid of JS to implement this case.

Based on the above ideas, let's get started. First, we place the checkbox and its corresponding label, and finally add 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, and finally we have the completed 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>

The finished effect is as follows:

2. Define the basic style

Now we start to add some basic CSS styles. Here we use CSS custom variables to facilitate global modification, as well as some reset rules and basic rule styles of the form. The sample 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;
}

3. Define form element related styles

1. Since the checkbox element does not need to be displayed in this case, we only use its pseudo-class characteristics combined with the label to control the display and hiding of the message panel, so we need to move it out of the visible area. Remember that the hidden attribute (display:none) cannot be used here. The sample code is as follows:

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

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

• Use the fix attribute to fix the label element corresponding to the checkbox in the center of the right side.
• Display the "FEEDBACK" text vertically first.
• Hide the form panel. We move it to the right by 100% of its width and center it 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;
}

Tips: 1. What needs to be emphasized here is the feedback-label style. When it is transformed vertically, we first rotate it counterclockwise, and the direction of its x and y axes also rotates with it, so it is translate(50%, -100%) to center it vertically.

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

3. Let's continue. Don't worry, we will be done soon. We need to make the page prettier and add some styles. The 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;
}

Tip: Here we use linear-gradient() for the background color to achieve a beautiful color gradient background. There is another CSS3 syntax that needs attention: hue-rotate, the hue rotation filter, which allows us to change the current color.

4. Use CSS selectors to switch and hide form panels

We switch and display the message panel by clicking the label tag corresponding to the checkbox. Here we use the :checked pseudo-class, as well as ~ (subsequent sibling selector) and + (adjacent sibling selector) to select auxiliary elements for style transformation. The sample code is as follows:

[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.35s ease-in-out;
}

There are a few style rules we need to talk about here:

• translate(50%, calc((var(--form-width) + 100%) * -1)); This style is a bit complicated, but it is not difficult. It just adds the width of a form panel. After the rotation, the y-axis becomes the horizontal axis. Moving to the left is equivalent to moving the Y-axis upward, so it is a negative value and needs to be multiplied by -1.
• For the second selector, we add an outline attribute after the selection is made, mainly to facilitate those users who are accustomed to keyboard operation. When they use the Tab key to select the feedback label element, and then use the Space key to easily open the message panel for switching.
• In the third selector, we use transform: translate(0, -50%); to change the X axis to 0 and restore it to its original position, so that the content of our message panel can be displayed.

5. Dealing with responsiveness issues

Finally, we would like to emphasize that we need to consider the issue of page responsiveness 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 adjusting the initial font size to 16px.

The responsive code finally added 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));
  }
}

6. Sections

Well, our case is now complete. You can enjoy your masterpiece. It is very simple to implement. Finally, I still recommend that you practice it yourself, so that you can deepen your understanding of the CSS properties used in this case.

You can click the following URL to experience the final effect online:

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

Summarize

The above is the details of how CSS implements the web component function of the side-sliding message panel. For more information about the CSS side-sliding panel, please pay attention to other related articles on 123WORDPRESS.COM!