#1
  1. No Profile Picture
    Doh!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Baton Rouge, LA
    Posts
    278
    Rep Power
    12

    Making DIV's look 3D using light with CSS


    Can someone point me to a tutorial that shows how you can use css borders, shadows, or whatever to make div's look 3D, or sunken in or something. Basically I want this div to look like a button, but only when the mouse is over it, and when it's depressed I want it to look like its sunken in. I know how to do all of this except the lighting and stuff, it looks kinda funny. So is there a tutorial that shows you the best way to make stuff look 3D? Thanks
    ...And the Lord did grin. First, shalt thou take out thy holy pin, then, shalt thou count to three. No more, no less.
  2. #2
  3. Twilight Thinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2003
    Location
    Oxford UK
    Posts
    656
    Rep Power
    38
    Can't you just use:

    border-style: inset/outset and switch them with JS event handlers?
    Cheers,
    Dusk

    My portfolio
  4. #3
  5. No Profile Picture
    Doh!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Baton Rouge, LA
    Posts
    278
    Rep Power
    12
    LoL, yes I guess I can.... I didn't even know there was such a thing. Thanks a lot!
    ...And the Lord did grin. First, shalt thou take out thy holy pin, then, shalt thou count to three. No more, no less.
  6. #4
  7. Twilight Thinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2003
    Location
    Oxford UK
    Posts
    656
    Rep Power
    38
    You're welcome, I like when probs are solved easily
    Cheers,
    Dusk

    My portfolio
  8. #5
  9. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    11
    Originally Posted by jaredh87
    Can someone point me to a tutorial that shows how you can use css borders, shadows, or whatever to make div's look 3D, or sunken in or something. Basically I want this div to look like a button, but only when the mouse is over it, and when it's depressed I want it to look like its sunken in. I know how to do all of this except the lighting and stuff, it looks kinda funny. So is there a tutorial that shows you the best way to make stuff look 3D? Thanks
    how do you do that? just with a hover pseudo class? or java script?
  10. #6
  11. No Profile Picture
    Doh!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Baton Rouge, LA
    Posts
    278
    Rep Power
    12
    Originally Posted by stinkoman
    how do you do that? just with a hover pseudo class? or java script?
    OnMouseOver and OnMouseOut

    the pseudo hover only works with anchors I beleive... and if they work with other stuff I would really like to know how!
    ...And the Lord did grin. First, shalt thou take out thy holy pin, then, shalt thou count to three. No more, no less.
  12. #7
  13. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    11
    Originally Posted by jaredh87
    OnMouseOver and OnMouseOut

    the pseudo hover only works with anchors I beleive... and if they work with other stuff I would really like to know how!
    They work with other elements in every browser but IE
  14. #8
  15. No Profile Picture
    Doh!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Baton Rouge, LA
    Posts
    278
    Rep Power
    12
    Oh, well I never use anything but IE, since it's the most popular.
    ...And the Lord did grin. First, shalt thou take out thy holy pin, then, shalt thou count to three. No more, no less.
  16. #9
  17. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Oh, well I never use anything but IE, since it's the most popular.
    Let's see; you're willing to write off 8–10% of your visitors/customers that use something other than IE? Do you also ignore accessibility issues, causing problems for another 3.5% of the populace that suffer some disability? After all, they're a definite minority—not worth the effort to design around standards compliant code.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo