Avatar with status indicator
Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements.
- Only the
<img>tag - No pseudo-elements
- Transparent gap
- Optimized with CSS variables
- Subtle animation on hover
@property --s {
syntax: "<length>";
initial-value: 0px;
inherits: true;
}
img {
--w: 170px; /* the image size */
--s: 12px; /* control the indicator size */
--g: 3px; /* control the gap (+ a default gap) */
width: var(--w);
aspect-ratio: 1;
padding: 0 calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2)) 0;
margin: 0 calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2)) 0;
outline: var(--s) solid #B90504;
outline-offset: -9e9q;
mask:
radial-gradient(#000 calc(var(--s) - 1px),#0000 var(--s)),
radial-gradient(#000 70%,#0000 71%) content-box subtract,
radial-gradient(
#000 calc(sqrt(2)*var(--s) + var(--g)),
#0000 calc(sqrt(2)*var(--s) + var(--g) + 1px));
/* clip-path is only needed to reduce the mouse interaction area */
clip-path: circle(calc(var(--w)/2 + var(--s))) content-box;
transition: --s .5s;
}
img:hover {
--s: 16px;
}See the Pen Status indicator using only an image element by Temani Afif (@t_afif) on CodePen.
We can easily change the position of the indicator by rearranging the margin/padding values.
.bottom-right {
padding: 0 calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2)) 0;
margin: 0 calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2)) 0;
}
.bottom-left {
padding: 0 0 calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2));
margin: 0 0 calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2));
}
.top-right {
padding: calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2)) 0 0;
margin: calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2)) 0 0;
}
.top-left {
padding: calc(var(--w)/sqrt(2)) 0 0 calc(var(--w)/sqrt(2));
margin: calc(-1*var(--w)/sqrt(2)) 0 0 calc(-1*var(--w)/sqrt(2));
}See the Pen Avatar with status indicator using one element II by Temani Afif (@t_afif) on CodePen.