HOW TO CREATE ICON HOME WITHOUT IMAGE | HTML5, CSS3

Diposting oleh pada tanggal
HOW TO CREATE ICON HOME WITHOUT IMAGE | HTML5, CSS3




What is icon home?
Icon home is important icon to create a simple link without text. Icon home can be used to create a hyperlink to go to the index file or home page.
Many other websites icon home is using image. But in this tutorial we using css3.


How to create icon home without image?
Look at the demo below, before you create your own icon home.





<br />


ICON HOME

ICON HOME| HTML5 & CSS3








Step by step to create icon home:

1. first, create 4 div element and 4 class element on your html code.
I have 4 div element with 4 class element, that is:
home-wrapper, home1, home2, and home3.
Example:



<div class="home-wrapper">
<div class="home1"> </div>
<div class="home2"> </div>
<div class="home3"> </div>
</div>


2. Next, Create a css file. Okay we start with home-wrapper class.
Write some css property,
Example:



width : 36px;
max-height : 16%;
padding : 3px 6px;
line-height : 1;
background-color : #f5f5f5;
-webkit-box-shadow : inset -1px 1px 3px #26b14c;
box-shadow : inset -1px 1px 3px #26b14c;
-webkit-transform : rotate(-90deg);
transform : rotate(-90deg);

Width and max-height is used to create the width (30px) and height (less than 16%) of the div element with class home-wrapper.
Transform: rotate(-90) is used to rotate it from landscape to potrait ( make the easy to translate it.)

3. After that, create a combinators css with home1, home2, and home3 using child selector ( > ) .

Example:



.home-wrapper > .home1

4. Next, insert some css property to create the first wall.

Example:



.home-wrapper > .home1
{
width : 13px;
height : 4px;
background-color : #26b14c;
-webkit-transform : translate(4px,8px);
transform : translate(4px,8px);
}


5. And than, insert some css property on class .home2 to create triangle for roof top.
Example:




.home-wrapper > .home2
{
border : 13px solid;
border-color : transparent transparent transparent #26b14c;
-webkit-transform : translate(43%,0);
transform : translate(43%,0);
margin : auto;
}
border: 13px solid; to create a cubes, border-color: transparent transparent transparent #26b14c to create the triangle.

6. After that, insert some css property again on class .home3 to create the last wall.
Example:




.home-wrapper > .home3
{
width : 22px;
height : 4px;
background-color : #26b14c;
-webkit-transform : translate(4px,-8px);
transform : translate(4px,-8px);
}

7. Finally, Call your css file into html. And look your HTML file. :)

What is the full code of this tutorial?
Okay, You can copy the code below for free, try it yourselft. More practice is more experience :D.
Just do it.


What's next?
How to create javascript framework .click() by yourself

Komentar

Posting Komentar