The Pixel Perfect HTML Tag

 
 
 

How Pixel Perfection Led Me To Code

This blog post was first posted on Medium.

While redesigning my old portfolio landing page, I came across some issues. Minimal issues which get overlooked far too often.

It is a tag you see on many portfolios, but some are distorted on larger displays. It sends shivers up my spine imagining of comments from my previous mentors about anti-alias.

I recently read a post by Ohans Emmanuel about how he recreated the Medium clap. Which is why I thought “I should give his techniques a go!” Thank you, Ohans, for the inspiration.

 
 

Sketch

Sketch-window.png
 

First I designed the tag on Sketch and copied the the SVG code (which makes the process super simple)

 
 

Code Pen

Code-image.png
 

Secondary I copied the SVG code onto Code Pen and then made changes to the code.

 
 
 

Having difficulty changing the size of the tag on Code Pen was difficult, so I found an article with the answer. The answer was to delete a small snippet of code on the top line of code. With the help of the blog, a super crisp HTML tag was born into the digital world, which you can use here.

 
 
 

Conclusion

No matter how many times you export large PNGs, sometimes using programs such as Sketch and using code can be much more benefiting then bodging designs which have no responsive functions. It also reduces on page file size.

 
 
 
Harry Flaherty