CSS arts are simple🌈
Let's make this laptop in a few simple steps👇

THREAD🧵
STEPS

- Create screen
- Create base
- Create touch pad
- Create key's base
- Create keys
STEP 1: Create Screen

- Create a rectangle for our laptop screen
- Set background color as white
- Set a black solid border for side bezel
- Top border should be larger as compared to side and bottom border
- Set a bit border-radius as well to give it more natural look
STEP 2: Create Base

- We need a Trapezium shape for the base of the laptop
- I have used border technique to achieve trapezium, you can use any other trick
- Add volume to the base so that it looks more realistic
- Create a narrow strip and place it at the bottom of the base
- Add border-radius at bottom left and bottom right
STEP 3: Create Touch Pad

- Again we need a trapezium but this time top and bottom side is almost equal
- Place touch pad to the center of the base
STEP 4: Create Key's base

- Again create a trapezium for the key's base
- Place it at the center of the base
STEP 5: Create Keys

- Creating the keys is very simple. We will use box-shadow method to create multiple keys
- Make a small solid white square
- Create second key using box-shadow
- Repeat the box-shadows to get multiple keys
FINAL OUTPUT😍
You can follow @Prathkum.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:

By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.