THE BEST UI KITS MONEY CAN BUY

Click Here!

Pure CSS Icon Tutorial

Pure CSS Icon Tutorial

2019-09-15 |

Learn this simple step by step coding tutorial on how to create a magnifying glass icon with pure css.

To begin we will create a very simple html markup. It will consist of only four divs, a main wrapper, the shadow background, the lens on the magnifying glass and the handle. See below for preferred markup.

<div class="main-icon-wrap">
<div class="shadow">
</div>
<div class="mag-lens">
</div>
<div class="mag-handle">
</div>
</div>

The CSS

The main wrapper will need a width and height of the same proportion and choose your preferred background color. To create the circle effect create a border radius style that is exactly half the size of the height/width. Position the wrapper relative to take into account the inner elements that will be positioned absolutely and finally you must hide the overflow. Optionally you can rotate the wrapper for the later part of this tutorial or you can come back and add this once all inner elements have been styled.

.main-icon-wrap{
margin:auto;
position:relative;
width:250px;
height:250px;
border-radius:125px;
background: #e3457f;
overflow:hidden;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

The lens of the magnifying glass icon will be position central to the wrapper with a height and width of 70px. Give the element a position of absolute and a border radius of 70px. The background should be the same color as the wrapper background.

.mag-lens{
width:70px;
height:70px;
position:absolute;
border:10px solid #000;
border-radius:70px;
top:45px;
left:75px;
background: #e3457f; /* Old browsers */
}

To create the lines inside the lens we will use a pseudo classes of :before and :after. Position the elements as absolute and at the specified pixels using top and left properties. the height will will be the length of the line width will be set using a border attribute. Finish by Rotating the lines to around 45 degrees.

.mag-lens:before{
content:"";
position:absolute;
left:30px;
top:15px;
width:0px;
height:25px;
border:1px solid #fff;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.mag-lens:after{
content:"";
position:absolute;
left:40px;
top:16px;
width:0px;
height:40px;
border:1px solid #fff;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

To create the main base of the handle position the element below the lens and with your css create a thin rectangle position absolutely.

.mag-handle{
position:absolute;
height:60px;
width:17px;
background:#000;
top:155px;
left:112px;
}

For the top of the handle, create a much smaller rectangular shape use a psuedo element :before and place it above the base. Use and white and black vertical gradient to create the centre divide. You can create your gradient using a css gradient generator like this one

.mag-handle:before{
content:"";
position:absolute;
background:#fff;
width:10px;
height:20px;
left:3px;
top:-20px;
background: #aebcbf; /* Old browsers */
background: -moz-linear-gradient(left, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
background: linear-gradient(to right, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 ); /* IE6-9 */
}

To create the shadow effect, style the elements height the same as that of the wrapper and the width as 150px, position it absolute and exactly half way across the wrapper horizontally. For the background color use an rgba colour of black with a one percent opacity.

.shadow{
width:150px;
height:250px;
position:absolute;
left:120px;
top:0;
background-color: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
}

Give the shadow more of a angular effect by using psuedo styles to change the shadow direction, you can create triangles using border widths and transparencies and give them the same background colours as the wrapper.

.shadow:before{
content:"";
top:212px;
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 0 0 200px;
border-color: transparent transparent transparent #e3457f;
} .shadow:after{
content:"";
top:0px;
right:0px;
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 170px 0;
border-color: transparent #e3457f transparent transparent;
}

The Full Code

<div class="main-icon-wrap">
<div class="shadow">
</div>
<div class="mag-lens">
</div>
<div class="mag-handle">
</div>
</div>



.main-icon-wrap{
margin:auto;
position:relative;
width:250px;
height:250px;
border-radius:125px;
background: #e3457f;
overflow:hidden;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}


.mag-lens{
width:70px;
height:70px;
position:absolute;
border:10px solid #000;
border-radius:70px;
top:45px;
left:75px;
background: #e3457f; /* Old browsers */
}

.mag-lens:before{
content:"";
position:absolute;
left:30px;
top:15px;
width:0px;
height:25px;
border:1px solid #fff;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.mag-lens:after{
content:"";
position:absolute;
left:40px;
top:16px;
width:0px;
height:40px;
border:1px solid #fff;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.mag-handle{
position:absolute;
height:60px;
width:17px;
background:#000;
top:155px;
left:112px;
}

.mag-handle:before{
content:"";
position:absolute;
background:#fff;
width:10px;
height:20px;
left:3px;
top:-20px;
background: #aebcbf; /* Old browsers */
background: -moz-linear-gradient(left, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
background: linear-gradient(to right, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 ); /* IE6-9 */
}
.shadow{
width:150px;
height:250px;
position:absolute;
left:120px;
top:0;
background-color: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
}

.shadow:before{
content:"";
top:212px;
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 0 0 200px;
border-color: transparent transparent transparent #e3457f;
}

.shadow:after{
content:"";
top:0px;
right:0px;
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 170px 0;
border-color: transparent #e3457f transparent transparent;
}

View the CODEPEN