Icon Filling Effect
comment 0

UI Idea: Icon Filling Effect

Icons are commonly used in user interface to communicate a message quickly and to support textual content. When done right, it serves more than eye candy and actually helps readers to maintain eye tracking as they scroll down a website. But what if we can produce icons with effects that transcend their usual static properties? Inspired by the cool icon filling effect of vertical timeline on Elliot Condon’s websiteSebastiano Guerriero from codyhouse showed us how to achieve the same effect with a little help from transparent icons. Though it requires some advanced CSS techniques, it’s worth to learn and is perfect for one-page website. Using this icon filling effect, you are now able to piqué readers’ interest and guide them from one section to the next. Well done, Sebastiano!

See how it’s done   View Demo

Filed under: CSS, User Interface

About the Author

Posted by

Sani Halid is a front-end developer at Stampede and is committed to clean and elegant code. Yet another gamer to join the pack, Sani is also the Editor at Constructs where he shares his daily CSS findings and other front-end development goods.

Leave a Reply