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> (html comment removed: insert your title here-)
<link rel="stylesheet" href="style.css"> (html comment removed: css file)
</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.
@avantika
Is another Scammer Account
Your account will be banned due to multiple accounts submitting utopian contributions.
Your account is linked to @kibria365 account which has been recently banned.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Hello! Your post has been resteemed and upvoted by @ilovecoding because we love coding! Keep up good work! Consider upvoting this comment to support the @ilovecoding and increase your future rewards! ^_^ Steem On!
Reply !stop to disable the comment. Thanks!
Hi @avantika!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by kibria365 from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.