Amazing CSS Borders

they're amazing!

[SuzyUK]

They can do so much, they are not just a 1px line around your elements but so much more.. the fun is trying to see what..

and so an appeal went out(well it didn't but!),
we have lists,
we have zen garden
what's next?

Well now we have Borders! let see what we can do... This CSS demonstration [designdetector.com] ~ no graphics involved ~ shows not only what but that it's fun too! ...

I only want to share this with you (and No it wasn't me!.. no affiliation) but to me it brings the "fun" back to CSS ;) congrats to the author....

Suzy

[PhraSEOlogy]

WOW!

Now thats what I call "extreme css".

[Skitso]

Wow...how long did that take?

Completely mindblowing...illustrations in css...who woulda thought?

[DrDoc]

Now THAT's neat! :)

[lorax]

Cool - but when are we going to get rounded corners and circles!

[DrDoc]

Mozilla already has rounded corners ;)

[amznVibe]

Heh, makes me think we are gonna have css+javascript wolfenstein 3d [activisionvalue.com] sometime in the near future... lol

[ronin]

Did anyone try clicking on the door?

You can go in and look around the house - it's awesome! >;->

[PhraSEOlogy]

The house inside is really cool - except for the furniture - I guess they inherited it from the previous owners - the font family.

[TGecho]

Click on the door? Am I missing something?

[aevea]

Pretty amazing, I'm sure it's going to open a lot of eyes to what can be done with css-borders. I'd really like to see a post/article on the making of and the problems that had to be overcome...

Adam

[killroy]

I've come around some exreme CSS articles a while ago, here is one of the most impressive ones:

Rotating Star [infimum.dk]

Only works in browsers that support transparent edges. (like IE)

and a sprinkle of DHTML... no images were used in that page.

I also have nothing to do with it, was just impressed by it.

What I DID do though, was to use that method t oreplace my ROUNDED CORNER gifs with pure CSS border magic. Sticky me for a sample.

SN

[SuzyUK]

TGecho.. I think they're having a laugh.. that font-family changed the locks and wouldn't let the prospective viewers in!

but.. who knows what possibilities the future holds? ;)

aevea - It's all in the source code.. why not take it and play with it.. it's actually a good exercise in CSS-P too. AFAIK there isn't a 'howto'

but it's not so much "how" it's done, it's just that it can be done..

I've been reading (blogs etc) already about how this example could be done better (less use of divs e.g.) but I really don't think that's the point of this exercise. This one is just for fun.. and there's a bit of learning in there too.

---

Somewhere along the line (and rightly so IMHO!) CSS designers have got caught up in the standards and accessibility mode.. and the tables v CSS arguments.... I know 'cos I've been there myself ;)... but I forgot how much fun there was (i.e. what got me into CSS in the first place), and how much could still be learned by "playing" instead of copying the rest.

The forerunners in this business, Meyer's Slantastic, Tantek's Regular Polygons, infimum's DHTML (as in Killroy's link) have groundbreaking examples out there and in the beginning it was a "Wow, look at that....". Now some of those examples still don't work in older browsers but they do work in more browsers today than they did when they were built. We just forget to keep tweaking things until the browsers catch up.. that's what this "House built by CSS" has done, it's reminded us that more things are working now than used to..

It's playing, but it's part of understanding CSS properly too, we can't learn by example in all cases as the examples are still be written..

"all work and no play...." etc ;)

Suzy

[amznVibe]

This one is better than the star, rounded corners in css that works in any browser - just not very useful in realworld smaller corners and some jaggies. Do a "select all" to see the block outline.

[infimum.dk...]

[edited by: SuzyUK at 5:06 pm (utc) on June 21, 2007]

[Captaffy]

I had no idea you could make trapezoids using css and divs.

It was worth it to drag myself out of bed this morning.

[Reflection]

Thats pretty cool.

[zoobie]

Only the coding is cool.
The house looks pretty bad which is why we have graphic artists, photography, and photoshop. Someone had a major bolt loose when they made the code for 120 bricks.
Zen garden? Ha ha! We'll be hearing about that from newbies for several years to come.

[RammsteinNicCage]

Zoobie, I think you might be missing the point a little bit. ;) Of course the house isn't the most artistic, but it shows us that css can do a LOT more than just taking the underline out from links.

Jennifer

[richardb]

Can't see anything Suzy

OS Win3.11
Browser NS2

Is the site down?

Rich :P

[SuzyUK]

richard... yes I think it was for a while :(

maybe the server can't take the strain ;)

OH and get a browser upgrade!

Suzy

[SuzyUK]

Zoobie...

I'm with Jennifer

Think you missed the point, it's what can be done. whether or not you want to do it is up to you.. I still class myself as a "newbie" (translate as "one who is learning") and I like to learn by others examples, and this is one!

Suzy

[Nick_W]

Mod note: Side topic here... [webmasterworld.com]

Nick

[amznVibe]

No where near as fancy as the house but still an interesting css technique:

[fu2k.org...]

[Nick_W]

Interview with the creator [mallasch.com]

Nick

[pcbrown]

That's just plain neato!

It kinda reminds me of a VRML world...except it doesn't rotate and you don't need a 3 meg viewer to see it :-)

An amazing little demonstration. Thanks for the link.