This is the fourth day of my participation in the November Gwen Challenge. See details: The last Gwen Challenge 2021.

At present, font icon has become the industry standard of front-end icon making. Font icon principle generally has the following two kinds:

  1. Convert the icon collection tobase64Data, through the background positioning to display the corresponding icon.
  2. willsvgImage collection data written into JS, throughjsTo display the corresponding icon.

Both methods need to load resources from the outside, which inevitably consumes certain network and memory resources. CSS ICONS consume no network resources and less memory resources. Therefore, it can be used appropriately in some regular icon drawing. Before we start drawing, let’s learn a few things about it.

  1. css box-shadow
  2. Pseudo-elements ::before and ::after

box-shadow

The box-shadow attribute is used to add a shadow effect to the frame of an element. You can set multiple shadow effects on the same element and separate them with commas. The settable values for this property include the X-axis offset, Y-axis offset, blur radius, diffusion radius, and color of the shadow (from MDN)

The spread radius determines that the shadow is several pixels larger than the frame of the element, the blur radius determines the texture of the shadow, and the XY axis offset determines the position of the shadow.

.box {
 box-shadow: 0px 0px 3px 4px #df2e24; // Defines an element with 4px shadows on all four sides, and a radius of blur of 3px
}
Copy the code

Pseudo-elements ::before and ::after

CSS[pseudo-element]:: After is used to create a pseudo-element as the last child of the selected element. Decorative content is usually added to the element in conjunction with the Content attribute. This virtual element defaults to an inline element. From (MDN)

For example, adding a 1px tail to an element from a pseudo-class element might look like this:

.box {
 position: relative;
}
.box::after{
  content: ' ';
  position: absolute;
  top: 10px;
  left: 0px;
  width: 1px;
  height: 10px;
  background: #df2e24;
}
Copy the code

The effect picture is as follows, and the code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Marker </title> <style>. Mark-outer {display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: #4AA5FF; text-align: center; position: relative; box-shadow: 0px 0px 4px 3px #1650af; } .marker-inner { display: inline-block; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: #fff; color: #111; position: absolute; Top: 5.5 px; left: 6px; font-size: 14px; ` `z-index: 3; } .marker-outer::after { display: block; content: ""; width: 14px; height: 16px; background: #4AA5FF; border-radius: 0px; transform: rotate(47deg); box-shadow: 2px 2px 4px 0px #1650af; position: absolute; top: 20px; left: 9px; font-size: 14px; z-index: 2; } </style> </head> <body> <span class="marker-outer"><span class="marker-inner">3</span></span> </body> </html>Copy the code

A brief analysis of the drawing process:

Draws the outer large circle

  1. usingborder-radius:50You can draw a circle with %, this is CSS development experience or common sense,
  2. Note that the width and height of the elements should be equal, otherwise it will be an ellipse.
  3. The exterior needs to have shadows on all four sides, so the box-shadow attribute has an xy offset of 0 and a blur radius of 4px, which is roughly adjusted. The reader can adjust the parameters according to the desired effect.
  4. text-alignCenter the inner circle horizontally

Draw the inner circle

The use of absolute positioning can avoid the influence of tail drawing, drawing the same. Text-align = left (32px – 20px)/2 = 6px.

Draw the tail

  1. The drawing tail uses pseudo-class elementsafter, in fact,afterThe tail can be drawn by placing it on either a large or small circle. But semantically, this tail should belong to the great circle.
  2. The tail comes through a rectangular rotation. The rectangle here is absolutely positioned, itsz-indexAbsolutely orientated than a small circlez-indexSmall, so that the extra part of the rectangle is covered by the smaller circle.
  3. If you want to make the tail less angular, you can adjust it by setting border-radius.
  4. Shadows only need 2 edges, so box-shadow needs to set the xy offset.

To summarize, using CSS to draw ICONS, you need to follow the following steps:

  1. Break the icon into small pieces and divide and conquer.
  2. The grouping of parts, usually by absolute or relative positioning
  3. Adjust the details according to the desired effect.

At the same time, learn border,box-shadow, pseudo-class elements, CSS transform knowledge, which will help draw more beautiful ICONS. Thanks for reading, please give me a thumbs up if it helps you. If anything is wrong, please point it out. The next few articles will cover common CSS development techniques, so stay tuned!