SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: css3 icons

  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

  2. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi sessions,
    Interesting problem!

    I think the slanting edges are unavoidable because of the border slants character 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:
    HTML Code:
    <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:
    Code:
    ...
    #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 css3pie or IE-CSS3?
    _________
    *) Apparently browsers round decimal pixels before they go over to zoom.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    There are already some nice examples of CSS3 icons online. E.g.

    http://one-div.com/

    http://nicolasgallagher.com/pure-css-gui-icons/demo/

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    194
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    In the meantime the small gaps at the bottom of the handle can be closed.
    Thanks for taking a look. What code above closes the small gaps at the bottom of the handle?


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
  •