The front end of the iPhone 13 fashion ~

Recently, the new “Thirteen Incense” finally came into the market, and many local rich friends have placed orders for iPhone 13 at the first time. As a cash-strapped front-end brick worker, I silently looked at the 5S in my hands eight years ago and dared not speak, but in order to blend in with local rich friends, I silently drew the classic background of iPhone 13 with CSS. It looks like it’s also quite suitable

Let’s take a look at how to create a classic iPhone 13 background using pure CSS

Draw the iPhone 13 background with pure CSS

Here we use a new gradient defined in the CSS Images Module Level 4 specification: Conic-gradient. We’ll talk more about tapered gradients in a minute, but let’s go straight to the code:

The first step

Define a background box in the shape of a mobile phone and give it a random color. The code is as follows:

<div class="bg-box"></div>
Copy the code

CSS properties:

.bg-box {
  width: 414px;
  height: 736px;
  background: # 011245;
}
Copy the code

The second step

Add a box inside the box as follows:

<div class="bg-box">
  <div class="bg-up"></div>
</div>
Copy the code

CSS properties:

.bg-up {
  position: relative;
  height: 368px;
  background: linear-gradient(# 011245.# 011245), conic-gradient(from 180deg.#45d6f0.#5081d5 20%.# 002082 40%.# 000.# 002082 60%.#5081d5 80%.#45d6f0);
  background-blend-mode: overlay; /* Background blending mode: overlay */
}
Copy the code

The effect is as follows:

Then add a pseudo-class as the middle source of light:

.bg-up::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
  display: inline-block;
  content: "";
  width: 2px;
  height: 184px;
  background: rgba(255.255.255.0.8);
  border-radius: 2px 2px 0 0;
}
Copy the code

The effect is as follows:

Do you feel something?

The third step

Now let’s make a copy of this box and flip it around to make ~

The complete code is as follows:

HTML:

<div class="bg-box">
    <div class="bg-up"></div>
    <div class="bg-bottom"></div>
</div>
Copy the code

CSS:

.bg-box {
  width: 414px;
  height: 736px;
  margin: 0 auto;
  background: # 011245;
}
.bg-up..bg-bottom {
  position: relative;
  height: 368px;
  background: linear-gradient(# 011245.# 011245), conic-gradient(from 180deg.#45d6f0.#5081d5 20%.# 002082 40%.# 000.# 002082 60%.#5081d5 80%.#45d6f0);
  background-blend-mode: overlay;
}
.bg-up::before..bg-bottom::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
  display: inline-block;
  content: "";
  width: 2px;
  height: 184px;
  background: rgba(255.255.255.0.8);
  border-radius: 2px 2px 0 0;
}
.bg-bottom {
  transform: rotate(180deg);
}
.bg-up::before {
  box-shadow: 2px 0 5px #1e80ff;
}
.bg-bottom::before {
  box-shadow: -2px 0 5px #1e80ff;
}
Copy the code

Do you believe in light? If you believe that you can continue to polish, draw three luminous lines, and then merge the complete background image of iPhone 13, if you have a better way to also welcome to communicate ~

Now, with the “13 Incense” behind us, let’s take a closer look at one of the most important CSS properties mentioned above for implementing the background of the iPhone 13: the taper gradient.

Conical gradient

Taper taper, as the name suggests: taper taper, is a gradual pattern like a cone. It is a new TYPE of CSS gradient after linear-gradient and radial gradient.

Let’s start with the basic tapered gradient:

