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.html
and 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;
to
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.