CSS: Circle Clipping a Photo

Long story short, this method is using the image/photo as a background image of a div element. Then we implement border-radius to circle-clip the particular div element.
This method can be applied for non-square/square sized image.
To get "properly centered" image, we need to put the background-position, background-size, and the div element dimensions correctly.
That wasn't short, right?

I have a charming looking baboon here. This is from Wikimedia Commons.
I re-sized it to 720px x 480px (desktop).
On mobile view, it has max-width of 100%. The img element, not the div which will be using the background-image.

This is an img element

Now, I want to make the baboon has a circle canvas - like profile photo you saw on Google Plus.

This is the (div) result

CSS

.clip-circle {
  background:url(URL-of-image) no-repeat;
  background-size:720px 480px;
  background-position:-160px 0px;
  height:480px;
  width:480px;
  border-radius:50%;
  overflow:hidden;
  margin:auto;
}

HTML

<div class="clip-circle"></div>

Then I want to make it like it was taken from an iPhone, or something similar. So, I'll put a lil box-shadow on it.

Looks like this

CSS

/*the exact same class as earlier*/
.clip-circle {
  background:url(URL-of-image) no-repeat;
  background-size:720px 480px;
  background-position:-160px 0px;
  height:480px;
  width:480px;
  border-radius:50%;
  overflow:hidden;
  margin:auto;
}

/*new specific class for box shadow*/
.box-shad {
  box-shadow:
    0 0 150px 20px #000 inset;
}

HTML

<div class="clip-circle box-shad"></div>

Probably the image is too big. Let's make it smaller, by re-sizing the background-size, followed by tinkering the size of box-shadows. Then let's put CSS photo filter effect on it.

CSS

/*create another class overriding the earlier classes*/
.smaller {
  /*these are the override-ers*/
  background-size:360px 240px;
  background-position:-80px 0px;
  height:240px;
  width:240px;
  /*smaller box shadow*/
  box-shadow:
    0 0 60px 10px #000 inset;
  
  /*photo filter without prefix*/
  filter: grayscale(1) blur(1px);
  /*photo filter with Webkit prefix; which can be omitted for the latest browser*/
  -webkit-filter: grayscale(1) blur(1px);
}

HTML

<div class="clip-circle box-shad smaller"></div>

Result
Use latest Chrome or Firefox to see the photo filter effect

The circle-clipping is all because of the border-radius property. We can omit the overflow:hidden and the background will still be cropped.

Why?

Because overflow property is applied for element inside the <div> tag (or any other HTML tag you're using). In the examples above, I don't have any element in the <div> tag. The image is as background of the <div> element. I put it there so that if you want to put another image or text inside the <div>, it (or they - the other element) will fit properly.

If you want to use this method for your blog post or website author photo, just change the URL-of-image with your image's URL. Then you can adjust the background positioning, the size, and the box-shadow (inset and default).

For responsive div element with custom background-image, we can also use JavaScript or use only CSS and really tinker it, so that the particular element fits relative to the current window size.

With this CSS3 color filter, we don't have to use offline photo editor to apply basic color filter. It's a fascinating CSS property.

Update
January 21, 2015
The latest version of Firefox (35.0) now supports CSS3 color filter
developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility

Hooray for Firefox developers!
_{Hip hip!}

Using inline CSS for the img element
We can also apply direct inline styling to an image. BUT, to make a perfect circle, we must have a square image (same height and width). For instance, that Mr. Baboon picture above, this what will happen if I put direct inline styling:

So, on that example above, which is oval shaped, I included style='border-radius:50%' in the <img> element. Not a perfect circle because the image isn't a square sized one.

The image element with inline CSS: <img src="the-image-url" style="height:480px; width:720px; border-radius:50%;" alt="Mr. Baboon oval">

A tool

This is a tool you can use on Port Raptor

Wanna say hi to Mr. Baboon?

Let's go to Mr. Baboon's place

Monkey Raptor

Monkey Raptor

Tuesday, June 18, 2013

CSS: Circle Clipping a Photo

No comments

Post a Comment