Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Interesting front-end CSS effects – phone battery capacity

As a programmer, I usually see the battery chart of the phone is cut by the artist directly. I used to think that this thing is only a picture. Until I learned the advanced use of CSS background-image properties. Hahaha, look at the picture below

This is the power effect of an Android phone with pure CSS, isn’t it amazing?

Let’s record the steps to complete it.

1. Define the parent container

In order to make the bright part of the battery more obvious, it is presented in a black background. Define the size of the parent container and center it.

body{

background: black;

position: relative;

}

div{

position: absolute;

left: 50%;

top: 50%;

width: 250px;

height: 120px;

margin-left: -130px;

margin-top: -60px;

}

Copy the code

2. Add battery gradient

Here, use the backgroun-image attribute to set the gradient of the background color; Here’s the code.

background-image: // Set the background color linear-gradient(to right, Transparent 5%,# 316D08 5%,# 316D08 7%,#60b939 8%,#60b939 10%,# 51AA31 11%,# 51AA31 60%,#64ce11 61%,#64ce11 63%,#255405 63%,black 68%,black 95%,transparent 95%),Copy the code

background-image: Rgba (255,255,255,0.5) 0%,rgba(255,255,255,0.4) 4%,rgba(255,255,255,0.2) 14%, 7%, rgba (255255255,0.2) rgba (255255255,0.8) 14%, rgba (255255255,0.2) 40%, rgba (255255255, 0) 80%, 41%, rgba (255255255, 0) rgba (255255255,0.2) 80%, rgba (255255255,0.4) 86%, rgba (255255255,0.6) 92%, 90%, rgba (255255255,0.1) rgba (255255255,0.1) 95%, rgba (255255255,0.5) 98%);Copy the code

Combine the two effects and you get the image below, where the base color and brightness of the battery come out. The renderings are as follows

3. Embellish the corners

There are some corners that need to be modified, such as the four corners of the battery, which should be smooth and small arcs.

border-radius: 10px/30px; Border - left: 2 px solid rgba (255255255,0.2); Border - right: 2 px solid rgba (255255255,0.2);Copy the code

Add a 2px left and right border to lighten the battery edges.

4. Add a mid-shine

Because the gloss of the middle part of the battery is not enough, pseudo class can be used to simulate the gloss of the battery.

The width and height should be set to the size of the battery

div:before, div:after { display: block; content: ''; position: absolute; } div:after { width: 220px; height: 120px; left: 10px; border-radius: 5px/30px; border-left: 4px solid black; border-right: 4px solid black; background-image: // set linear-gradient(to bottom,rgba(255,255,255,0.3) 4%,rgba(255,255,255,0.2) 5%,transparent 5%,transparent 5% 14%, 14%, rgba (255255255,0.3) rgba (255255255,0.12) 40%, rgba (0,0,0,0.05) 42%, rgba (0,0,0,0.05) 48%, transparent Transparent 80%, RGBA (255,255, 0.3) 87%, TRANSPARENT 92%, TRANSPARENT 97%, 97% rgba (255255255,0.4)), Linear gradient(to left,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 2%,black 2%,black 6%,transparent 6%), // linear gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,0.3) 90%, 90% rgba (255255255, 0)); }Copy the code

The picture below is obtained after the completion of light filling

Also missing is a small battery head

5. Small ring on the battery head

Here is also the use of pseudo class to complete the battery head small ring part.

First set the appropriate size and position it in the right center of the battery.

div:before { width: 12px; height: 55px; right: -14px; top: 32px; background-image: Linear gradient (to bottom, rgba (255255255,0.5) 0%, rgba (255255255, 0) 14%, rgba (255255255,0.8) 40%, 14%, rgba (255255255,0.3) rgba (255255255, 0) 41%, rgba (255255255, 0) 80%, rgba (255255255,0.2) 86%, 80%, rgba (255255255,0.4) rgba (255255255,0.6) 90%, rgba (255255255,0.1) 92%, rgba (255255255,0.1) 95%, 98% rgba (255255255,0.5)); }Copy the code

When finished, set the corners into arcs

border-top-right-radius: 6px 10px;

border-bottom-right-radius: 6px 10px;

Copy the code

---

Oh ho, a perfect restore android phone battery CSS code renderings, is born!