Welcome to Day 9 of learning CSS. You can find Day-8 here.

As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel.

We will start with 3D Layering Effect on day-9. Open your code editor and create a new 9.1-3DLayer folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

Image for post
Image for post
Basic Html

Now, add the img folder containing these images. All the svgs are from the layer.psd file.

Image for post
Image for post
Images

Now, let’s put some basic CSS in sandbox.css to show all the svg images.

Image for post
Image for post
sandbox

It will show as below in browser.

Initial svgs

Next, let’s align the images in svg by putting this in sandbox.css

Image for post
Image for post
Aligning

It will perfectly align all the svg images.

Image for post
Image for post
Aligned images

Now, it’s time for the 3D effect. We are basically using translate and rotate to rotate each svg image, but the key here is to use perspective as it gives 3D effect.

Image for post
Image for post
3D effect

This gives our image this nice animation, with all layers separating on hover.

Image for post
Image for post
Layer animation

We will next start with Dropdown menu on day-9. Open your code editor and create a new 9.2-DropdownMenu folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

Image for post
Image for post
Basic dropdown

With the basic html our page looks like below.

Image for post
Image for post
Basic Page

Let’s put some basic css in sandbox.css

Image for post
Image for post
Basic CSS

It will style the button nicely

Image for post
Image for post
Button styled

Let’s now complete the dropdown css.

Image for post
Image for post
CSS complete

It will complete our dropdown and show this nice dropdown on hover.

Image for post
Image for post
The Dropdown

This completes day 9 of the course. You can find the code for the same here.

You can find the final day here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store