I’m trying to make some icons, I have the magnifying glass below but it looks all aliased to me.
You’ll see in the attached image that it looks more aliased when it’s smaller. When I zoom in the browser view it looks less aliased but the border used to make the handle doesn’t have crisp edges. I’ve highlighted that in red.
So I’m wondering if I can make the circles smoother and the borders crisp / solid ( if that makes sense ).
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
#icons li{
float: left;
list-style: none;
margin-right: 10px;
}
#icons a{
display: block;
position: relative;
text-indent:-9999em;
}
#icons a:before, #icons a:after{
content: "";
display: block;
position: absolute;
}
.magGlass{
width: 36px;
height: 36px;
border: 3px solid #000;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
}
.magGlass:before{
left: 4px;
top: 4px;
width: 26px;
height: 26px;
border: 1px solid #000;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
/*-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);*/
}
.magGlass:after{
border: 3px solid #000;
border-width: 5px 3px 3px 3px;
border-top-color: #fff;
height: 17px;
width: 7px;
top: 26px;
left: 32px;
/*padding-top: 5px;*/
-webkit-border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<ul id="icons">
<li><a class="magGlass" href="#">Magnafying Glass</a></li>
</ul>
</body>
</html>