public
Last active — forked from maxhoffmann/dabblet.css

CSS3 Border-Radius with Border - Circle Avatars

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
/**
* CSS3 Border-Radius with Border - Circle Avatars
*/
/* General Styles */
 
body { background: url(http://subtlepatterns.com/patterns/white_texture.png);
font: 100 14px sans-serif;
color: #444555; text-shadow: 0 2px white;
text-align: center;
}
::-moz-selection { background: rgba(0,0,0,0.1); }
::selection { background: rgba(0,0,0,0.1); }
h1 { font-weight: 100; font-size: 2.7em; }
h3 { color: #555666; font-size: 1.6em; }
a { color: RoyalBlue; font-weight: normal; text-decoration: none; }
a:hover { color: CornflowerBlue; }
ul { width: 250px; margin: 0 auto; text-align: left; line-height: 1.8; }
 
/* Circle Avatar Styles */
 
.circle {
line-height: 0; /* remove line-height */
display: inline-block; /* circle wraps image */
margin: 5px;
border-radius: 50%; /* relative value */
border: 3px solid white;/* border width */
box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
transition: linear 0.25s;
}
.circle img {
border-radius: 50%; /* relative value for
adjustable image size */
}
.circle:hover {
transition: ease-out 0.3s;
transform: scale(0.8) rotate(20deg);
}
a.circle { color: transparent; } /* IE fix: removes blue border */
dabblet.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
<h1>CSS3 Border-Radius with Border</h1>
 
<p>Square image can be any size. Crossbrowser support. Minimal workaround.</p>
 
<h3>Small Avatars</h3>
 
<a href="http://twitter.com/dabblet" class="circle">
<img src="http://twitter.com/api/users/profile_image?screen_name=dabblet" alt="dabblet">
</a>
 
<a href="http://twitter.com/leaverou" class="circle">
<img src="http://twitter.com/api/users/profile_image?screen_name=leaverou" alt="Lea Verou">
</a>
 
<a href="http://twitter.com/paul_irish" class="circle">
<img src="http://twitter.com/api/users/profile_image?screen_name=paul_irish" alt="Paul Irish">
</a>
 
<a href="http://twitter.com/chriscoyier" class="circle">
<img src="http://twitter.com/api/users/profile_image?screen_name=chriscoyier" alt="Chris Coyier">
</a>
 
<a href="http://twitter.com/max_hoffmann" class="circle">
<img src="http://twitter.com/api/users/profile_image?screen_name=max_hoffmann" alt="Maximilian Hoffmann">
</a>
 
<h3>Big Avatar</h3>
 
<a href="http://twitter.com/max_hoffmann" class="circle">
<img src="http://behance.vo.llnwd.net/profiles9/545710/5a1ba5c679a44708c9b068d14cd1e7c8.jpg" alt="avatar">
</a>
 
<h4>Tested and works on:</h4>
<ul>
<li>Chrome 16</li>
<li>Safari 5.1</li>
<li>Firefox 7+</li>
<li>IE9 (no transition)</li>
</ul>
<p>Found a bug? Send me a tweet: <a href="http://twitter.com/max_hoffmann" title="switch to twitter">@max_hoffmann</a></p>
settings.json
JSON
1
{"view":"split-vertical","prefixfree":"1","page":"css"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.