
The Shapes of CSS - tilt
http://css-tricks.com/examples/ShapesOfCSS/
======
pilif
The moment your code begins to look like this

    
    
       -webkit-transform: rotate(-70deg);
       -moz-transform:    rotate(-70deg);
       -ms-transform:     rotate(-70deg);
       -o-transform:      rotate(-70deg);
    

you know that it's time to either drop the vendor prefix or to hope that there
will not be another browser vendor implementing the exact same functionality
and again protect it behind a prefix.

I know that technically, the transform specs are not finalized, but
considering _this_ kind of consensus (even IE seems to agree), would it even
be wise to change the spec again?

~~~
yuhong
Technically, browsers are supposed to drop the prefixes when the spec reaches
Candidate Recommendation.

------
ck2
They had me at the heart but then the infinity blew my mind.

For the record it works in what's now the "old" Firefox 3.6 (Firefox 6 final
is out in 4 days)

Everything made of triangles works in IE8 (ie. star and pentagon work).

Unfortunately IE6 does not support background:transparent but if you know what
solid background color you do want, you can fake it.

If I remember correctly there is also a way to fake the transparency in IE6
with a chromakey and filter. You basically make the parts you want transparent
a crazy color like bright pink and then have the filter make that color
transparent. Almost not worth the effort anymore though.

~~~
DanielRibeiro
Note that the boxes with the source of the css are editable. Makes much easier
to edit out parts and see how they are done.

------
genieyclo
How much money would HN save in bandwidth from changing the voting arrow
images grayarrow.gif and graydown.gif (both 111b) to two small triangles in
CSS as shown in this story? Or would it cost them more to even change to the
css-style arrows? Also -- correct me if I'm wrong here -- why doesn't HN use
one sprite image instead of serving up the images everytime separately for
each story and comment? Probably because it's cached the two small arrows from
the beginning so there's very little resources used anyways?

~~~
program
They will lose money:

    
    
      #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
    

is 143 bytes.

~~~
DougBTX
It would cut out two web requests too.

~~~
nickzoic
"data:" URLs are pretty good for this too, no web request needed. See RFC2397.

I've been using these a bit lately for little icons and such, I think its a
cleaner approach than spriting in a lot of cases. I put a little script to
generate data URLs up at <http://nick.zoic.org/art/etc/make-data-url.html>

How good is cross-platform Unicode support these days? I do like the idea of
just using characters which look like icons, even if it does feel a bit like
writing MS-DOS TUIs with box-drawing characters :-).

------
bruceboughton
Can anyone explain the infinity sign? I can follow all of the other shapes.

~~~
Stuk
It's two squares, each with three rounded corners and one point, rotated +/-
45 degrees to point at each other.

------
wslh
It reminds me about the importance of knowing geometry :-)

------
doctoboggan
Do the people who come up with this syntax spend their whole lives trying to
make it as unintuitive as possible?

~~~
olavk
CSS is designed for typography and layout. It was never designed to render
arbitrary geometric shapes - something like SVG should be used for that. This
is just clever hacks pushing the box model to its limit.

~~~
dcaylor
I don't think that "it was never designed to" and what you should do with a
technology necessarily go together. A lot of innovation comes from doing
things with technology that it was not originally designed to do. You should
be aware that you are beyond the intended purpose, but you should not let that
stop you.

~~~
raganwald
Yes, a thousand times yes. I assure you that in the 1970s engineers were
telling each other that using 8-bit microprocessors to build “toy” computers
was outside of their intended purpose.

------
tambourine_man
The infinite shape is quite clever.

What I'd like to see is proper anti-aliasing. I'm obsessive enough that it
prevents me from using CSS in such cases.

------
Raticide
Isn't this what SVG is for?

------
lean
Can someone explain the triangles?

I see what their doing, but why does it make the triangle shape? Shouldn't it
just render as a square with different sized rectangular borders?

~~~
Timothee
Here's a modified version of it: <https://skitch.com/timothee/fxnjf/the-
shapes-of-css>

Basically, the triangle is made of _only the bottom border_.

The top border is of width 0px so doesn't show. The element itself is 0x0px so
doesn't show either. The right and left borders are transparent so you don't
see them, but their width of 50px gives the base of the triangle. (which is
then 100px) Finally the bottom border is 100px wide which gives the height of
the triangle.

Note that the trapezoid further down is the same thing with a width of 100px
for the element itself, as if you stretched that triangle in the middle.

~~~
lean
It totally clicked when I saw your example, thanks!

------
jsavimbi
Just one more thing to take away from photoshoppers. If you're a visual
designer, I'd start learning to code.

~~~
cageface
It's a pity the syntax is so horrendous. After working on native mobile apps
with real path support this is not appealing at all.

~~~
necolas
This is just a bit of experimentation. Not something with any significant
practical benefit.

You just have to look at the code behind this -
<http://nicolasgallagher.com/pure-css-gui-icons/demo/> \- for confirmation
that this is not a viable solution for complex shape creation.

~~~
losvedir
Wow, offtopic, but you have a beautiful site.

I'm in the midst of reading Robert Bringhurst's _Elements of Typographic
Style_ and it's really motivating me to design my blog in a lot neater,
cleaner, typographically-aware style. I think you've really nailed that. If
you haven't read that book yet, I highly recommend it; I think you'd
appreciate it.

------
pointyhat
Quote astonished to see that this works in IE9 (apart from parallelogram).

