Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Effects on CSS-Tricks

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #40656
    shon
    Member

    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!

    #113545
    JohnMotylJr
    Participant

    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/

    #113583
    TheDoc
    Member

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

    #113613
    shon
    Member

    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.

    #113682
    JohnMotylJr
    Participant

    @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 :)

    #113683
    JoniGiuro
    Participant

    based on John’s solution:

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

    #113693
    JohnMotylJr
    Participant

    @shon,

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

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

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.