DEV Community

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

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

CSS3 in 10 days — Day 2

Welcome to Day 2 of learning CSS.

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.

New folderNew folder

Next, in index.html put the basic html.

index.htmlindex.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.

sandbox.csssandbox.css

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

Cool ShadowCool Shadow

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

3D button3D button

This, will show our cool 3D button.

Cool 3DCool 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.

index.htmlindex.html

It will show four images from unsplash.

basicsbasics

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

clip-image-1clip-image-1

So, our first image will become perfect circle.

resultresult

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.

clippyclippy

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

clip-image-2clip-image-2

And you will get the beautiful comment image.

Comment imageComment 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.

CrossCross

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.

custom left arrowcustom 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.

Registration FOrmRegistration FOrm

This will show a basic form in the browser.

Basic formBasic form

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

Basic StylesBasic Styles

It will now show our form as below.

Basic formBasic form

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

sandbox.csssandbox.css

It will now show our form as below.

index.htmlindex.html

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

ButtonButton

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.

Our ButtonOur Button

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

titletitle

Our Form is almost complete and looks like below.

Almost doneAlmost done

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

tile styletile style

It will show the below.

Tile effectTile effect

This completes day 2 of the course.

You can find the code for the same here.

Top comments (0)