HOW TO CREATE ICON BACK WITHOUT IMAGE| HTML5, CSS3

HOW TO CREATE ICON BACK WITHOUT IMAGE| HTML5, CSS3

What is icon back?
Usually, Icon back is used to go to the previous page. Icon back also important. Every websites have a Icon back, Because to make the visitor esay to go to the previous page, but many other website is using image to create icon back.

How to create icon back without image?
Okay, lets look at the demo.

<br />

ICON BACK

ICON BACK WITH LITTLE ARROW | HTML5 & CSS3

Please, follow this step until the end.

1. You must create 4 div element and 4 class element on your html code.
I have 4 div element with 4 class element, that is:
back-wrapper, bar1, bar2, and bar3.
Example:

2. Create a css file. Okay we start with back-wrapper.
Write some css property, that is: padding, line-height, margin-left, background-color, border, border-radius, display, and cursor.

Example:

.back-wrapper
{
padding : 2px 6px;
line-height : 1;
margin-left : 5px;
background-color : none;
border : none;
border-radius : 1px;
display : inline-block;
cursor : pointer;
}

3. After that, create a combinators css with bar1 using child selector ( > ) .
Don't forget to add the css property, that is: width, height, background-color, margin, transform: rotate(), and box-sbadow

Example:

.back-wrapper > .bar1
{
width : 20px;
height : 6px;
background-color : #666666;
margin : 6px 0;
-webkit-transform : rotate(-45deg) translate(-11px,0px);
-webkit-box-shadow : 0px 0px 1px rgba(00,00,00,.9);
box-shadow : 0px 0px 1px rgba(00,00,00,.9);
}

3. Next, add the combinators css for bar2, and insert the css property, that is: width, height, background-color, margin, and box-sbadow

Example:

.back-wrapper > .bar2
{
width : 20px;
height : 8px;
background-color : #666666;
margin : 6px 0;
-webkit-box-shadow : 0px 0px 1px rgba(00,00,00,.9);
box-shadow : 0px 0px 1px rgba(00,00,00,.9);
}

5. After that, add the combinators css for bar3, and insert the css property, that is: width, height, background-color, margin, transform: rotate(), and box-sbadow

Example:

6. Finally, call your all css code to your html code. look that.

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.

<!DOCTYPE html><br />
<html><br />
<head><br />
<meta name="viewport" content="initial-scale=1"><br />
<style type=
"text/css">
/*------------- content-------------*/
}
body
{
background-color : #f5f5f5;
}

.content-wrapper
{
padding : 10px 15px;
text-align : center;
}

.content-title
{
font-size : 24px;
margin : auto;
}

.demo
{
margin-top : 10px;
background-color : #eee;
padding : 5px;
}

/*--------- Back icon -------------*/
.back-wrapper
{
padding : 2px 6px;
line-height : 1;
margin-left : 5px;
background-color : none;
border : none;
border-radius : 1px;
display : inline-block;
cursor : pointer;
}

.back-wrapper > .bar2
{
width : 20px;
height : 8px;
background-color : #666666;
margin : 6px 0;
-webkit-box-shadow : 0px 0px 1px rgba(00,00,00,.9);
box-shadow : 0px 0px 1px rgba(00,00,00,.9);
}

.back-wrapper > .bar3
{
width : 20px;
height : 6px;
background-color : #666666;
margin : 6px 0;
-webkit-transform : rotate(45deg) translate(-11px,0px);
-webkit-box-shadow : 0px 0px 1px rgba(00,00,00,.9);
box-shadow : 0px 0px 1px rgba(00,00,00,.9);
}
</style><br />
<title><br />
</title><br />
</head><br />
<body><br />
<div class="content-wrapper"><div class="content-title">ICON BACK<br />
</div><div class="demo"><h4>ICON BACK WITH LITTLE ARROW | HTML5 & CSS3<br />
</h4><div class="back-wrapper"><br />
<div class="bar1"><br />
</div><div class="bar2"><br />
</div><div class="bar3"><br />
</div></div></div></div></body><br />
</html>

if you have any question or suggestion, please sent your question or suggestion using the form comment on this blog.

Thank you. Happy reading show.

What's next?
HOW TO CREATE ICON NEXT WITHOUT IMAGE | HTML5 & CSS3

7 KILOMETER

HOW TO CREATE ICON BACK WITHOUT IMAGE| HTML5, CSS3

ICON BACK WITH LITTLE ARROW | HTML5 & CSS3

Komentar

Posting Komentar