How to make the transparent hamburger gif? about responsive-nav.js

[IagoLast]

Something like this?

Remember to change the #toggle background in css:

background: #ddd url("/static/images/hamburger.png") no-repeat 50% 33%;

[andalusi]

Hi lagoLast,

thank you for answer me!

Maybe my question is not specific enough.
But I would like to know how to change the color of a transparent gif only with CSS?

In your example above the background color change, but the hamburger icon itself remain its grey color .

[fspoettel]

Manipulating images is not possible with CSS alone - at least not with any kind of acceptable browser-support ( See -webkit-filters but it is a non-standard, experimental approach so no valid option). What you could do with CSS however is to utilise pseudo-element-techniques or icon-fonts to generate a hamburger. Chris Coyier has a great roundup on different techniques: http://css-tricks.com/three-line-menu-navicon/ They require some CSS-knowledge and maybe some tweaking, but you will be able to change the color directly in CSS.

[andalusi]

Hey guys,

please see into the advanced demo folder on this project!
There is an transparent hamburger.gif icon.
In the css file (same folder) you can give this f***ing gif any color you want.
Try it yourself!

My question is, how to make this kind of transparent gif!

Hope its clear now.

Best, andalusi.

[fspoettel]

The gif in the advanced folder is made the other way round - instead of having a colored "hamburger" the space around the "hamburger" is colored in the gif - with the page background, which is #fff, leaving the hamburger transparent. So if you want to do it this way, you can edit the "hamburger" by setting multiple background in CSS with the first being a color as in the demo css. But you have to know the page-background, so it is not more dynamic. Fired up Pixelmator, maybe an image is clearer. The red is any background and the selected element is the actual gif: http://puu.sh/3ts18.png

[andalusi]

Ok, now it makes sense.
Wouldn't it be awesome making just a transparent .gif or .png and apply both color and background-color only with CSS? It would safe a lot of time because changing the color using Pixelmator or Photoshop its sometimes to complicated.

Anyway, thanks for your kind explanation.