icons filling effect
July 25, 2014 | 38 Feedbacks

Icons Filling Effect

An eye-catching filling effect for your icons, that can be used to make a simple page look cool and dynamic.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Sometimes you just want to create something cool. Maybe for one of those pages – about us, our history etc – where you want to come up with something unique to support your brand. This effect can help you design a cool web page with just few icons.

The inspiration: some of our users suggested us to take a look at Elliot Condon beautiful portfolio, and create something inspired by the filling effect of the vertical timeline. We did it! Another great example that uses a similar technique is the Macaw 1.5 release page.

Creating the structure

Before diving into the code, I’m gonna try to explain what’s behind this resource. There’s no advanced CSS technique, it’s all about creating the right assets/icons and play with elements positioning. I started by creating some icons from scratch in Adobe Illustrator. Now what’s important is to make transparent the area of the icon you want to fill:

animation example

This way you just need to place the illustrations on top of a colored section, then move them. In our specific case the icons move with the scrolling of the page, the colored boxes are in fixed position, underneath.

Just to make sure this is 100% clear, I put together this quick animation to show you the animation process:

icons filled effect animation

That said, the structure is just an unordered list. I created 2 empty list items that will be used to create more space on top and at the bottom of the content.

Adding style

The 2 colored boxes underneath have been created as ::before and ::after pseudo-elements of the body. As you can see, I added a CSS3 transition to one of them, because we are going to change its color in jQuery while the content is scrolling. The icons are always ::before selectors. Since the separation line below the icons – another .svg file –  has to be responsive and change its height according to the content, I added it as a pseudo-element too, with a distance from the top equal to the icon height.

Events handling

The additional effect we wanted to achieve is the change of the filling color while scrolling.
In order to do that,  for each .cd-service list-item we created a class for the body element:

It means that, if you have n .cd-service list items , you have to create (n-1) classes for the body.

When user starts scrolling, as soon as the .cd-service-2 is visible in the viewport we want the icons filling color to change (that’s the first filling color change) so we assign the .new-color-1 class to the body. The same is done for all the other .cd-service-n sections.

Finally, when a new .cd-section is visible in the viewport, we assign it the .focus class to highlight its content.

Changelog

Jul 25, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • R.

    Very nice! Saw something similar on Elliot Condon’s site (http://www.elliotcondon.com/) and was curious as to how it was done.

  • http://soyg.us/ G. Andrés Ibarra

    Thanks again for this tutorial. I know how to work with Adobe Illustrator but how should I export the transparent SVG icons? Should they have a fixed width? Because you cannot control the width of SVG through pseudo classes right?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hey @gandresibarra:disqus, I just save as a .svg (unchecking the “responsive” option). Then the svg file can work as an img element: you can give it a fixed width, or you can give it a max-width: 100% and make it responsive. In this case I used a fixed width because, due to the overlapping of icons over colored boxes, I could see the colored boxes border at some viewport sizes

  • Deryck Henson

    That animation showing the page being put together was the best thing ever. Explained the entire article in 5 seconds without any reading.

  • http://heartsuicide.tumblr.com Helena

    Very smart! Have always wondered how it works. Thanks.

  • Daniel

    HI ! Very good work and I hope that I’ll see more. But I have one question :

    1. Always I seeing that you use font size in px and in rem in the same time, so what’s the scope ?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hey Daniel, using rem is a smart way to handle font sizing, but it’s not supported on all browsers:

      http://caniuse.com/rem

      So what we do is: we set the font size in pixels first. Browsers that don’t understand rem will stick with pixels. Browsers that do understand rem will overwrite the pixel value with the rem one. This is achieved very easily using a mixin in sass (if you don’t use sass, I suggest you to take a look at it ;))

  • Daniel

    Thanks very much for response. 10/10 for this amazing tutorials and for Cody team :)

    • Daniel

      Ah, I forgot to give it reply …. :)

  • http://www.linkedin.com/in/andrewduffyjournalist Andrew Duffy

    Great new addition to the library. Awesome work Cody!

    • http://codyhouse.co/ Sebastiano Guerriero

      Thanks @Andrew_Duffy:disqus!

  • http://jadlimcaco.com/ Jad Limcaco

    Really liking this man. Great work on this site btw.

    • http://codyhouse.co/ Sebastiano Guerriero

      Glad to hear that @jadlimcaco:disqus ;)

  • http://about.me/kenw Ken Wallace

    Nice!

  • Abdul-Rafay Shaikh

    This is Awesome

  • http://camgould.com/ Cam

    Nice and subtle. I like!

  • Omar Avalos

    Wow! such a ingenious example!

  • http://androidappsapkdownload.com/ Android Apk File Download

    Wow… amazing effect just using CSS and HTML CODE … superb. live it. i always found some interesting stuffs over here. thanks

  • http://www.adamellsworth.io/ Adam Ellsworth

    Delightful! Absolutely novel and easy to approach solution. Thanks for taking the time to put this post together.

  • Rorisang

    This Is Awesome !!! Im loving the site as well !!!!!

  • tmuter

    Wow, great effect. Can you tell me how did you do that animated gif? What software did you use? http://codyhouse.co/wp-content/uploads/2014/07/icons-filled-effect-animation.gif?

    • http://codyhouse.co/ Sebastiano Guerriero

      After Effects

  • http://www.thenerodesign.com Marco Grimladi

    Really cool I did a similar effect in 2012 with this part of this website

    http://www.lottomdg.it/8mdg.html

    anyway really cool :)

  • tabblack

    Great….

  • Ahmed Riahi

    no comment great job carry on :)

  • Jonathon Senterfitt

    This is a must have. Thanks guys!

  • Huy Le

    AWESOMEEEEE!!!! I love it

  • Dom

    Hi Sebastiano
    I was wondering if you can swap the function for any element, like – function divBackground(itemsTopValues) {

    Thankyou

  • http://mrisra.net/ ياسر نجيب

    Awesome effect

  • Eva

    Hi there,
    I love your effect, I am using it in my page. Thank you for creating it. I’ve got a question for you though. I am incorporating this effect into a bootstrap page and when I shrink the screen to the responsive devices version the colored boxes leak slightly through the background. Would you know how to fix it? Or what’s the problem?
    Thanks a lot in advance!

    • Eva

      I figured it out. You just need to keep all images same size as their images. If you’re off, the effect breaks. Looks like only certain people get support on here :-(

      • dom_1080

        Hi I think I’m having a similar problem – could you elaborate please? Thanks

  • Inga

    hello! Thanks for your work. Pls, help me: i need this effect only for 1 div, not for all page. What i need to change?

    • http://codyhouse.co Claudia Romano

      Hi Inga, each block is a list item inside the ul.cd-container. You should try removing the elements you don’t need. Hope this helps!

  • Alessio Cangemi

    Hi great job! Just a question if I wanted to put the entire portfolio in a section rather than in the body, how i can fix the background color between section and the ul tag?

  • Isabel

    Does anyone try to do this effect in WordPress?

  • http://chuquangtu.com/blog Chu Quang Tu

    Very interesting effect and clear tutorial. Thanks for being awesome as usual (y)

  • Abhishek Gupta

    Thanks for tut Sebastino. But I’m stuck in making transparent svg icons. I have downloaded some svg icons from flaticon.com. But I could get around to make outline transparent of svg with background. How did you make svg icons?