Label.css – an easy way to label DOM elements

http://usablica.github.io/label.css/

by hoseiin • 13 years ago

115 27 13 years ago

usablica.github.io

afshinmeh3• 13 years ago

Great! Keep up the good work.

MehdiEmrani• 13 years ago

that's great for labeling every thins that you want

1admin• 13 years ago

Nice job mate :)

tehwebguy• 13 years ago

This rules, it is exactly what I have been dreading having to create for a project I am currently working on.

Not sure if you are the creator (edit: you probably are, I just saw your username here matches the twitter account in the comments) but the Usablica & Github links at the top link to #

hoseiin4• 13 years ago

I'm the creator :) I'm so glad if it was useful for you.

afshinmeh3• 13 years ago

I agree. the links of the header was set to the `#`.

wheaties• 13 years ago

I love this. Quick question, which browsers support this? It doesn't say on the website.

aarondf• 13 years ago

here's a link to the gh repo https://github.com/usablica/label.css/

hoseiin4• 13 years ago

Thanks man, links fixed.

non-sense• 13 years ago

This is very neat and useful. Thanks for creating and sharing! Good to see new works coming from Tehran. IIRC, it was itro.js. Keep it up!

acron0• 13 years ago

Very neat, very slick. What more could you want?

aegiso• 13 years ago

For the curious, the way this works is ::before/::after selectors with content: attr() to bind the data attributes, which are position: absolute 'd within the parent, possibly transitioned.

Zero JS.

If you haven't played with CSS3 lately you might be surprised what it can do. I know I was a blown away when I discovered it could do data binding. Brings to mind a great I/O talk that introduced me to a lot of this stuff:

http://www.htmlfivecan.com/

lancer383• 13 years ago

While I like the simplicity of this, I would recommend to keep accessibility in mind: information put into a data attribute will not be accessible to screenreaders, and they would miss any information stored via this method.

It may make sense to append the label information to whatever is being used for the image's ALT attribute.

hoseiin4• 13 years ago

I use data-label because i don't wanna limit labels just for images. but for the images, it's a good idea to use ALT attribute. Thanks.

herge• 13 years ago

Fun fact: Even if Mr. Emrani has put a copyright notice in the README.md, it doesn't apply in the United States! I wonder if the warranty notice is also also moot?

coderdude• 13 years ago

Watch out for those localized Label.css knock-offs.

avargas• 13 years ago

usabli.ca has been kicking ass lately. I'm actually very happy to see this is a team coming from a country like Iran.

afshinmeh3• 13 years ago

ww520• 13 years ago

What's the difference between using the label CSS class and just setting the title attribute to get the tooltip popup?

senorprogrammer• 13 years ago

Nicely done!

wittjeff• 13 years ago

This is cool. If you add automatic support for the ARIA-label property (just duplicate your text content in the ARIA-label), this could be an accessibility tool. Otherwise you're basically hiding potentially needed info, which might normally be in ToolTips, from users with disabilities.

See https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/... for info and http://freedomscientific.com/products/fs/JAWS-product-page.a... for a demo of the most popular screen reader for blind users.

You might also want to think about tying your CSS colors to system colors, to support users who use High Contrast mode.

eridius• 13 years ago

Neat, but Fade didn't actually fade (in Safari).

j79• 13 years ago

Same here; Mac OS 10.8 running Chrome (Version 24.0.1312.57)

hoseiin4• 13 years ago

I developed it in windows. Thank you for report this bug. I'll fix it soon.

quackerhacker• 13 years ago

Nice, clean and simple! I love how your utilizing CSS3 and the very simple html5! Mad props!

zee007• 13 years ago

Dropping my props as well. Great work. Very clean and simple.

shakiba• 13 years ago

Boys, I'm prude of you!

Label.css – an easy way to label DOM elements

Related Stories