Welcome to Day 9 of learning CSS.
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.
Now, add the img folder containing these images. All the svgs are from the layer.psd file.
Now, let’s put some basic CSS in sandbox.css to show all the svg images.
It will show as below in browser.
Next, let’s align the images in svg by putting this in sandbox.css
It will perfectly align all the svg 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.
This gives our image this nice animation, with all layers separating on hover.
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.
With the basic html our page looks like below.
Let’s put some basic css in sandbox.css
It will style the button nicely
Let’s now complete the dropdown css.
It will complete our dropdown and show this nice dropdown on hover.
This completes day 9 of the course. You can find the code for the same here.
Top comments (0)