Almost 3d Blocks Using CSS borders

	Almost 3d Blocks - Using CSS borders
	Discussion by FirefoxRocks with 6 Replies. Last Update: July 8, 2008, 8:59 am

FirefoxRocks

It's kind of simple, but I think it is cool anyways. Using CSS border properties, you can make an element look 3D.

Here's the code:

CODE

li {
border: solid #000;
border-left-width: 1px;
border-bottom-width: 1px;
}

In this case, I have styled the list-item element to have a solid black border. The left and bottom side will only be 1px thick in order to make a difference between those and the top/right borders.

This line, border: solid #000 , has no width set. I figured out that most browsers default to a 3px border with an unspecified width (give or take a few pixels). By setting the left/bottom border to 1 pixel, it will give the right/top borders a thicker look, creating a 3D effect.

A change you can make to this is instead of thin left/bottom borders, you can have thin right/bottom borders. They will now look to be "pointed" left. I'm thinking that it will look nicer with right-to-left pages, but I'm not sure.

I have found that setting the top border to be the thin one doesn't look as good as this is intended to create a visual effect, and most people read downwards instead of upwards.

Experiment with CSS and you'll find really cool things you can do!

(This is compatible with all CSS supporting browsers.)

Sun May 25, 2008 Reply New Discussion

Mordent

I haven't tried that bit of code out yet, but on first inspection I'm sure there are more "standard" ways of making things look 3D. For example, this page lists a whole stack of border styles (groove, ridge, inset and outset all containing "Defines a 3D <###> border" as the first part of their description).

From past experience, the borders they give are often all you really need. Still, how that compares with your suggested style I'm unsure of. I might try it out tomorrow morning and give a little more feedback then.

Sun May 25, 2008 Reply New Discussion

FirefoxRocks

I've reviewed that list and basically it all comes down to appearance and control. I mean groove looks like something has been imprinted with a stamp, and inset and outset have their own unique way of popping in (or out). But by using my technique, you can almost emulate the 3D effects used in some versions of Microsoft PowerPoint.

Mon May 26, 2008 Reply New Discussion

Jeigh

Yea it's amazing what css can do when you get creative. There are a lot of built in things but a ton of little tricks like you did that present some interesting and quite great results if you just use the available customizations in creative ways and combinations. I know I've personally used endless combinations of things to get weird results just because I was too lazy to look up the more standard ways to do things or to make my own way look a little different then the 'normal' way to do it. If you can find a custom way to do something using CSS, goto town haha.

Mon May 26, 2008 Reply New Discussion

TavoxPeru

QUOTE (FirefoxRocks)

It's kind of simple, but I think it is cool anyways. Using CSS border properties, you can make an element look 3D.

Here's the code:

CODE

li {
border: solid #000;
border-left-width: 1px;
border-bottom-width: 1px;
}

Some years ago when i work with Fox Pro, I remember that for boxes needed on screen you create it by drawing manualy each one and setting things like its border colors and using an almost similar technique to have a 3D look.

Instead of yours i prefer this one:

CODE

li {
font-size: 0.75em;
list-style-type:none;
margin:0px 0px;
padding:0px 0px;
border: 2px solid #000;
border-left:1px solid rgb(192,192,192); border-top: 1px solid rgb(192,192,192);
width:20em;
text-align:center
}

The list-style-type determines which list item marker will be used and setting it to none hides the list item market of each item. If you want to separate with some space between each list item simply increase the margin to 10px 0px.

Also, if you want to add an hover effect you can do it using a little javascript function that for example reverse the borders.

Best regards

Thu May 29, 2008 Reply New Discussion

FirefoxRocks

QUOTE (TavoxPeru)

CODE

That would be good if you actually want the bullet/number to be hidden, but the point is that this could have been applied to other elements such as paragraphs, divs, etc. Also, I used minimal code to avoid confusion in the example.

Mon Jun 2, 2008 Reply New Discussion