Pure CSS CyberTruck with Single DIV


love it or hate it cybertruck really
creates a new perspective of a car design now yesterday I happened to find
this awesome CSS drawing from Lynn Fisher the coolest thing about this drawing is
she only used a single div to create a whole cybertruck so in this video we
are going to look at her code and see how she did it let’s check it out before
we begin let’s recap about CSS background image this property allows
you to set a background image for any element but the key ability is you can
add multiple images at the same time here is the example I’m going to set
these two images as background separated by a comma and here is the result you can control each background position and size the same way using comma also set no-repeat to prevent smaller
image from being repeated now back to the cybertruck this drawing
is all about using CSS background image if you look at the CSS you will see it’s
a neatly stack of a linear and radial gradient but how can a simple gradient create a
shape like that let’s take a look one at a time here is the gradient responsible
for the roof let me replace the transparent part with
red color and remove the angle now you see it’s just a simple gradient
from back to gray and red let’s add them back again slowly the black part of the gradient will be
merged with the background while transparent part will create space for
other gradients we can use background size and position properties to scale
and place it at the right location so the window frame structure you see here
is actually consists of four linear gradients for the circular shape like the wheel
it’s still the same concept except we are mixing radial gradient with a linear
here’s what it looks like if we break it down I make a time-lapse version of how the truck was created from scratch let’s check it out the headlight part is a bit special she
creates pseudo elements and use box shadow to create light ray and shining
area we can’t include the Box shadow into the same div with the truck body
because the light will shine from the entire truck instead of the headlight so
technically this drawing has three divs not one. And that’s all for this video you
can find the link to this pen at the description box below thanks to Lynn for
creating this awesome art I also put a link to her Twitter
account in case you want to follow her thanks for watching guys also don’t
forget to subscribe his channel for dev tips and tutorials bye

34 Comments

Add a Comment

Your email address will not be published. Required fields are marked *