KPC
Kevin Powell - Community•3w ago
i_lost_to_loba_kreygasm

Better way of replicating Instagram story circular ring?

I have this for now but it bugs me to know if there is a better way than mine https://codepen.io/sougataghar47/pen/jENogLv?editors=1100
Sougata Ghar
CodePen
instagram-story
...
2 Replies
Chris Bolson
Chris Bolson•3w ago
I would be tempted to do this with less HTML and use pseudo elements for the circle gradient etc. Something like this: https://codepen.io/cbolson/pen/KwPjVwo 
<div class='avatar'>
  <img src='_img_'/>
</div>
<div class='avatar'>
  <img src='_img_'/>
</div>
.avatar {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar::before,
.avatar::after {
  content: "";
  position: absolute;
  inset: -2.5px;
  z-index: -1;
  border-radius: inherit;
  background-color: white;
}
.avatar::before {
  inset: -5px;
  background: linear-gradient(to right, #c02425, #f0cb35);
}
.avatar {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.avatar::before,
.avatar::after {
  content: "";
  position: absolute;
  inset: -2.5px;
  z-index: -1;
  border-radius: inherit;
  background-color: white;
}
.avatar::before {
  inset: -5px;
  background: linear-gradient(to right, #c02425, #f0cb35);
}
(adding the code here as I will probably delete the codepen later)
ἔρως
ἔρως•3w ago
i wouldnt use z-index: -1 and would just use z-index: 1 on the image assuming that it works

Did you find this page helpful?