4 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 37 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Have a look at this great CSS example http://www.designdetector.com/tips/3DBorderDemo2.html by Chris Hester of Design detector

Thanks Christine and Daniel for pointing it out.

nix
nix's picture
Offline
Enthusiast
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Last seen: 10 years 7 weeks ago
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Timezone: GMT-4
Joined: 2003-08-12
Posts: 159
Points: 0

CSS Border example : House

How did he do that? I looked at the code but all I see is #brickso-and-so. it looks like he defined everything in css up at the top and then just called it in the right order.

I refuse to be like the faceless masses of sheep and have a signatu......awwwwwwwww CRAP!!

Backups? Ha! I've never had troub**&{[}$$ERROR NO CARRIER

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 26 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS Border example : House

Each brick is defined with a separate id which is positioned absolutely.
This takes up a large amount of css and html.

I have a similar demo on my site
http://www.s7u.co.uk/ (home page)
which uses classes and floats to position each 'lego brick'.
This makes the css more compact.
It also has a :hover state just for fun.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 37 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

CSS Border example : House

Hi stu,
Nice house.
Your site would have to be one of the best CSS resources on the web.
It gets better each time I visit.

The one thing I would suggest is that you provide an explanation on how to do each of the examples. I know people can view the source but most people still won't know how you did it.

For example you could say at the bottom of the house something like:
This house was built with CSS. No images were used in the making of this house. Background-color and borders give the bricks color. Floats were used to position the elements.

Something along those lines, would make it easier for others to understand. Another thing you could do is comment the example in the markup so that when you look at the source its easy to see straight away where the example is.

Keep up the good work.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 26 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS Border example : House

Thanks Tony,

I agree with all your comments and have been thinking along the same lines recently.

The site stated out last November with just a couple of examples but has grown so fast that I have not had time to 'stand back and take a look'.
The original idea was that competent css visitors would be able to understand the css and use it 'as is'. But from emails and comments that I get, I now know that this is not the case.

So my next step is probably to pad out each example with a 'how was it done' section.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk