CSS3 in 10 days — Day 7

Photo by Sai Kiran Anagani on Unsplash

Welcome to Day 7 of learning CSS. You can find Day-6 here.

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.

Basics

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

Three

It will show as below.

The basics

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

clip-path

And now it shows the perfect triangles.

Perfect 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 triangle

Now, it will show this nice animation.

Nice animation

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

bottom triangle

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

Animated 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.

Basics

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

First spinner

It will show the nice half arc.

arc

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

CSS transition

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

Spinner 1

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

Spinner 2

It will show two circles as of now.

Two circles

Now, let’s add animation for the circle.

orbit-1

It will show this nice animation as below.

Nice animation

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

The other

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

Nice one

This completes day 7 of the course. You can find day 8 here.

You can find the code for the same here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Automated Naughts and Crosses with Python

Designing Services For Downtime

Microservices on AWS: An In-Depth Look

Highly available, read-replicated PostgreSQL with Google CloudSQL and Terraform

Leverage Idempotent, Declarative Profiles with the NSX-ALB (Avi) REST API

I`ve got the world on a String!

You Must Take This Course Before Diving Into Cybersecurity

5 Data-driven Approaches for a Successful Cloud Migration

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Make a Background Image blurred & show your image

Essential CSS Tutorial — Part 3

Making Website Preloader Using HTML CSS JS

How to become a Full Stack Developer?