6 ms·
The Shapes of CSS
- delan 14y agoVery useful, though it has been posted numerous times before. http://hackerne.ws/item?id=2876612 http://hackerne.ws/item?id=2876612
- tfb 14y agoIt'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).
- dmvaldman 14y agoThere 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
- majormajor 14y agoThe 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.
- BoldAsAnEagle 14y agoSomebody should make a "draw any shape" converter into css.
- yuvadam 14y agoI wonder if the last space invader example can be extrapolated to generate any arbitrary pixel art.
- lbotos 14y agoI 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.
- zevyoura 14y agoIt makes more sense to use an svg based solution for almost all of these examples also.
- golden_apples 14y agoYes, 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.
- chrisacky 14y agoI 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 http://jsfiddle.net/dd454/20/show
- factorialboy 14y agoNice! 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.. :-/
- jarek-foksa 14y agoCSS 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.
- rrreese 14y agoCan you explain why this is wrong? I appreciate this was never intended, but what is actually wrong here?
- jarek-foksa 14y agoWhat 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.
- boingboing 14y agobutthurt much?
- deleted 14y ago[deleted]
- rytis 14y agoTotally 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?
- liamondrop 14y agoJust 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.
- vibrunazo 14y agoIt's just a funny thing to giggle at. But I really hope no one will use this in production.
- samsonasu 14y agoCool 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.
- secoif 14y agoRight Click -> Inspect Element
- samsonasu 14y agoI 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.
- madeofchalk 14y agoIts there, plain as day. http://cl.ly/GwZz http://cl.ly/GwZz
- madeofchalk 14y agoThat's actually really interesting. Never knew you could put contenteditable on a style tag and have it work like that.
- kjhughes 14y agoInteresting 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.
- gpmcadam 14y agoMost everyday problems related to rounded edges in CSS can be solved with CSS3 PIE (http://css3pie.com/ http://css3pie.com/). How well these shapes would render though, I don't know.
- coopdog 14y agoI lost it at ying yang
- isnotchicago 14y agoHas 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.
- alecperkins 14y agoYes, 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.
- isnotchicago 14y agoAny 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/ http://jsfiddle.net/PLMSA/
- alecperkins 14y agoSince 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/ http://jsfiddle.net/enTz9/