Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

SVG logo with colour change

How would I go about adding a logo in SVG format (along with png fallback) but have the option to change it's colour. I read this article on CSS-Tricks but I will be honest, I just can't seem to get my head around it.

Any help would be superb, thank you.

6 Answers

Mat Helme
STAFF
Mat Helme
Treehouse Guest Teacher

You could always do an image-mask using CSS3 and change the background on hover. Check out this site and hover over the twitter icon in the corner.

http://stopvisualpollution.com/

I used an image-mask to create this.

Mat - Is there a Treehouse course that teaches how to create parallax scrolling like you did in the example?

ps, there's a typo in the comment when you shrink the screen size. :)

Amy Coulson There is a one of video in the Bonus Content showing the scrolling and SVG's called Animating SVGs with jQuery's Scrollorama

Mat Helme Thank dude that seems like a pretty good option, I'll probably work with masks :) Gracias amigo

Mat Helme - When I got to the bottom of http://stopvisualpollution.com/ I was so sad to learn that it's not a real conference.