Home > DeveloperSection > Forums > How to cerate Magnifying Glass using CSS?
Ankita Pandey
Ankita Pandey

Total Post:183

Points:1285
Posted on    January-28-2013 2:14 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1708  View(s)
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


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    January-28-2013 10:23 AM

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



Don't want to miss updates? Please click the below button!

Follow MindStick