css3 icons

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>

Hi sessions,
Interesting problem! :slight_smile:

I think the slanting edges are unavoidable because of the [U]border slants character[/U] of css-borders.
But if you paste another :before and :after, with a higher z-index, you can mask it more or less. In the meantime the small gaps at the bottom of the handle can be closed.
As a hook, in the html a <span> can be added:

<ul id="icons">
     <li><a class="magGlass" href="#">Magnifying Glass<span></span></a></li>
</ul>

Then in the css can be added something like this:

...
#icons a:before,
#icons a:after,
#icons a span:before,
#icons a span:after {
       content: "";
       display: block;
       position: absolute;
}
.magGlass span:before {
    width: 3px;
    height: 3px;
    top: 31px;
    left: 33px;
    border-top: 18px solid black;
    z-index: 2;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.magGlass span:after {
    width: 3px;
    height: 5px;
    top: 23px;
    left: 40px;
    border-top: 18px solid black;
    z-index: 2;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

But: Firefox, Chrome, Opera, Safari and IE9 & IE10 only. No show in IE8 (the WinXP users!). Maybe with [U]css3pie[/U] or [URL=“http://fetchak.com/ie-css3/”][U]IE-CSS3[/U]?


*) Apparently browsers round decimal pixels before they go over to zoom.

There are already some nice examples of CSS3 icons online. E.g.

Thanks for taking a look. What code above closes the small gaps at the bottom of the handle?