SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: css3 icons

Threaded View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    194
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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 ).

    Code HTML4Strict:
    <!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>
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •