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

Interesting front-end CSS effects – Apple data line

Today, I was walking around a website when I found a seemingly ordinary picture. That’s the one down there.It looks like an ordinary hd photo of Apple data cable, but there is a mystery behind it (the whole structure is completed by CSS without any pictures).

1. The first part is the long three sections of milky white glue line

The full-length three sections can be decomposed into three rectangles with inconsistent length and height, and the shadows at the junction of two sections can be decomposed into a small rectangle through background-image: Linear-gradient fills the rectangle with gray and white from bottom to top and from left to right to simulate the color and light and shadow effect of the data line.

background-image: linear-gradient(to bottom,#ddd,#f7f7f7 13%,white 18%,white 35%,#f7f7f7 38%,#f7f7f7 50%,#eee 70%,#ddd 85%,#ccc 95%,#bbb 100%), linear gradient (to the left, rgba (0,0,0,0.1), rgba (0,0,0,0)), linear-gradient(to bottom,#ccc,#ddd 10%,#edf0f3 30%,#edf0f3 60%,#ccc 92%,#bbb 98%), Linear - gradient (to the left, rgba (0,0,0,0.1), rgba (0,0,0,0)), linear-gradient(to bottom,#ccc,#ddd 10%,#edf0f3 30%,#edf0f3 60%,#ccc 95%,#bbb 100%);Copy the code

Background-size sets the size of the three-step format

Background-size: 11em 6.2em,1em 3.2em,8em 3.2em,.8em 2.3em,calc(50%-4em) 2.3em;Copy the code

Use background-position to set the three-step position

Background-position: CALC (50% + 9.5EM) 50%, CALC (50% + 3.5EM) 50%,50% 50%, CALC (50%-4.4EM) 50%,0 50%;Copy the code

Thus the wire part of the data line is complete. Now join the interface part of the data line

First, background-image is used to depict the color of the interface

background-image: Linear-gradient (to white 30%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0) 90%), Linear gradient(to top,white 30%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0) 90%), Linear - gradient (to bottom, rgba (0,0,0,0.15), rgba (0,0,0,0)), linear - gradient (to top, rgba (0,0,0,0.15), rgba (0,0,0,0)), Linear - gradient (the to right, rgba (0,0,0,0.25), rgba (0,0,0,0)), Linear - gradient (125 deg, rgba (0,0,0,0) 5%, rgba (0,0,0,0.1) 25%, rgba (255255255,0.9) 48%, Rgba (255255255,0.9) 52%, rgba (255255255, 0), 75%), Linear - gradient (55 deg, rgba (0,0,0,0) 5%, rgba (0,0,0,0.1) 25%, rgba (255255255,0.9) 48%, Rgba (255,255,255,0.9) 52%,rgba(255,255,255,0) 75%), linear-gradient(to bottom,#e5e0d5 30%,#c9c3bc 100%);Copy the code

Then use background-size to set the size of the color block. Background-position to set the border-radius. Set the right side of the joint to a curved box-shadow

background-size: 30% .4em,30% .4em,100% .4em,100% .4em,.4em 100%,30% 50%,30% 50%,100% 100%; Background-position: 55%,55% 100%,0,0,0 100%,0 50%,100%,100%,100%; border-radius: 0 1em 1em 0; Box-shadow: inset-0.3em 0 0.1 em-0.1em (0.00/20%);Copy the code

When this is done, you get a semi-finished data connector that looks like this

It also lacks a white and gray chip – like part compared with conventional connectors.

First, set an appropriate width and height for the pseudo class and set the background color as white to the right of the style completed in the previous step and set background-image as white and background color at intervals to simulate the style of bar code

background-image: Repeating - linear - gradient (to bottom, rgba (255255255, 0), rgba (255255255, 0). 18 em, white. 18 em, white .36em),linear-gradient(to bottom,#ddd 20%,#bbb);Copy the code

Set the size and positioning

background-size: 50% 75%; 
background-position: 50% 50%
Copy the code

Round the corners and add shadows.

border-radius: .5em; Box-shadow: -0.1em 0 0.1em RGB (0, 0, 0), 0.2em 0 0.1em RGB (0, 0, 0);Copy the code

When combined, you get a data header

At this point, an Apple data cable that is 99 percent similar to the actual photo is complete.