Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
icraft-websites

CSS box-shadow inside and outside

Recommended Posts

Hey there, is it possible to tween both shadow Inset and the outside shadow at the same time??

Link to post
Share on other sites

Hmm it should be possible, but it's looking a little odd to me:

// doesn't quite work
box-shadow: inset 0 0 2px 2px red, 0 0 2px 2px white;
TweenLite.to(spriteslider.slider, 3, { boxShadow: "inset 0 0 5px 5px blue, 0 0 5px 5px green" });

// works as though the blue shadow is inset
box-shadow: inset 0 0 2px 2px red, 0 0 2px 2px white;
TweenLite.to(spriteslider.slider, 3, { boxShadow: "0 0 5px 5px blue, 0 0 5px 5px green" });

Jack can probably shed some light on this.

  • Like 1
Link to post
Share on other sites

Sorry just realized I posted in Action script forum instead of JS. I was trying to apply an pulse effect using TweenMax and have the outside pulsing yet not the inside. As it I wish to apply the repetitive yoyo effect, This is what I have got

 

self.animationPulse = function(){TweenMax.fromTo('#current-level', 0.75,{
        boxShadow:"0px 0px 0px 0px #0066ff inset, 0px 0px 0px 0px rgba(0, 153, 255, 1)"
    },  {
            boxShadow:"0px 0px 30px 8px #0066ff inset, 0px 0px 30px 8px rgba(0, 153, 255, 1)",
            repeat: -1,
            yoyo: true,
            ease:Linear.easeNone
        });
    }
Link to post
Share on other sites

Got it, applying jamie jerffersons answer by removing the inset parameter allowed both the inset and outset shadows to pulse

 

self.animationPulse = function(){TweenMax.fromTo('#current-level', 0.75,{
        boxShadow:"0px 0px 0px 0px #0066ff , 0px 0px 0px 0px rgba(0, 153, 255, 1)"
    },  {
            boxShadow:"0px 0px 30px 8px #0066ff , 0px 0px 30px 8px rgba(0, 153, 255, 1)",
            repeat: -1,
            yoyo: true,
            ease:Linear.easeNone
        });
    }

 

fixed it.

Link to post
Share on other sites

Hello joshscorrar,

 

I made some tweaks to Rodrigo's demo example from above to make the outside pulsing yet not the inside, like you described you wanted 2 posts above..

 

My Example: http://jsfiddle.net/D2z2C/27/

 

This below could have been done with TimelineLite or TimelineMax ... but this just uses 2 tweens since you wanted only the outside box-shadow to pulse:

var t = TweenMax.to("#div1", 0.7, {
        boxShadow:"0 0 10px 10px green",
        ease:Linear.easeNone,
        yoyo: true,
        repeat:2
    }),
    t2 = TweenMax.to("#div1 div", 0.7, {
        boxShadow:"0 0 10px 10px red inset",
        ease:Linear.easeNone,
    }),
    btn = $("button");

btn.click(function(){
    t.restart();
    t2.restart();
});

Is that what you mean?

 

:)

  • Like 1
Link to post
Share on other sites

Close, I cleaned up your code to what I wanted yet when trying to tween only the shadow inset it tweens the inset instead unless I declare both inset and outset.

 

Here is what I wanted

 

http://jsfiddle.net/D2z2C/27/

 

I am trying now to only tween the shadow inset and it tweens the outside shadow instead

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×