Back
A step-by-step tutorial on how to create a beautiful golden avatar using only one element.
<div class="avatar"></div>
.avatar {
width: 100px;
height: 100px;
border: 10px solid #d0ab35;
background-image: url('https://i.pravatar.cc/200?img=32');
background-size: cover;
border-radius: 50%;
position: relative;
}
Now we'll style the before pseudo element.
We'll set content and position to absolute with top, bottom, left and right set to -16 pixels.
This means that this element will be by 16 pixels larger on all sides that the div "avatar" element.
We'll set border radius to 50% to form a circle.
Now we'll set background image to linear gradient with some beautiful golden colors.
Using clip-path property, we'll create cut two squares, one on top and one on the right side.
By setting z-index property to -1, this element will go beneath the "avatar" div element, and it will look like a 16 pixels wide border.
.avatar:before {
content: "";
position: absolute;
top: -16px;
bottom: -16px;
left: -16px;
right: -16px;
border-radius: 50%;
background-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
clip-path: polygon(54% 0, 53% 5%, 59% 6%, 61% 0, 100% 0, 100% 60%, 94% 58%, 91% 67%, 100% 70%, 100% 100%, 0 100%, 0 0);
z-index: -1;
}
Now we'll style the after pseudo element.
We'll set content and position to absolute with top, bottom, left and right set to -11 pixels.
This means that this element will be larger that 11 pixels on all sides that "avatar" div element, and 5 pixels smaller that the before pseudo element.
We'll just set solid white border to 4 pixels with radius of 50% to form a circle.
.avatar:after {
content: "";
position: absolute;
top: -11px;
bottom: -11px;
left: -11px;
right: -11px;
border: 4px solid #fff;
border-radius: 50%;
}
And that's it.
<div class="avatar"></div>
<style>
.avatar {
width: 100px;
height: 100px;
border: 10px solid #d0ab35;
background-image: url('https://i.pravatar.cc/200?img=32');
background-size: cover;
border-radius: 50%;
position: relative;
}
.avatar:before {
content: "";
position: absolute;
top: -16px;
bottom: -16px;
left: -16px;
right: -16px;
border-radius: 50%;
background-image: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
clip-path: polygon(54% 0, 53% 5%, 59% 6%, 61% 0, 100% 0, 100% 60%, 94% 58%, 91% 67%, 100% 70%, 100% 100%, 0 100%, 0 0);
z-index: -1;
}
.avatar:after {
content: "";
position: absolute;
top: -11px;
bottom: -11px;
left: -11px;
right: -11px;
border: 4px solid #fff;
border-radius: 50%;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!