Welcome to Day 2 of learning CSS. You can find Day-1 here.

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

We will start with Typography on day-2. Open your code editor and create a new 2.1-Typography folder and two files index.html and sandbox.css inside it.

Image for post
Image for post
New folder

Next, in index.html put the basic html.

Image for post
Image for post
index.html

Now in sandbox.css, we will add code for the Cool Shadow first. We are just using a cursive font from google font and a text-shadow property for the cool effect.

Image for post
Image for post
sandbox.css

Now, when you open the index.html in a web-browser, we can see the cool shadow effect.

Cool Shadow

Now, we will create the cool 3D button. Head over to sandbox.css and add the below style.

Image for post
Image for post
3D button

This, will show our cool 3D button.

Image for post
Image for post
Cool 3D

Next, we will learn how to clip images. Open your code editor and create a new 2.2-ClippingImages folder and two files index.html and sandbox.css inside it.

In the index.html put the basic bare-bones.

Image for post
Image for post
index.html

It will show four images from unsplash.

Image for post
Image for post
basics

It’s time to use clip-path property of CSS, to make the first image a perfect circle. Add below code for first image in sandbox.css

Image for post
Image for post
clip-image-1

So, our first image will become perfect circle.

Image for post
Image for post
result

Next, we will head over to the awesome clip maker site https://bennettfeely.com/clippy/

Here, you can use any of the provide clips. We will be using the comment one first.

Image for post
Image for post
clippy

Just, copy the code and put it for clip-image-2 in sandbox.css

Image for post
Image for post
clip-image-2

And you will get the beautiful comment image.

Image for post
Image for post
Comment image

Again head over to clippy and copy the code for a cross.

.clip-image-3{
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

It will transform the image to a cross.

Image for post
Image for post
Cross

Head again to clippy and edit the provided left arrow. You can drag any point.

.clip-image-4{
-webkit-clip-path: polygon(40% 0%, 39% 34%, 100% 20%, 100% 80%, 38% 68%, 40% 100%, 0% 50%);
clip-path: polygon(40% 0%, 39% 34%, 100% 20%, 100% 80%, 38% 68%, 40% 100%, 0% 50%);
}

It will show the left arrow.

Image for post
Image for post
custom left arrow

Next, we will create a beautiful registration form. Again in your code editor and create a new 2.3-RegistrationForm folder and two files index.html and sandbox.css inside it.

In the index.html put the basic bare-bones.

Image for post
Image for post
Registration FOrm

This will show a basic form in the browser.

Image for post
Image for post
Basic form

Next, we will add some basic styles to the form to show a background gradient.

Image for post
Image for post
Basic Styles

It will now show our form as below.

Image for post
Image for post
Basic form

Next, we will add code for input boxes in sandbox.css

Image for post
Image for post
sandbox.css

It will now show our form as below.

Image for post
Image for post
index.html

Next, we will style the Submit button. We will create a stripe effect fro the button.

Image for post
Image for post
Button

Let’s add some hover effect also.

.register-wrapper form input[type="submit"]:hover {
background-size: 40px 40px;
}

And now our button looks like below.

Image for post
Image for post
Our Button

Next, we will add style for our title and the box wrapping this form.

Image for post
Image for post
title

Our Form is almost complete and looks like below.

Image for post
Image for post
Almost done

Next, we will create a tile effect which, will happen when we hover over the form.

Image for post
Image for post
tile style

It will show the below.

Image for post
Image for post
Tile effect

This completes day 2 of the course. You can find day 3 here.

You can find the code for the same 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