CSS Angles: Just the Edge Your Web Page Needs!

[Dan Schulz]

Notice: This is a discussion thread for comments about the SitePoint article, CSS Angles: Just the Edge Your Web Page Needs!.
__________

Okay, this is definately original. I like the idea, though the DIV around the list definately doesn't sit well with me (as any SitePoint regular will know).

I'll play around with this and see if the DIV really is necessary. Oher than that, this may be one of the best advances in CSS I've seen in over five years.

And on that note, I'll close by saying you've more than earned the praise you'll be getting from others who will comment later. Congratulations on a well-written article that actually advances CSS based Web development.

[Aarem]

I guess my lack of understanding of this article is a sign that it's really good! I wish the 'in between' steps were given. As it is, understanding the process will require experimentation and trial-and-error. Fair enough, I guess, but it's a shame to have to re-invent the wheel (or triangle). I don't have time!

[Highway Seven]

A gimmick at best. I don't see the point of this at all.

What are the benefits of spending an extra hour buried up to your eyes in CSS trying to achieve a task that an image could accomplish in less than half the time?

1. You take pride in your CSS and hate using unnecessary images to accomplish a design.

Those shadow-thingies are necessary? How much pride in CSS do you have to have to go this far out of your way to avoid using an image?

2. The amount of CSS you need to make an angle effect will usually be lighter than the weight of the image doing the same job—at least 99% of the time. If you’d like to test this out for yourself, Yahoo came out with a great extension to Firebug for grading a web site on speed, called YSlow.

We're talking about an image that would probably be about 1 kb in size. This is a complete non-issue.

3. Using an unnecessary image will increase your HTTP requests to the server. Too many requests can contribute to a slow-loading web page.

Saying this in reference to an image about 10x10 pixels in size is pretty ridiculous.

4. Using a slanted line can be a nice way to break the boxy tendency of a simple design and catch the user’s eye.

So can light and well-made graphics. I can use CSS to create a gradient effect in a background too, but why not just do it in Fireworks and save a ton of time? The end result is the same, the website's loading time isn't affected in any perceivable way and no one's day is changed in the least.

[C. Ankerstjerne]

I always love CSS articles that push the envelope. Great job!

[Stormrider]

While it's a good technique and can probably be expanded to use for other things, I think it is used a very specific kind of design. I'm not sure I like the way the shelf thing looks, still looks quite boxy to me. I think I would rather use an image so you can do things like give the shadow a fuzzy edge etc.

Originally Posted by dcfauno

Saying this in reference to an image about 10x10 pixels in size is pretty ridiculous.

The size of the image doesn't affect the size & number of the HTTP requests, only the response I agree it's no problem generally to have a tiny image (probably less than 1kb, more like 400 bytes or less as a gif) for decoration.

[busylinks1]

WOW! what a nice blog about CSS....

I can't imagin befor it that we can make triangle with CSS too...
If we can make triangle then we make other shapes too like polygon....

[Stormrider]

A rhombus/rhomboid would be possible, hexagon wouldn't be very difficult either. Octagon would be possible. I don't think much else would..

[jonpenny]

Originally Posted by Stormrider

The size of the image doesn't affect the size & number of the HTTP requests, only the response I agree it's no problem generally to have a tiny image (probably less than 1kb, more like 400 bytes or less as a gif) for decoration.

That is where sprites come in handy.

Nice article though. Definitely food for thought!

[conradical]

I guess for the CSS purists who cringe at an image like a vampire at a stake this is awesome news.

[Highway Seven]

Originally Posted by conradical

I guess for the CSS purists who cringe at an image like a vampire at a stake this is awesome news.

[somecallmejosh]

I can appreciate the forward looking CSS3 tutorials, such as this one. They're great for testing purposes. When that wagon rolls around, I'll be ready to jump right on.

[Highway Seven]

Originally Posted by somecallmejosh

I can appreciate the forward looking CSS3 tutorials, such as this one. They're great for testing purposes. When that wagon rolls around, I'll be ready to jump right on.

.... what wagon?

[Stormrider]

This isn't CSS3...

[ryanhellyer]

Originally Posted by Stormrider

This isn't CSS3...

They are referring to the stuff on the second page, like this:

thead th {
 block-progression: rl;
 padding: 0.5em 1em;
 rotation: 45deg;
 rotation-point: bottom left;
}

The first page is just standard CSS though, that has all been possible for quite some time now even in older browsers.

