box-shadow in Google Chrome

Discussion in 'Web Design and Development' started by StefSSU, Mar 9, 2011.

  1. StefSSU macrumors regular

    Joined:
    Jul 18, 2009
    Location:
    London
    #1
    Hi, need a little help from the web guru's.

    So my site has a gallery page, with a bunch of images. I've used css to get border-radius, reflections, etc. The css reflections however don't render in all browsers, Firefox being the most important one. So as a graceful degradation I added a box-shadow to make the images look better in Firefox/Opera. Comparing Safari and Firefox/Opera, this works perfectly - reflection / no shadow in Safari, and shadow / no reflection in Firefox/Opera.

    Google Chrome on the other hand, even though it uses webkit decides to render the box-shadow despite there being no -webkit- prefix. Is there any way to have the box-shadow display in FF/O but not in Chrome? The shadow kind of ruins the reflection.

    The website is temporarily hosted here - costantini.mw gallery
    While we're at it, the site is unfinished but some feedback on other pages and the design would be appreciated.

    Cheers guys,

    Stef
     
  2. elppa, Mar 9, 2011
    Last edited: Mar 9, 2011

    elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    This is just because Chrome is using a newer build of Apple Webkit than Safari 5. If you download the webkit nightly you will see box-shadow is picked up without needing the vendor specific -webkit prefix. When Safari 6 arrives you will have the same issue you have with Chrome. It will render the reflection and the shadow.

    Can't you just:

    [1] Use -webkit-box-reflect (as you do currently for Safari)
    [2] Include -o-box-shadow (for Opera)
    [3] Include -moz-box-shadow (as you do currently for Firefox)
    [4] Remove the box-shadow declaration

    So:
    Safari/Chrome: -webkit-box-reflect
    Opera: -o-box-shadow
    Firefox: -moz-box-shadow

    Surely that will be simplest way?

    I know it would be nice to just use box-shadow, but those vendor prefixes won't be deprecated anytime soon.
     
  3. StefSSU, Mar 9, 2011
    Last edited: Mar 10, 2011

    StefSSU thread starter macrumors regular

    Joined:
    Jul 18, 2009
    Location:
    London
    #3
    *slaps myself in the face*
    Of course, all I had to do was put -o- before the box-shadow... Don't know why I'd forgotten about Opera's prefix.

    Works great, thanks. Now, just to get Internet Explorer to render the page in a way that isn't completely ugly...

    Thanks for the help. Any thoughts on the design then?

    EDIT: Never mind, spoke too soon. It looks like -o-box-shadow doesn't work in Opera... For me, at least. Also Opera doesn't do the border-radius on the images any more (I believe it did do so). Not sure what's happening here.
     

Share This Page