Jump to content
Search Community

CSS box-shadow inside and outside

icraft-websites test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 comment
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 comment
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 comment
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 comment
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.
×
×
  • Create New...