SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Succotash's Avatar
    Join Date
    Sep 2003
    Location
    USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Odd Shaped Boxes... HOW?

    Hi, everybody!

    I'm in LOVE with the way a couple of sites incorporate paralellograms, rhombuses (rhombii?), and your general run-of-the-mill mishapen boxes.

    Anywho, here's a coupla sample sites:
    http://www.spacegirl.com -- RANDOM ORDER
    http://www.aceshigh.com -- SIMPLE CURVED MENU
    http://www.csszengarden.com/?cssfile...040.css&page=0 --FABULOUS!

    So, now that you see what I'd like to do, I have to tell you: I have practically NO CSS PROGRAMMING experience. But, I do understand the theory, what it is, what it can do, and why it's better than tables. I just need to know what it is that can make a box go crooked.

    With that said, thank you, and hopefully I can get that site up by Christmas!


    Sufferin' Succotash

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    http://meyerweb.com/eric/css/edge/

    I'd suggest taking a look at the "Curvelicious" and "Slantastic" examples, which will help you understand how to implement what you're after .

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those are all done with using images at the top and bottom of the normal boxes to give the impression of odd shaped boxes. For instance, on the 'spacegirl' site:

    Box's content here
    In all honesty, you don't necessarily need to use CSS to so that, however (and the spacegirl and Aces High sites don't). You can if you want to (and you probably should), but it's not a prerequisite for that style of design. :-)

    ~~Ian


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •