HOW TO CREATE ICON PROFILE WITHOUT IMAGE| HTML5, CSS3

HOW TO CREATE ICON PROFILE WITHOUT IMAGE| HTML5, CSS3

What is icon profile?
Icon profile can be used to login form on username or the user profile. Every websites have a Icon profile, but many other website is using image to create icon profile.

How to create icon profile without image?
Before you create icon profile, You must look at the demo below.

<br />

ICON PROFILE

ICON PROFILE| HTML5 & CSS3

Follow this step:
1. Create 3 div element and 3 class element on your html code.
I have 3 div element with 3 class element, that is:
profile-wrapper, bar1, and bar2.
Example:

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

Example:

.profile-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, top, left, margin ,and border

Example:

.profile-wrapper > .bar1
{
background-color : #bdbdbd;
width : 7px;
height : 7px;
top : 50%;
left : 50%;
margin-left : 9px;
border : 2px solid;
border-color : rgba(0,0,0,.05);
border-radius : 20px;
}

4. Next, add the combinators css for bar2, and insert the css property, that is: width, height, background-color, margin, bottom, left, and position

Example:

.profile-wrapper > .bar2
{
background-color : #bdbdbd;
border-radius : 7px 7px 3px 3px;
position : relative;
bottom : 0%;
left : 5%;
margin-left : 4px;
width : 20px;
height : 15px;
}

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

What is the full code of this tutorial?
More practice is more experience :D.
Try it yourself:

<!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;
}

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

.profile-wrapper > .bar1
{
background-color : #bdbdbd;
width : 7px;
height : 7px;
top : 50%;
left : 50%;
margin-left : 9px;
border : 2px solid;
border-color : rgba(0,0,0,.05);
border-radius : 20px;
}

.profile-wrapper > .bar2
{
background-color : #bdbdbd;
border-radius : 7px 7px 3px 3px;
position : relative;
bottom : 0%;
left : 5%;
margin-left : 4px;
width : 20px;
height : 15px;
}
</style><br />
<title><br />
</title><br />
</head><br />
<body><br />
<div class="content-wrapper"><div class="content-title">ICON PROFILE<br />
</div><div class="demo"><h4>ICON PROFILE| HTML5 & CSS3<br />
</h4><div class="profile-wrapper"><br />
<div class="bar1"><br />
</div><div class="bar2"><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 HOME WITHOUT IMAGE | HTML5 & CSS3 (coming soon)

7 KILOMETER

HOW TO CREATE ICON PROFILE WITHOUT IMAGE| HTML5, CSS3

ICON PROFILE| HTML5 & CSS3

Komentar

Posting Komentar