Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use pure css to achieve a super-practical icon library. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Pseudo elements of preparatory knowledge

A pseudo element is a keyword attached to the end of the selector that allows you to modify the style for a specific part of the selected element. The main pseudo elements are:

The style of the first letter of first-letter

:: the style of the first line of first-line text

Modifier added to the header of the:: before element

Modifier added at the end of the:: after element

Placeholder style for:: placeholder input

:: selection the style of the selected element

Personally, I think pseudo-elements can be interpreted as the modification of elements, which can bring additional styles to elements and belong to the additional document structure.

Pseudo class

It is used to represent the state or attribute of an element that cannot be easily or reliably detected in CSS. For example, the hover of the a tag indicates the style of the mouse over, the visited represents the style of the visited link, and is more used to describe the style when the state of the element changes. Pseudo classes mainly include:

: link

: visited

: hover

: active

: focus

: lang (fr)

: not (s)

: root

: first-child

: last-child

: only-child

: nth-child (n)

: nth-last-child (n)

: first-of-type

: last-of-type

: only-of-type

: nth-of-type (n)

: nth-last-of-type (n)

: empty

: checked

: enabled

: disabled

: target

We can use css pseudo-classes and pseudo-elements to achieve a lot of powerful visual effects, here I mainly introduce pseudo-elements, if you are interested in pseudo-classes or other css features, you can take a look at my previous css article, which is very comprehensive.

Text

Let's first take a look at the icon library we implemented in pure css:

Of course, if we know the css principle that makes the above icon, then we can achieve richer and more complex graphics, and even create our own icon library. Next, I will introduce the ways and methods to achieve the icon above, and give part of the source code for you to learn.

Principle

Our implementation of the css icon as above is based on pseudo elements, and we can use the:: before and:: after and content attributes of pseudo elements to add additional visual effects to elements. We also introduced the concepts and types of pseudo elements above, so let's implement it.

Implement arrowhead

In fact, the idea is to use the element:: before pseudo-element to draw a triangle, use css to set the span style to a line and position the layout:

