Forums

shon

Hey there,

Thanks for providing such a well produced resource on CSS.

I have been scouring the site on learning about some of the effects used on this site. They seem simple enough but I can't seem to grasp them.

I'm particularly interested in the multiple solid shadows on the main content and the orange title box at the top-left of this site.

The other is the neat buttons (blue "log in" and "sign up", and green "start new discussion").

Please forgive me if these have been covered, maybe someone could point me in the right direction.

Thanks very much!

JohnMotylJr

You can use Google Chrome's 'inspect element' feature to browse the styles on this site.

div {
    height:40px;
    width:409px;
    background: #799972;
    display: block;
    position: relative;
    margin:20px;
    box-shadow: 
        1px 0px 1px #4A6045,
        0px 1px 1px #617D5B,
        2px 1px 1px #4A6045,
        1px 2px 1px #617D5B,
        3px 2px 1px #4A6045,
        2px 3px 1px #617D5B,
        4px 3px 1px #4A6045,
        3px 4px 1px #617D5B,
        5px 4px 1px #4A6045,
        4px 5px 1px #617D5B,
        6px 5px 1px #4A6045;
}

http://jsfiddle.net/john_motyl/fF2uY/

TheDoc

As @John has pointed out in his code example, the box-shadow property is very powerful!

shon

Thanks, this is great help.

And then, how exactly do I achieve the mouse down effect so the button appears to be pushed down and not the shadow moving up.

Thanks again. Sorry tried inspecting but I am having a hard time decoding it all.

JohnMotylJr

@shon,

Simply use the :active selector. That means when the 'mousedown' event is fired, it will run some css for you. You can adjust the width of the box-shadow or color (whatever you want) to give it that 3d or depression look.

http://jsfiddle.net/john_motyl/9BMfk/

Or, you could always use jQuery for mousing events, but for now.. Stick with the css :)

JoniGiuro

based on John's solution:

http://jsfiddle.net/9BMfk/5/

JohnMotylJr

@shon,

JoniGiuro makes more sense for what you are trying to accomplish. Thanks @JoniGiuro.

Without border and different box-shadow on :active state.

treehouse : what would you like to learn today?

Forums

[Solved] CSS Effects on CSS-Tricks

http://jsfiddle.net/john_motyl/9BMfk/

http://jsfiddle.net/john_motyl/AJJe8/