DEV Community

Cover image for CSS3 in 10 days — Day 7
Nabendu
Nabendu

Posted on • Updated on • Originally published at nabendu.blog

CSS3 in 10 days — Day 7

Welcome to Day 7 of learning CSS.

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

We will start with Animated Pyramid on day-7. Open your code editor and create a new 7.1-AnimatedPyramid folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

BasicsBasics

Let first put some basic css in sandbox.css to show three boxes.

ThreeThree

It will show as below.

The basicsThe basics

Now we will change it into triangle by using clip-path.

clip-pathclip-path

And now it shows the perfect triangles.

Perfect TrianglesPerfect Triangles

Next, we will add animations for the mid triangle. We will only show the top triangle and on hovering over it, will show the mid triangle.

Mid triangleMid triangle

Now, it will show this nice animation.

Nice animationNice animation

Next, we will add code for the bottom triangle and will also add, a transition.

bottom trianglebottom triangle

This will complete our Animated Pyramid and show this nice animation, on hovering the mouse over the initial triangle.

Animated TriangleAnimated Triangle

Next, we will do CSS only Spinners on day-7. Open your code editor and create a new 7.2-Spinners folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

BasicsBasics

Let first put some basic css in sandbox.css to show the first spinner.

First spinnerFirst spinner

It will show the nice half arc.

arcarc

Let’s make the spinner rotate now. We will add the below transition effect in css.

CSS transitionCSS transition

It will show this nice spinner, which also changes size.

Spinner 1Spinner 1

Let’s start with spinner 2 and put some basic CSS.

Spinner 2Spinner 2

It will show two circles as of now.

Two circlesTwo circles

Now, let’s add animation for the circle.

orbit-1orbit-1

It will show this nice animation as below.

Nice animationNice animation

Now, we will put the animation for after which will add another circle.

The otherThe other

It will show this nice animation of two circles, orbiting a circle.

Nice oneNice one

This completes day 7 of the course.

You can find the code for the same here.

Top comments (0)