Skip to content

Instantly share code, notes, and snippets.

@MkShaman

MkShaman/Magic Avatar Border

Created December 16, 2015 07:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MkShaman/aeecb2ade12ce88ca5a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MkShaman/aeecb2ade12ce88ca5a1 to your computer and use it in GitHub Desktop.
Download ZIP
html and css transparent round frame at pictures
Raw
Magic Avatar Border
html code
/*----------------------*/
На картинке с белым фоном видно рамку:
<br><br>
<div class="img">
<img src="https://pbs.twimg.com/profile_images/458707688243728384/-GMWcyjZ_bigger.png">
</div>
<br>
На картинке с темным фоном рамку не видно:
<br><br>
<div class="img">
<img src="https://pbs.twimg.com/profile_images/1388813760/2_reasonably_small.jpg">
</div>
CSS code
/*----------------------*/
.img{
position:relative;
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}
.img img{
display:block;
width: 100%;
}
.img:after{
border: 10px solid rgba(255,255,255,0.5);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
border-radius:50%;
}
http://jsfiddle.net/kulakowka/435bxehq/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment