Inner Box Shadow Effects

[jeffdeville]

The original article writeup had this demo: http://css-tricks.com/examples/MovingBoxes/

The demo includes a shadow on the left and right sides of the scrollContainer that look really slick. Is there any way to pull this off w/ the current plugin?

Thank you!

[Mottie]

Hiya, it is possible to add it back. I smashed my head into my desk before trying to figure it out, but for some reason today it was easy o.O LOL... I'll add this in the next update.

[Mottie]

Actually if you just add "inset" to the box-shadow css definition, you can move the outside box shadow to an inside box shadow.

.mb-slider {
    width: 900px; /* default, this is overridden by script settings */
    border: 5px solid #ccc;
    margin: 0 auto;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    box-shadow: inset 0 0 10px #888;
    -moz-box-shadow: inset 0 0 10px #888;
    -webkit-box-shadow: inset 0 0 10px #888;
}

[jeffdeville]

Cool, that'll work. Thanks for the help!

On Fri, Apr 8, 2011 at 9:31 AM, Mottie < reply@reply.github.com>wrote:

Actually if you just add "inset" to the box-shadow css definition, you can move the outside box shadow to an inside box shadow.

   .mb-slider {
           width: 900px; /* default, this is overridden by script

settings */ border: 5px solid #ccc; margin: 0 auto; position: relative; left: 0; top: 0; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; box-shadow: inset 0 0 10px #888; -moz-box-shadow: inset 0 0 10px #888; -webkit-box-shadow: inset 0 0 10px #888; }

Reply to this email directly or view it on GitHub: https://github.com/chriscoyier/MovingBoxes/issues/23#comment_973683

[Mottie]

Actually, I just updated the plugin... IE will now have a separate stylesheet and use images, like the original version. Whereas all other browsers, including IE9, will use the css3.

[jeffdeville]

wow. Impressive, man. Thanks! great stuff!