A rough guide to create a CSS Avatar
Disclaimer:
This is my first ever CSS image that I have worked on. There are a great deal of other amazing resources and tutorials on how to make CSS images, but I just wanted to provide an overview of how I accomplished mine. It won’t be in depth, there are bits that you will have to fill in yourself. My goal was to only create an image, and not an SVG to be responsive.
What I made…
…But not necessarily what you have to design.
The inspiration to create this I found whilst I was looking for some ideas for my first portfolio website, and I came across this image below.
If the owner of this image ever sees this or if someone finds the website it was on, please let me know so I can credit the creator/owner. I apologise, I forgot to get the link back then.
How I started:
I read this Medium article by Michael Mangialardi, I copied the code over from his CodePen and started adjusting it to fit my needs.
Tips before you start:
From the people that gave them to me.
Louise Flanagan informed to use Pseudo elements and set up your layers, also;
Think about your CSS in layers of what you will see and add styling from the back to the front. If you start with a basic head shape and set the overflow property to hidden, you can then keep adding elements inside of that head and they will be contained to that shape.
And Jhey Tompkins to use position: absolute all the time, also;
Think about your illustration in layers. That if you wanted to remove a piece, it wouldn’t affect anywhere else. For example, removing the glasses, would leave the head. The glasses could be in one containing element
I ended up setting my layers in classes so I can add the class to the element that I want for its layer, worked quite well. Also, another important attribute to add is overflow: hidden. It allows
The process:
Step 1: Container and ears
Start with your main container. This can be seen with the blue background that everything goes inside. Then I added the ears as they were going to be the bottom layer
Step 2: Head and facial hair
I then added the head over the top of the ears, seen below. There are 2 heads here (head and head-copy), the div ‘head’ has a pseudo element (circle) for the beard. Then the ‘head-copy’ is a shrunken down version which sits on top of the div ‘head’, which has a pseudo element for the moustache.
Step 3: Neck, mouth and nose
Next I added the neck underneath the head, it could be added at the same time as the ears, it doesn’t have to be at this time. But with our z-index layers it can be added in easily below the head. Another div with a clip path on it to make the ‘V’ shape on the neck as well. The nose is easy, just an off-skin-coloured semi-circle. Next we add the mouth, another semi-circle, and we include the teeth and tongue inside as well, using the overflow: hidden property we can position them how we need.
Step 4: Shirt
The shirt I had a problems getting it right. I am not using overflow: hidden on the box ‘background’ container as it chops off the top of the head, but if I didn’t put it on it wouldn’t chop the shirt off. So, I made a shirt container div, set the overflow property to hidden on it, made it the same size as the original container, then placed it over the top of it. That way I wouldn’t chop the head off, but could contain the shirt to the correct circle shape of the container. I then put that container underneath the layer of the neck. The shirt itself is a pseudo element, similar to the beard. Then a copy of of the shirt was made and lowered down to make the shoulder trim of the shirt. Below I have highlighted the shirt box element on the page.
Step 5: Glasses
Not as difficult as they might look. Made the circle using the online tool Fancy Border Radius. The lens is just a smaller version of the frame element with a CSS Gradient to make the reflective shine on the lens. A left and right class was then added to move the elements around. Then a few more small elements around to join the frames together.
Step 6: Hair
The hair was a little tricky to make it look a bit more normal. I ended up cheating a little and developing the semi-circle shape I wanted with Fancy Border Radius, and then it was layered below the glasses. The colour of this element is the colour of the hair. Then I positioned another skin coloured element to create the forehead. Then 2 large circles were used on either side of the forehead to create the different the bit where the hair changes from convex to concave. Overflow hidden is responsible for hiding the rest of those circles again. Lastly, a bunch of rectangle divs were placed around to create the little ‘hair-flick’ thing that can be seen highlighted in the image. These are just placed over the top of everything and are just positioned in place. Definitely a hack, but to create an image it didn’t matter.
Finito!!
Well done! If you managed to get this far through my hacky overview of how to create a CSS profile image for yourself, well done! You can find my code here on my CodePen. I didn’t cover absolutely everything as I felt it would be a little boring and some challenges should be left for yourselves. At the very least you have my code above anyway. If you have questions, feel free to hit me up on Twitter and check out my GitHub if you like too.
Hopefully there was a little insight into how to create the image, but I’m more than happy to help out if someone needs. Make sure to check out any of the CSS Image Master, Jhey’s CodePen, and Louise’s CodePen of The Girl With the CSS Earring, it’s genuinely amazing! I loved working on this thing, my partner has requested an image with her cats which will be my next image I create after a few small adjustments to this image for my V2. Hope you enjoyed.
Cheers.
simo_sultan.
