How to use CSS to create beautiful step bars

With the increasing popularity of modern websites, many websites require multi-step operations, such as registration pages, payment pages, etc. Under such circumstances, in order to provide users with a better operating experience, the introduction of step bars has become a common choice. The step bar can not only convey the current progress to the user, but also provide the user with the function of viewing historical operations and returning to previous steps conveniently and quickly. Therefore, step bars are particularly necessary when designing complex pages.

This article will introduce how to use CSS to create good-looking step bars, and detail the techniques and steps involved.

Design and implementation of step bar

To create a CSS step bar, you need to follow the following steps:

Step one: Writing HTML code

In In this step, you need to write HTML code for the step bar, including the container element of the step bar and the child elements of each step. In the container element of the step bar, we need to use the "ul" tag to create an unordered list. Each step requires the use of the "li" tag as a child element. In order to show the progress of the step bar, we need to add numbers or other identifiers that represent the current progress in each child element (as shown in Figure 1). The identifier can be an icon, color, or progress bar.

  
• 1
  
• 2
  
• 3

Figure 1: Example of step identifier

Step 2: Writing CSS

In this step, you need to write a CSS style sheet to design the step bar style. The design of the step bar CSS consists of two parts: the step identifier and the step bar itself.

For the design of step identifiers, various methods can be used, such as using icons or images, numbers or other elements that represent progress, or progress bars. Here is one example:

.progress li::before {
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}

.progress li:first-child::before {
  border-color: #7f8fa4;
}

.progress li.active::before {
  background-color: #3498db;
  color: #fff;
}

Figure 2: Style example for step identifier

In this example, we use a circular icon to represent each step. To create a circular icon, we use the CSS pseudo-class "::before" to create a pseudo-element in front of the li element. We use the "height" and "width" properties to set the height and width of the icon, and the "line-height" property to vertically center the icon. Use the "margin" attribute to vertically center an element within its parent element. With the "border-radius" property we can change the appearance of the element so that it appears circular. To select the step identifier, we used the ":first-child" pseudo-class to select the first li element.

For the design of the step bar itself, we can use a variety of methods to achieve it. Here, we use a rectangular progress bar to represent the current progress. Here is an example using the background color and shadow properties:

.progress {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.progress li {
  flex: 1;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.progress li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% + 10px);
  width: calc(100% - 10px);
  height: 4px;
  background-color: #e0e0e0;
  z-index: -1;
}

.progress li.active {
  font-weight: bold;
}

.progress li.active:not(:last-child):after {
  background-color: #3498db;
}

Figure 3: Example of a step bar

In this example, we use the "flex" property to arrange the step symbols horizontally. We use the "list-style" attribute to hide the default bullets from the ul element. We use the "margin" and "padding" properties to set the margins and padding of the step bar. We also added a light background and a shadow effect to the step bar using the "background-color" property and the "box-shadow" property.

For each step element, we use the "flex: 1" attribute to evenly arrange the step symbols in the step bar. We also use the "font-size" attribute to set the font size of the step symbol, and the "text-align" attribute to center-align the step symbol. Use the "position" attribute for relative positioning and the ":not(:last-child):after" pseudo-element to add a progress bar for all but the last step. Use the ":after" pseudo-element to add a pseudo-element inside an element. Use the "top" and "left" attributes to position the pseudo-element to the right of the center of the step symbol. Set the dimensions of the pseudo-element via the "width" and "height" properties. Use the "background-color" attribute to set the color for the pseudo-element. Set the "z-index" attribute to a negative number so that the step symbol overlays the pseudo-element. To select the step bar element, we use the ":active" pseudo-class to select the currently active li element.

Step Three: Follow-up of Interaction Design

As the step bar design is about to be implemented, we need to review the entire interaction design to ensure that each step is correctly linked to the corresponding Form page. If your site is in the mobile-first design stage, make sure the step bar style scales correctly. You can also consider adding animation effects to enhance the interactive effect of the step bar to improve the user experience.

Conclusion

In this article, we covered some of the necessary steps to design a step bar using CSS. For the design of the step bar, we mainly used HTML and CSS to create and render. We need to strive to design step bars to let users understand the operations they are performing, thereby helping users complete the required operations in more time-saving and effort-saving ways. Of course, based on the step bar design, we can also combine it with many other interactive elements to further improve the interactivity of the website.

The above is the detailed content of How to use CSS to create beautiful step bars. For more information, please follow other related articles on the PHP Chinese website!