Bummer! You must be logged in to access this page.

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

Posted by Adam Soucie
Adam Soucie
Courses Plus Student 8,710 Points

CSS Reflections

I know Reflections aren't supported by all browsers, but I thought Safari was supposed to support them.

I can get some of the functionality to work, but not all of it. The basic text version works, as does changing the offset, but when I add the additional parameters and/or try to reflect an image at all, nothing happens.

Anyone else having this issue?

3 Answers

James Barnett
James Barnett
39,199 Points

Here's a working demo tested on Chrome 24 on Windows 7 and Safari 5.1 on OS X.

Reflections aren't part of the CSS3 spec instead they are Webkit-only customization. So they will only work with Chrome & Safari.

2 great references for CSS3:

Test Code: http://css3clickchart.com/#reflections

Browser Support: http://caniuse.com/#feat=css-reflections

Adam Soucie
PLUS
Adam Soucie
Courses Plus Student 8,710 Points
Adam Soucie
Adam Soucie
Courses Plus Student 8,710 Points

Thanks, James! On the gradients attempt, I must have missed either a comma or a parenthesis, because it is working for me now.

While reflections & gradients now work, I am still having some issues where my output isn't matching up with Nick's, despite having the exact same code. I have two specific issues:

  • I have to use different offset values to get the same appearance. I've chalked this up to updates to the browser, etc, and is ultimate no big deal.
  • The box mask reflection at the end of Reflections 1 is not working at all. As James's provided sample doesn't use this method, I have no way of testing if my code is wrong.

Anyone else having this issue?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Adam - Post an example of your code using codepen.io so we can see the bigger picture.