background: conic-gradient(#f00.#ff0); / * * / left
background: conic-gradient(from 45deg.#fff.# 000.#fff); / * * / right
Copy the code

The picture on the right, doesn’t it look like a cone with a point pointing at us?

Tapered gradient syntax

Let’s take a quick look at the syntax of tapered gradients:

conic-gradient( [ from <angle> ]? [ at <position> ]? , <angular-color-stop-list> )
Copy the code

1. The starting Angle is Angle

Optional. Add the keyword from before the Angle to indicate that the Angle starts from and the clockwise gradient rotation is performed as follows:

background: conic-gradient(#f00.#ff0);  / * * / left
background: conic-gradient(from 45deg.#f00.#ff0); / * * / right
Copy the code

2. Central position

Optional. Add at keyword before position to set the position of the center point of the cone. The setting value is the same as background-position, for example:

background: conic-gradient(#f00.#ff0);  / * * / left
background: conic-gradient(at 30% 30%.#f00.#ff0); / * * / right
Copy the code

By default, the center of the taper gradient is the positive center, and after position is set, the center position is calculated from the position of the specific value.

3. Color breakpoint angular-color-stop-list

As with the other two gradients, we can set multiple colors and the “start position” for each color:

background: conic-gradient(#f00.#ff0);  / * * / left
background: conic-gradient(#f00.#ff0 45deg); /* 中 */
background: conic-gradient(#f00 50%.#ff0 50%); / * * / right
Copy the code

As you can see, in figure 3, the position of the first and the last color breakpoint is equal, which will achieve the effect of direct color segmentation. In this case, won’t it be possible to achieve the effect of pie graph by adding more colors to the color segmentation? Let’s look at the actual application.

Tapered gradient application scene

Through conic-gradient, we can easily achieve the effects that were difficult to achieve in the past, such as pie charts, Loading charts, color discs and other effects. Let’s take a look at some examples below.

The pie chart

<div class="pie"></div>
<style>
.pie {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background: conic-gradient(#f90 0.#f90 30%.#6c0 30%.#6c0 70%.#09f 70%.#09f 100%);
    border-radius: 50%;
}
</style>
Copy the code

Loading

The new CSS property mask is also used. If you are interested, check the documentation for more information. Instead of expanding it, take a look at the code example to implement the Loading diagram with hammer gradient:

<div class="loading"></div>

<style>
.loading {
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 50%;
    background: conic-gradient(#fff.30%.#09f);
    --mask: radial-gradient(closest-side, transparent 75%.# 000 76%);
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }}</style>
Copy the code

The dashboard

<div class="bg">
		<div class="point"></div>
</div>
<style>
body {
    background: #fff;
}
.bg {
    position: relative;
    margin: 50px auto;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: conic-gradient(
        #f1462c 0%.#fc5d2c 12.4%.#fff 12.5%.#fff 12.5%.#fc5d2c 12.5%.#fba73e 24.9%.#fff 24.9%.#fff 25%.#fba73e 25%.#e0fa4e 37.4%.#fff 37.4%.#fff 37.5%.#e0fa4e 37.5%.#12dd7e 49.9%.#fff 49.9%.#fff 50%.#12dd7e 50%.#0a6e3f 62.4%.#fff 62.4%.#fff 62.5%
    );
    transform: rotate(-112.5 deg);
    transform-origin: 50% 50%;
}
.bg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: #fff;
}
.bg::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(
            #fff 0%.#fff 25%,
            transparent 25%,
            transparent 100%
        ),
        conic-gradient(
            #f1462c 0 12.5%.#fba73e 0 25%.#e0fa4e 0 37.5%.#12dd7e 0 50%.#0a6e3f 0 62.5%.#fff 0 100%
        );
}
.point {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: radial-gradient(#467dc6 0%.#a4c6f3 100%);
    border-radius: 50%;
    z-index: 999;
}
.point::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 350px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0);
    border-radius: 100% 100% 5% 5%;
    background: linear-gradient(
        180deg.#9bc7f6 0.#467dc6 50%,
        transparent 50%,
        transparent 100%
    );
    animation: rotate 3s cubic-bezier(.93.1.32.89.1.15) infinite;
}

@keyframes rotate {
    50% {
        transform: translate(-50%, -50%) rotate(150deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(150deg); }}</style>
Copy the code

Write in the last

The above are some simple shares on conic-gradient, more details can be read in the documentation or refer to more practices. With tapered gradient, we can use pure CSS to draw the background image of iPhone 13, as well as Loading diagram, pie chart and other practical business scenes. We hope you can play with more tricks and apply them to your business