In front-end performance optimization, the loading of resources has a great impact on page performance. How to reduce the loading of resources, especially the loading of pictures, I think is the content that every front-end needs to study.

Using a recently developed page as an example, share how to draw images with CSS to reduce the load of image resources.

The red box is the page using CSS to draw graphics, if you feel that how to draw questions, might as well refer to.

Concave semicircle

The background part of the module where the concave is located has gradient color and a picture. Multiple backgrounds can be set using CSS3 background. It should be reminded that the stack sequence of multi-background images is from back to front. For example, if the background image of the module is displayed above the gradient, it would be written as:

background: url('https://gw.alicdn.com/tfs/TB1Rk9mLMTqK1RjSZPhXXXfOFXa-208-109.png') right bottom,
    -webkit-linear-gradient(-45deg, red 15px, green 300px) top left;
Copy the code

In addition, the requirement of this module is not only to draw two concave semicircles, but also to hollow out the background content of the page. Here, I use the mask attribute of CSS3. The writing method of the mask attribute is similar to that of background, so I will not introduce it in detail here.

Mask-image controls the display and hiding of the specified area through the transparency of the image in the attribute value. The transparency is 0 to hide and 1 to display. So just draw the desired shape and set the transparency to 0 to achieve the effect of hollowing out.

-webkit-mask-image: 
	-webkit-radial-gradient(center left.rgba(0,0,0,0) 10px.rgba(0,0,0,1) 10px),
    -webkit-radial-gradient(center right.rgba(0,0,0,0) 10px.rgba(0,0,0,1) 10px);
    -webkit-mask-size: 200px 400px, 200,px 400px;
    -webkit-mask-position: left.right;
    -webkit-mask-repeat: no-repeat;
Copy the code

View example effects and source code

Many interesting effects can be achieved by combining gradients and background. The jagged line in the module is also achieved by backgorund+ gradient.

The gradient arrow

Using CSS to draw arrows is relatively easy, just use two child elements to rotate plus or minus 45 degrees, and then set the background gradient to create a visual image. With cSS3 animation, a gradient arrow animation is created.

View example effects and source code

In addition to using CSS, you can also use iconFont ICONS, and I need gradients for my arrows, whereas the standard library only has solid color arrow ICONS, Thankfully, CSS3 provides background-clip, which clips elements’ background colors to the foreground of text (iconfont ICONS are also text).

.arrows{
  background-image: linear-gradient(90deg, #FCCC98, #D69851);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 15px;
  line-height: 15px;
  -webkit-text-fill-color: transparent; }Copy the code

View the example source code

Wavy lines

My first reaction to drawing wavy lines is to use SVG or Canvas Bezier curves. Drawing wavy lines on Canvas is a bit expensive. Writing in SVG costs more, but if the visual students are using Sketch, they just need to export the SVG code.

SVG drawing wavy line instance and source code

In addition to using SVG, you can also use the CSS border property to simulate arcs. Because a border can be rounded on a border, the visual effect is like an arc, and a wavy line can be achieved by combining elements.

.mask-curve{
    width: 50px;
    height: 100px;
    background-color: #D6954E;
    box-sizing: border-box;
    border-bottom-right-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
Copy the code

Border draws a wavy line instance and code

summary

The current CSS function is also rich, you can use CSS to replace a lot of previous images to complete the effect, so as to reduce the loading of images, to optimize the page performance. The above implementation is only my personal idea, if there is a better plan welcome to exchange.