CSS Tutorial part-1 ( Create a 3d logo/image using CSS and HTML)

Repository

https://github.com/avantikadev/css

What Will I Learn?

How to create a 3D logo using CSS
How to convert a 2D image to 3D
How to use shadow in image

Requirements

Text Editor
Knowledge on HTML
Knowledge on CSS

Difficulty

Basic

Tutorial

This is my first tutorial in CSS and HTML. So I make only one topic. Making a 3D logo is so easy. Now most of the website uses many 3D pictures in their webpages. So I will teach you How to make a beautiful 3D picture or Logo.

Let's Start.

First create two files
index.htmland style.css. Keep them in same folder. We will write HTML code in the first file and CSS code in the second file.

Open the index.html file using any Text or Code editor.

First write this code for start html.

<!doctype html>
<html>

Then put the head tag

<head>
            <meta charset="utf-8">
            <title> 3D LoGo by Avantika </title>   
            <link rel="stylesheet" href="style.css">  
      </head>

Now write the body tag.

<body>
            <div class="logo"> </div>  <-- logo class -->
      </body>

save this file.

Now open the file with any browser. You will see a blank page.

Now open the style.css with any text editor. Write the css code one by one.

First write this ;

This class is use for "body" tag. You can use any background color in it. Save this. (If you don't want to change your page background color skip this.)

Now browse your html page. You will see like this.

Now we write the logo class.

This code is used for set the logo position.

In this picture black screen is your logo position. You can change the logo position by editing the top,bottom,left,right values in the css code.

Now you need to attach the logo image file or vector file. So just edit

background: #000000;

background: url(image.jpg);  //change "image.jpg" to your image file location.

For example I add this code.

Now open the file with browser.

You will see your picture/logo in the webpage. But it is in 2D.

Now write this code

Now look at the browser.

Then,

Change the background-color to your color.
Now you will see this :

Now write this code.

Finally You can see that your image is fully 3D.
To add a shadow just write this code inside the logo class.

Now save the file.And open the index.html file.
You will see simillar like this

You can change any value to customize.

You can find the full code in my github repository.

Proof of Work Done

https://github.com/avantikadev/css