/ / less .arrow {position: relative; display: inline-block; line-height: 0; background-color: # ccc; & .arrow-hor {width: 16px; height: 1px;} & .arrow-hor.right::before {content:'; position: absolute; top:-4px; right:-8px; border: 4px solid transparent Border-left: 4px solid # ccc;}} / / html

In this way, we can achieve a right arrow, we can also use a similar method to achieve the left arrow, up and down arrow, to achieve two-way arrow only need to add a:: after pseudo-class and do the appropriate positioning.

Implement the search icon

It only takes a circle and a line to implement the search icon, and then we will use transform:ratate to achieve the angle tilt, as follows:

/ / less .search {position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid # ccc; text-align: center; transform: rotate (- 45deg); &: after {content:'; display: inline-block; width: 1px; height: 4px; background-color: # ccc }} / / html

Realize the avatar

To achieve the avatar, we will use before and after pseudo elements to make the head and body of the character, and we will draw an ellipse with css to do it:

/ / less. Dot-pan {position: relative; display: inline-flex; width: 60px; height: 60px; line-height: 0; align-items: center; border-radius: 50%; background-color: # 06c; transform: rotate (- 90deg); &: before {content:'; display: inline-block; width: 28px; height: 40px Margin-left:-3px; border-radius: 50% 50%; flex-shrink: 0; background-color: # fff;} &:: after {content:'; display: inline-block; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background-color: # fff }} / / html implementation location icon

The location icon consists of a circle and a triangle. If we want to be more elaborate, we can use a pseudo element to make a fixed point:

/ / less. Locate-icon {position: relative; display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: # 06c; &: before {content:'; position: absolute; display: inline-block; width: 12px; height: 12px; border-radius: 50%; left: 50% Top: 50%; transform: translate (- 50%,-50%); background-color: # fff;} &:: after {content:'; margin-top: 45px; display: inline-block; border: 15px solid transparent; border-top-color: # 06c;}} / / html implements Wechat icon

The two eyes in the picture are mainly realized by a pseudo element plus box-shadow, which can save a pseudo element to be used as a small tail. As for how to realize triangles of different shapes, you can communicate with me if you don't understand, the specific implementation is as follows:

/ / less. Wechat-icon {display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: rgb (68,170,59); &: before {content:'; margin-top: 14px; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: # fff Box-shadow: 16px 00 # fff;} &:: after {content:'; margin-top: 42px; display: inline-block; border-width: 6px 10px 6px 10px; border-style: solid; border-color: transparent; border-top-color: rgb (68,170,59); transform: rotate (- 147deg) }} / / html implements the check box icon

Here is also very simple, let's put a check mark in the content of the pseudo element, and then set the color size:

/ / less. Yes-icon {display: inline-flex; justify-content: center; align-items: center; width: 48px; height: 48px; background-color: green; border-radius: 50%; &:: after {content: '✓'; color: # fff; font-size: 30px; font-weight: bold }} / / html implementation eyes (commonly used for website traffic icons)

The main thing is to make an ellipse plus a circular pseudo-element:

.view-icon {display: inline-flex; justify-content: center; align-items: center; width: 58px; height: 36px; background-color: # 06c; border-radius: 50%; &:: after {content:'; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: # fff }} Navigation icon

The principle is similar, the main idea is to draw two triangles and cover the bottom of the main element with the triangle of the pseudo element:

.gps-icon {position: relative; display: inline-flex; justify-content: center; align-items: center; border-width: 30px 15px 30px 15px; border-color: transparent; border-style: solid; border-bottom-color: # 06c; transform: translate (10px,-16px) rotate (32deg); &: after {position: absolute; bottom:-48px; content:'' Display: inline-block; border-width: 10px 38px 30px 38px; border-color: transparent; border-style: solid; border-bottom-color: # fff;}} implement the heart-shaped icon

The principle is that two ellipses are realized by using two pseudo elements, and the rotation coincides:

.logo-x {position: relative; display: inline-flex; width: 50px; height: 50px; border-radius: 50%; background-color: rgb (212,73,17); &: after {position: absolute; content:'; left: 10px; top: 12px; display: inline-block; width: 20px; height: 30px Border-radius: 50%; background-color: # fff; transform: rotate (135deg);} &:: before {position: absolute; content:'; right: 10px; top: 12px; display: inline-block; width: 20px; height: 30px; border-radius: 50%; background-color: # fff Transform: rotate (- 135deg);}} ps icon

This is also a pseudo-element, a pseudo-element used to make text graphics, and one used as a mask to form a pseudo-three-dimensional sense:

.logo-ps {position: relative; display: inline-flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 8px; background-color: rgb (15102184); &: before {position: absolute; content:'; display: inline-block; width: 50px; height: 40px Background-color: rgba (255,255,255,.1);} &:: after {position: absolute; content: 'PS'; font-size: 24px; display: inline-block; color: # fff;}} implement the bubble dialog box

Similar to the Wechat icon:

. logo-pp {display: inline-block; width: 150px; height: 50px; border-radius: 8px; background-color: rgb (68,170,59); &: before {content: 'waiting for your class to be over!' ; margin-top: 14px; margin-left:-33px; position: absolute; color: # fff;} &:: after {content:'; margin-top: 42px; display: inline-block; border-width: 6px 10px 6px 10px; border-style: solid; border-color: transparent Border-top-color: rgb (68,170,59); transform: rotate (- 147deg) translate (- 12px, 6px);}}

Because of the space, other icons are not realized one by one, the principle is similar, the author has used this program to do a set of 100 icons library, successfully applied in various projects, because the small size will not cause additional requests, so more practical, but more complex graphics for convenience or recommended font icons or svg,base64 and so on.

On "how to use pure css to achieve ultra-practical icon library" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.