In this tutorial we are going to explain How To Make Circle and Square Images Using CSS in your HTML Pages. To create Circle and Square images, all you need is some basic idea on CSS stylesheet. By this way you can provide better look and feel to your images in HTML.
lets get started and check out the below simple examples:
This is all about Circle and Square Images design Using CSS. Let me know your queries in comment section below.
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/How%20To%20Make%20Circle%20and%20Square%20Images%20Using%20CSS
lets get started and check out the below simple examples:
How to Create Circular Images With CSS
Here we have used CSS design to make circular design with help of border-radius property and set border radius to 50%.<html> <head> <style> .img-circle { border-radius: 50%; width:110px; height:110px; } </style> </head> <body> <img class="img-circle" src="img1.jpg" /> <img class="img-circle" src="img2.jpg" /> <img class="img-circle" src="img3.jpg" /> <img class="img-circle" src="img4.jpg" /> </body> </html>
How to Create Square Images With CSS
Here we have used CSS design to make square design with help of border-radius property and set border radius to 10%.<html> <head> <style> .img-square { border-radius: 10%; width:110px; height:110px; } </style> </head> <body> <img class="img-square" src="img1.jpg" /> <img class="img-square" src="img2.jpg" /> <img class="img-square" src="img3.jpg" /> <img class="img-square" src="img4.jpg" /> </body> </html>
This is all about Circle and Square Images design Using CSS. Let me know your queries in comment section below.
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/How%20To%20Make%20Circle%20and%20Square%20Images%20Using%20CSS
No comments:
Post a Comment