Hi All Today I am going to teach you how to create circle images in your HTML pages.
In Good old days we had websites that displayed all images in the shape of SQUARE or rectangles and now its time to change it and make something new and cool.So, Lets try making circular images in HTML pages.
Well, You Might Have Seen that Websites like Google plus displays your profile image in a circular shape. Have you not felt this as cool. But, I Tell you This is Awesome and You can also Do the SAME
So This Trick can be done by applying a small CSS Property called Border radius
And for this you will have to use “ border-radius:50% 50% 50% 50%; “
See the Code Below
<html><head><style>#circle{border-radius:50% 50% 50% 50%;width:300px;height:300px;}</style></head><body><img src="skin-tone.jpg" id="circle"></body></html>
Now Save the Above file as Circle.html or anyname.html
Lets see How This Works
I am using an image “skin-tone.jpg” see the above code
You can see that I have declared an id called “circle” inside the <style> tag . Then I have set border-radius to 50% for all the 4 sides .When Each Side Has Border-radius of 50% then the image will automatically become a circle.
All you have to do is to assign this id to the image .then your image will become a circle...Hope Your Liked this....
0 comments:
Post a Comment