The recent launch of Apple’s M1 chip has enhanced performance, reduced power consumption and further improved integration. After adding all kinds of black technology, there is room to integrate two memory sticks. They said it was for the new Mac system, but he didn’t say martial arts, and the blink of an eye into the latest iPad inside. Have the imposing manner of unified river’s lake greatly. Cut the crap and get to the point.

Knowledge points involved:

  • linear-gradient
  • border
  • outline
  • -webkit-background-clip:text;
  • color:transparent;
  • SVG

At the press conference, I saw a good design drawing of M1 chip and planned to use CSS to write one by hand.

The first is the chip body:

.apple{
  width: 200px;
  height: 200px;
  background:#000;
}
Copy the code

Well, it immediately felt like it.

The second step is to add the shadow of the background.

I was going to use box-shadow at first, but it has four colors in the background. After a meal of operation, the effect is not ideal. So I came up with the idea of setting background with multiple backgrounds, and since this background requires a blur filter, I used the before pseudo-class

.apple::before{...filter: blur(15px);
  border-radius:50px;
  background: linear-gradient(125deg.#ff8b78.rgba(255.0.0.0) 70%),
              linear-gradient(215deg.#0099ff.rgba(255.0.0.0) 70%),
              linear-gradient(-45deg.#251a4a.rgba(255.0.0.0) 70%),
              linear-gradient(45deg.#ff0545.rgba(255.0.0.0) 70%);
} 
Copy the code

This is what happens when you set the background to black

There is something inside! When I looked closer, I found that things were not as simple as we thought. Apple’s designers still pay attention to detail.

Add a border

See, there’s a ring of translucent unidentified material on the edge of this black background.

Then I fixed my eyes (eyes) on the black background, there is a bevel, really play. But, you know, it doesn’t bother me! Border and outline are dry. Arrangement!

.apple{...border:2px outset rgba(255.255.255.0.2);
  outline:2px outset rgba(255.255.255.0.1);
  background:# 000;
}
Copy the code

Okay, so that’s the background, so here’s the text.

Add words

See, even the logo and text are gradient, how serious, how dedicated. It’s time to pull out -webkit-background-clip! Remember color is set to transparent;

.apple::after{
  -webkit-background-clip:text;
  color:transparent;
  }
Copy the code

I chose a bold font to make the gradient look obvious. The rest is relatively simple, take an SVG Apple logo and add it.

The finished image may be a little dull, but it’s definitely a good look. Knock it off! Here is the complete code:

html

<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<div class="apple">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 22.773 22.773" style="Enable-background :new 0 0 22.773 22.773;" xml:space="preserve">
   <defs><linearGradient id="MyGradient"><stop offset="5%"  stop-color="#50565e"/><stop offset="95%" stop-color="#8a919c"/></linearGradient>
   </defs>
  <g>
    <path fill="url(#MyGradient)" d=C0 "M15.769, 0. 053,0,0.106, 0,0.162, 0 c0. 13,1.606-0.483, 2.806-1.228, 3.675-0.731 c, 0.863-1.732, 1.7-3.351, 1.573 C - 0.108-1.583, 0.506-2.694, 1.25 3.561 C13.292, 0.879, 14.557, 0.16, 15.769, 0 z"/>
    <path fill="url(#MyGradient)" d=,0.03 c0 "M20.67, 16.716, 0.016, 0, 0,0.045 c - 0.455 -, 1.378-1.104, 2.559, 1.896, 3.655-0.723 c, 0.995-1.609, 2.334-3.191, 2.334 C - 1.367, 0-2.275-0.879-3.676-0.903 - c - 1.482-0.024-2.297, 0.735-3.652, 0.926-0.155 c, 0-0.31, 0-0.462, 0 C - 0.995-0.144-1.798-0.932-2.383-1.642 - c - 1.725-2.098-3.058-4.808-3.306-8.276 c0-0.34, 0-0.679, 0-1.019 C0.105-2.482, 1.311-4.5, 2.914-5.478 c0.846-0.52, 2.009, 0.963, 3.304 0.765 c0.555, 0.086, 1.122, 0.276, 1.619, 0.464 C0.471, 0.181, 1.06, 0.502, 1.618, 0.485 c0.378-0.011, 0.754, 0.208, 1.135-0.347 c1.116-0.403, 2.21, 0.865, 3.652 to 0.648 C1.733, 0.262, 2.963, 1.032, 3.723, 2.22-1.466 c, 0.933-2.625, 2.339, 2.427, 4.74 C17.818, 14.688, 19.086, 15.964, 20.67, 16.716 z"/>
  </g>
</svg>
</div>


Copy the code

css

body{
  background: # 000;
  font-family: 'Anton', sans-serif;
  font-size:58px;
}
.apple{
  position: relative;
  top:100px;
  left:300px;
  width: 200px;
  height: 200px;
  color:#fff;
  line-height:100px;
  text-align: center;
  text-transform: uppercase;
  border:2px outset rgba(255.255.255.0.2);
  outline:2px outset rgba(255.255.255.0.1);
  background:# 000;
}
.apple>svg{
  position: absolute;
  width: 70px;
  top:43%;
  left:60px;
  transform:translate(-50%, -50%);  
}
 .apple::after{
   position: absolute;
  content:"M1";
  left:100px;
  top:45px;
  -webkit-background-clip:text;
  color:transparent;
  background-image:linear-gradient(70deg.#8b8f9b 30%.#ebebeb);
}
.apple::before{
  position: absolute;
  z-index: -1;
  width: 130%;height: 130%;
  top: -15%;left: -15%;
  content:"";
  filter: blur(15px);
  border-radius:50px;
  background: linear-gradient(125deg.#ff8b78.rgba(255.0.0.0) 70%),
              linear-gradient(215deg.#0099ff.rgba(255.0.0.0) 70%),
              linear-gradient(-45deg.#251a4a.rgba(255.0.0.0) 70%),
              linear-gradient(45deg.#ff0545.rgba(255.0.0.0) 70%);
  animation:bigSmall 5s linear infinite;
} 

@keyframes bigSmall {
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1); }}Copy the code

Online effects jsfiddle.net/airmn/rez6f…