The Shapes of CSS | Hacker News Reader

The Shapes of CSS

css-tricks.com

188 pointsmatt133 comments

I love the Space Invader style from this article. I'm making a 20 second animation for the game now... give it an hour and then post what I have.

Here is the current.. (ONLY WORKS ON WEBKIT) - Will add animation for other vendors once I have finished.

----

Space Invader Animation CSS3 Only

http://jsfiddle.net/dd454/20/show

CSS was never meant to be used for drawing complex shapes. If you are using those hacks instead of proper SVG or canvas paths then you are doing it wrong.

Can you explain why this is wrong? I appreciate this was never intended, but what is actually wrong here?

What makes it wrong is the fact that we already have means for describing complex graphics that are:

  - more readable
  - easier to maintain
  - easier to tweak
  - much more powerful

For similar reasons it's considered to be wrong to use HTML tables for page layout instead of CSS.

Totally with you on this. Really sad to see that a "triangle" is actually a "border"! Seriously, WTF?! Or is it just me, and everyone else is ok with that?

Just you. It's an exercise meant to push the boundaries and get people thinking creatively. Also, the triangle thing is a pretty common and useful hack.

It's just a funny thing to giggle at. But I really hope no one will use this in production.

It's used all the time in production to produce the arrow effect on tooltips and similar elements.

I'm currently working on a site that uses it heavily in production for visual enhancements and details. It's a great trick that works well, and doesn't require any additional markup if you use :before and :after pseudo-elements. Using CSS instead of images means it's easy to programmatically manipulate it, as well. eg A color picker system with a notch that varies with the color being picked. The new Google+ design uses the triangle trick with a twist, making an open triangle that shows what's underneath it, like your cover photo.

So what, the solution is draw it in canvas? What about the large number of people without support? I understand not using it for circles, but I've actually seen the triangle bit used quite often, and it makes sense.

Wow what you wrote is actually the oposite of the definition of what 'hacker' means, a few kittens died with that comment. What happened to being inventive?.

That's exactly what someone must have said when people were using tables for site structure and someone like OP tried to correct them.

Hack is essentially to get things done. In no way does it mean write new specifications.

I wonder if the last space invader example can be extrapolated to generate any arbitrary pixel art.

I think it could be for one color pieces, but anything beyond that and it makes a lot more sense to use an svg or div based solution.

It makes more sense to use an svg based solution for almost all of these examples also.

Yes, since each ” pixel” is just an additional box shadow. Very clever. I've never experimented with the number of box shadows that can realistically be drawn on modern browsers, winner what that limit is?

This technique could be used for evil very easily.

Cool demo, made even cooler because they stuck "contenteditable" on the style tags so you can play around with the shapes to see how they work right in the browser.

Right Click -> Inspect Element

I haven't seen a way to edit CSS on the before and after pseudo elements in the web inspector. If I'm missing something I'd love to know about it.

Its there, plain as day. http://cl.ly/GwZz

That's actually really interesting. Never knew you could put contenteditable on a style tag and have it work like that.

Interesting collection, but as the intro states: Any kind of CSS goes, as long as it's supported in at least one browser.

More impressive and useful would have been a reasonable floor above which the tricks were guaranteed across browsers. ...or at least a compatibility note next to each technique. For example, IE 8 can't handle rounded corners, so infinity, egg, packman, talk bubble, etc do not work at all. Version 8 is as high as Windows XP users can go with IE, so there's a lot of IE 8 out there still.

Most everyday problems related to rounded edges in CSS can be solved with CSS3 PIE (http://css3pie.com/).

How well these shapes would render though, I don't know.

Nice!

A month ago I remember struggling to create those triangle pointy arrows for tool tips.

I was an idiot for not using Twitter Bootstrap in that project.. :-/

Has anyone else noticed that at certain zoom levels, the triangle in the talk bubble looks disconnected by one pixel from the box? I have seen this problem with any similar use of the triangle hack.

Yes, I've seen that often. It's most apparent even without any zooming on mobile Safari. For this reason, whenever I use the triangle effect, I'll offset the element/pseudo-element by one pixel to avoid the gap.

Any ideas on a fix that works when the triangle must perfectly align with a box? In other words, when the base of the triangle should be the same width as the side of the box it touches. In this case, moving the triangle one pixel closer to the box means it does not fit perfectly against the box.

Example: http://jsfiddle.net/PLMSA/

Since it's basically a rounding error, I'm not sure if there's any way to avoid the gap without some overlap. In that example, a :before pseudo-element that's the same width as the box and one pixel above the triangle can provide the overlap without needing to offset the triangle itself.

http://jsfiddle.net/enTz9/

Very useful, though it has been posted numerous times before.

http://hackerne.ws/item?id=2876612

It's certainly very cool, but is it really that useful? Or I could just be missing the bigger picture. I actually hope that's the case so I can learn something new today. But it just seems to me like making a png/gif image is much easier and more practical. I do love to see technology pushed to its limits though!

I guess one of the cooler applications of this shape making method would be the ability to transform one shape into another very smoothly with a relatively small filesize (as opposed to an animated gif).

There are more benefits:

Costs nothing to change colors. This makes it great for iterating.

No bandwidth costs as CSS is rendered on the client.

Infinitely scalable in size. No rasterization.

Availability of other CSS functionality, like shadows, animation etc

The last one is an issue, actually. The space invader one is the extreme case: it's already a shadow. And the border tricks for triangles are also shadow-resistant.

I lost it at ying yang

Reply on news.ycombinator.com