HOW TO CERATE MAGNIFYING GLASS USING CSS?

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
 2078  View(s)
Ratings:
Rate this:
Hi Everyone!

I'm creating webpage in HTML. I want to create Magnifying Glass using css for my webpage. Can you help me?

Thanks in advance
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: How to cerate Magnifying Glass using CSS?

    Hi Ankita!


    You can try this css

    <Style type="text/css">
    #magnifying-glass { font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid #CC33CC; position: relative; border-radius: 0.35em; }
     
    #magnifying-glass::before { content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: #CC33CC; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
     </script>

    You get more css shapes from given below link

    http://www.mindstick.com/Articles/099ce3c3-07f3-4f1c-a4b4-57be48e39695/?The%20Shapes%20of%20CSS


Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!