

Arrow button in CSS3 - alanh
http://jsfiddle.net/czuxH/

======
languagehacker
Nice proof of concept. It'd be more impressive with more sensible markup. The
<b/> and <i/> tags are deprecated, and have always been intended to define the
display of their innertext -- not much more. This requires the tags with or
without any actual text inside them to function. Without them, it's just a
box. With text within them, it looks terrible.

I've dealt with designers who do this before -- implement HTML and CSS
approaches that are not quite ready for the big leagues, to the absolute
detriment of sensible markup within a real web application, or even a simple
website. It's not just a problem for implementation (since you often have to
unnecessarily decorate the data you're displaying), but it's a problem in
terms of intelligently applying semantic markup to improve the machine-
readability of what's being displayed on your site.

It's important to keep in mind that effectively implemented markup is
leveraged not only by search engines, but by individuals with disabilities.
You should always aim for informative, compliant, and forward-thinking markup
before bending basic rules to make something look nice.

~~~
alanh
There is no problem with _empty <b> and <i> tags_ which, by the way, are NO
LONGER DEPRECATED in HTML5. (Learn the standards before becoming a standards
Nazi.)

And anyway, guess what? This was, as you say, a proof of concept. It would
work with different elements, or even pseudo-clases (and pseudo-classes in
pseudo-classes), though then IE compatibility would be lost.

Anyone who copy/pastes this without changing the CSS selectors (styling all
<b> tags as if they were triangles) clearly misses the point, you know?

------
cfq
I read the HTML and wondered what I should be making of it. So I took a trip
down to the old HTML5 specification at: <http://www.w3.org/TR/html5/text-
level-semantics.html>

"The i element represents a span of text in an alternate voice or mood, or
otherwise offset from the normal prose in a manner indicating a different
quality of text, such as a taxonomic designation, a technical term, an
idiomatic phrase from another language, a thought, or a ship name in Western
texts."

"The b element represents a span of text to which attention is being drawn for
utilitarian purposes without conveying any extra importance and with no
implication of an alternate voice or mood, such as key words in a document
abstract, product names in a review, actionable words in interactive text-
driven software, or an article lede."

And none of that markup made any sense to me.

~~~
alanh
Hey, they’re empty — the markup is irrelevant. The only reason I didn’t just
use pseudo-elements is so this would work in IE7 and older. <b> and <i> were
quick and easy to type. I would not recommend copy and pasting any of the code
on the page, just the technique, if a scalable, fast-loading arrow is desired
:)

------
rorrr
Doesn't work in IE or Opera

~~~
alanh
Er, yes, it does. However, gradients weren’t defined for those browsers. But
100% of the ways you would normally deliver gradients to those browsers will
work.

