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

in #utopian-io2 years ago

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.

IMG_20181028_003145_700.JPG

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.
IMG_20181027_234138_224.JPG
Now open the file with any browser. You will see a blank page.
Screenshot_20181027-221902.png

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

First write this ;

IMG_20181027_223728_932.JPG

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.
Screenshot_20181027-222051.png

Now we write the logo class.
IMG_20181027_223803_261.JPG

This code is used for set the logo position.

Screenshot_20181027-222328.png

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.
IMG_20181027_224017_898.JPG

Now open the file with browser.
Screenshot_20181027-222455.png

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

Now write this code
IMG_20181027_224121_423.JPG
Now look at the browser.
IMG_20181027_224232_909.JPG

Then,
IMG_20181027_224206_618.JPG
Change the background-color to your color.
Now you will see this :
IMG_20181027_224253_800.JPG

Now write this code.

IMG_20181027_224324_667.JPG

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

IMG_20181027_224411_592.JPG

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

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

Sort:  

@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.