DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Designyff
Designyff

Posted on • Originally published at designyff.com

Beautiful goldish avatar using only one element - A step-by-step tutorial

Tutorial on how to create a beautiful golden avatar using only one element.

Goldish Avatar

HTML

For HTML, we need only one div element with class "avatar".

<div class="avatar"></div>
Enter fullscreen mode Exit fullscreen mode

CSS
For CSS, first we'll style the "avatar" class.

We'll set width and height of 100x100 pixels with border set to 10px goldish solid.

I'll just set a background image that I found on google and set the size to cover.

To form a circle, simply set border-radius property to 50%.
Lastly, we'll set position to relative.

.avatar {
    width: 100px;
    height: 100px;
    border: 10px solid #d0ab35;
    background-image: url('https://dl.memuplay.com/new_market/img/com.vicman.newprofilepic.icon.2022-06-07-21-33-07.png');
    background-size: cover;
    border-radius: 50%;
    position: relative;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find video tutorial and full code here.

Thanks for reading. ❤️

Top comments (0)

🤔 Did you know?

🙌 DEV has a variety of tags to help you find the content you like. Find and follow your favorite tags