I remember when I first started coding CSS I spent hours pain stakingly creating a proper fade -out shadow effect for all of my images by wrapping a bunch of DIV tags around each one. I'm too lazy for that now and use images instead. It also leads to hideous code bloat, but it does look nice and loads quickly. If there are images with multiple sizes which require the shadows, then it actually requires less code than using images too.

[ipcinstantcash70]

thats really is a neat idea

[timwright]

Wow, thanks for all the great comments...

@Dan - Not even sure what to say, but thanks. And...no, the DIV is not technically necessary, you could achieve the same effect by moving the ID to the <UL>, but generally if this was used as navigation, I would wrap it in a "nav" DIV as I try to dump all page navigation into a "nav" DIV, you can see it on my web site (csskarma)

@Aarem is there a specific step that was unclear?

@dcfauno It's more to show you what kind of power you have with manipulating basic CSS. I'm not sure about everyone else, but I take a good amount of pride in using as few images as possible. I think it's much easier fo a client to update by themselves wince they don't need any photo editing software.

@stormrider I'd like to see some ways people modify this technique, I hope it catches on a little!

@conradical ironically, the CSS purist rarely sees the light of day too!

@ryanhellyer I'm really looking forward to being able to use that CSS3, hopefully in the nest couple years

@C. Ankerstjerne
@ipcinstantcash70
@busylinks1
@jonpenny
@somecallmejosh Thanks, much appreciated!

[Stormrider]

For the ultimate in CSS border angles/art, I still like the 3d maze project:

http://www.brothercake.com/games/und...derground.html

[JREAM]

I really like this article i never knew you could do that. With the triangle you could use it at a corner of a square and shade it a little making it look like a folded piece of paper also, Im suprised that example wasn't used since you see the little paper fold on a lotta websites.

Originally Posted by Stormrider

For the ultimate in CSS border angles/art, I still like the 3d maze project:

http://www.brothercake.com/games/und...derground.html

Thats just insane, I bet that took long to make haha.

That'd be crazy if people started drawing in CSS and made a CSS picture generator, the markup would probably add up larger than a image I bet.

[Highway Seven]

Originally Posted by timwright

@dcfauno It's more to show you what kind of power you have with manipulating basic CSS. I'm not sure about everyone else, but I take a good amount of pride in using as few images as possible. I think it's much easier fo a client to update by themselves wince they don't need any photo editing software.

I'd hardly call creating tiny shadows next to the links using a ridiculous amount of CSS "power", nor do I think most web designers would agree that images should be used as sparingly as possible (although using them tastefully and in reasonable moderation is always a good idea). I'm really not trying to break your balls here, but your selling points -- faster loading pages due to replacement of a <1kb image with CSS code, clients being able to "update" their page, etc -- really don't apply to about 99% of realistic scenarios.

But I definitely agree that you can do a lot of great things with CSS.

[GCheung55]

This is pretty awesome. But here comes the question... Does it work in IE6/7/8?

[timwright]

@GCheung55 in IE6 the last list item hangs off the shelf a little (very fixable with !important). IE8 Beta 2 it works fine (regular and compatibility view), and if I remember correctly, IE7 works fine too

[cjbates123]

Excellent article Tim. I recently played around with some CSS border/angles and was able to put together a really visually-interesting and lightweight effect. I think this is a technique that is under-utilized and very powerful.

My sense is that this article is intended as a proof of concept, and that the author is leaving the creative real-world applications up to us.

[glenngould]

It looks nice but I don't understand why use CSS to design images.

I makes me think of an attemp to code a CSS file that displays a photographic image, by setting colored divs for every pixel of the image.

[sitehatchery]

glenngould, I've tried the color div thing. Actually, I used PHP to take an image and convert it into 1px horizontal rules (less code than an opening and closing div), matching each rule to each pixel. It works, but it takes forever to load because of massive amount of HTML needed to create an image with horizontal rules. I tried it thinking I could invent a new and more efficient way of displaying images - but it didn't work. Oh well.

[glenngould]

sitehatchery,

When I was a little kid, I saw the first scanned bitmap image in my life on a computer, which was a Beatles photo, I was already playing with MacPaint at that times and I was impressed.

The reason I was impressed was that I thought the Beatles bitmap was designed with the pencil tool, filling every single pixel by hand I could never decide if this was possible or not for quite a long time. Well, it's that very Beatles photo that makes me learn what is a pixel actually