18 March 2013

How To Make Rectangular Image To Rounded Image With CSS

Image is an important part of your blog post and a blog post should contain atleast one image in appropriate position. Appearance of image should also be taken into account that's why previously Blogger launched light box service, a light color shadow around images, option to improve image appearance. Now here we are talking about a trick that makes your images to round in shape with few lines of CSS code.

You can apply these rounded image technique to all the images or you can use it for some specific image it is up to you.

You can also done SEO of your images from here.

How To Convert Rectangular Image To Rounded Image

If you are interested to make a particular image rounded then the corresponding CSS code is given below.
 
<style type="text/css">
.circle
    {
  width: 150px; 
  height: 150px;
  border-radius:99em;    
 -moz-border-radius:99em;  /* for firefox */
 -webkit-border-radius:99em; /* for chrome and safari */
  -o-border-radius: 99em;  /* for opera */
   
}
</style>
Now the images with CSS id circle will have rounded corner, you have need to add an image and apply a circle class to it. Width and height values (150px)  in above CSS code should be same to make a circle.

How To Make Image Rounded In Blog Post

To use above CSS code we can also make image rounded in blog post.
  1. Go to Blogger dashboard.
  2. Create a new post.
  3. Include an image that you want to use in your blog post and see the source HTML code of blog post.
  1. Add above CSS code at top most position.
  2. Now find <img tag, which contain image that you want to modified, and apply a class circle in it further remove width and height attribute from <img> tag.
<div class="separator" style="clear: both; text-align: center;">

<a href="http://4.bp.blogspot.com/-epuQx8u5SmY/UUbpuvDmEvI/AAAAAAAACwI/AWFpH-7PUYU/s1600/blogger-post-editor.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img border="0" height="49" src="http://4.bp.blogspot.com/-epuQx8u5SmY/UUbpuvDmEvI/AAAAAAAACwI/AWFpH-7PUYU/s320/blogger-post-editor.JPG" width="320" />
</a>
</div>
  1. Change the above code to.
<div class="separator" style="clear: both; text-align: center;">

<a href="http://4.bp.blogspot.com/-epuQx8u5SmY/UUbpuvDmEvI/AAAAAAAACwI/AWFpH-7PUYU/s1600/blogger-post-editor.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img class="circle" border="0" src="http://4.bp.blogspot.com/-epuQx8u5SmY/UUbpuvDmEvI/AAAAAAAACwI/AWFpH-7PUYU/s320/blogger-post-editor.JPG" />
</a>
</div>

What we have changed?

  • Remove height and width attribute from <img> tag and you have to control the dimensioning of image through CSS width:150px and height:150px properties.
  •  And apply a circle class in it.
In similar way you can make another images rounded.

More articles

4 comments:

  1. Thanks for sharing this code. I found it last days. But not found me. Thank you very much for valuable information.

    ReplyDelete
  2. It helps me as very much. Because i am newbie in web designing and I make web sites for curtain service in these days. I like to add like this circle icon.

    ReplyDelete
  3. Youre so cool! I dont think Ive read anything like this before. So good to find somebody with some original thoughts on this subject. Thanks for starting this up. This blog is something that is needed on the web someone with a little originality. Good job for bringing something new to the internet!
    cross necklaces

    ReplyDelete
  4. Verify your car or truck operator handbook to learn just what gas octane rolex replica sale the car's powerplant wants next acquire that. Continue to keep the auto tires overpriced for the appropriate ranges. Under-inflated auto tires ensure it is more difficult to your automobile to go later on, this means the powerplant makes use of a lot more gas to keep up velocity. Reduce the strain! More substantial autos utilize a lot more gas, thus clear our own needless fat inside the voyager pocket or perhaps shoe prior to deciding to struck the trail. Utilize the A/C modestly. Mid-air conditioner louis vuitton replica hats added insert around the powerplant driving a lot more gas being employed. Maintain your house windows sealed. Wide-open house windows, specifically with interstate rates, boost aerodynamic lug as well as the end result can easily be up to any 10% decline in gas economic system. Steer clear of extended idling. In the event you foresee getting ceased regarding multiple second, shut down the automobile. Contrary to everyday opinion, restarting the automobile makes use of a smaller amount gas as compared to permitting gucci replica lazy. Keep inside of published velocity restrictions. The particular more quickly an individual push, the harder gas you may utilize. As an example, traveling with seventy-five mph as opposed to 65 mph, boosts gas intake simply by 20%. Check the particular engine's belts on a regular basis. Try to find hermes birkin replica or perhaps absent parts or perhaps sectors. Used belts can have an effect on the particular powerplant efficiency. Hold the gas filtration altered each 10, 000 a long way to stop corrode, soil as well as other pollutants coming from coming into the particular prada replica handbags method.

    ReplyDelete

Related Post