Arrow button in CSS3

by alanh • 15 years ago

8 6 15 years ago

rorrr• 15 years ago

Doesn't work in IE or Opera

alanh3• 15 years ago

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.

languagehacker• 15 years ago

Nice proof of concept. It'd be more impressive with more sensible markup. The and 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.

alanh3• 15 years ago

There is no problem with empty and 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 tags as if they were triangles) clearly misses the point, you know?

cfq• 15 years ago

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.

alanh3• 15 years ago

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. and 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 :)

Arrow button in CSS3

Related Stories