Hi,

I want to know how Doctype's avator images have rounded corners. I saw a strange url in firebug so I copied and pasted the url into the address bar and hit enter, then I saw that the image appears without round corners so it's not rebuilt on the server. I already can do this with php but the result image isn't sharp. I hope I can learn this technique :) Sorry about my bad english :)

5 answers

5
points

They're doing it with CSS 3:

.gravatar {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-radius: 5px;
}

It only works in Firefox and WebKit-based browsers like Safari and Chrome, though. You can read more about border-radius and other CSS 3 features here.

Answered over 7 years ago by Guillermo Esteves
  • Yeah i Know That But Try To inspect your avator on this site and check the background url . it contain 5 png images . mehdi over 7 years ago
  • I only see one background image: <div class="gravatar" style="background-image: url(http://gravatar.com/avatar/2a3dc8abcfcca6b9481704a12f0ab235.png?d=http%3A%2F%2Fdoctype.com%2Fimages%2Fblank-gravatar-80.png%3F1&amp;r=PG&amp;s=80)"> (The second URL you see there is Doctype's default avatar, which is returned by Gravatar's API if the user hasn't set up his own avatar.) In the end the rounded corners seem to be done entirely in CSS. Check the site in Internet Explorer and you'll see they are square. Guillermo Esteves over 7 years ago
  • They are square in IE and Opera. Rich Bradshaw over 7 years ago
orta 244
1
point

It could be done via javascript ala: http://www.malsup.com/jquery/corner or they could use a png overlayed on top of the original image to give the effect of a round corner, this is just going into photoshop and creating a square and then cutting out the area you want to show the picture and turning that into a 24bit PNG. If you do that you can create a div with the profile img as the background and inside the div as the content inside.

Answered over 7 years ago by orta
1
point

If you don't want to use JS or CSS3 you can always use the old technique of Mountain Top Corners. The article linked to uses 1 bit alpha transparency with a GIF but you could use a PNG nowadays (maybe swapping the PNG for a GIF in IE6 if you want to be nice). All of the mentioned techniques have pros and cons so a combination of them may be the most robust solution.

Answered over 7 years ago by Jens Hedqvist
1
point

you could get clever and have the avatar as a background on a transparent png image frame.

Or absolutely position a transparent png image (with the middle bit empty/transparent) over the top of the image that needs the rounded border.

Answered over 7 years ago by Tony Crockford
orta 244
0
points

on this site, they use CSS 3 also: http://www.css3.info/preview/rounded-border/

Answered over 7 years ago by orta
  • aaa i don't think this site using javascript do accomplish that mehdi over 7 years ago