Sliding Tags

Published on
Tags
Tag Cloud, Tag, CSS3 Transitions
No. of comments
14 comments
Browser compatibility
Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8
License
MIT License
Sliding Tags CSS Code Snippet

A set of tags with nice, colorful counters that slide from the tag's edge.

Inspired by Thomas Bossée's PSD.

14 comments

Alexey said
Ac52b5f05e37d053529d5cd6b510bbf3

Thanks!!!Good job!

Alex said
692678bcce846823769fb60f1842f6b4

These look great. Could you tell me how to make them show all the time instead of on a hover? I know it must not be that complicated, but you have a lot of includes and what not, and I'm trying to keep the CSS to the bare minimum so as not to overload the page.

Thanks.

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Hi Alex
Thanks. In the Sass source, simply remove the "@include transition" directives and change the ":hover" rules to apply without hover. You can also remove the "max-width" properties (required because width:auto can't be animated).

Alex said
692678bcce846823769fb60f1842f6b4

Thanks for the reply Thibaut, I've removed the transition include, but in the hover all I have is this:

&:hover {
text-decoration: none;
span {
padding: 0 7px 0 6px;
max-width: 40px;
}
}

I'm missing something because it's still hidden until I hover.

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Try removing the ":hover span" rule (just keep text-decoration: none;) and replacing "max-width: 0; padding: 0 0 0 2px;" with "max-width: 40px; padding: 0 7px 0 6px" in the normal span rule (where "@include transition" was).

Alex said
692678bcce846823769fb60f1842f6b4

Thanks again, just as you replied I had finally figured it out :)

These are very nice, thanks for making them available to us all!

Sreejesh said
3e3283d264c6567447b4ecb6e5295a81

This is super clean design, this will look awesome in my blog. Thanks

Guru said
545e95536757345edb5b8e2374b04ffd

Wao! Great sharing
i have implemented these cool tags into my blogger blog, have a look
http://premium-stuff-guru.blogspot.com
I am going to make a tutorial for that as well, and yes All credit goes to you man!

Adriana said
F58876530bcd523010fa2a5bbf05f19d

thanks for sharing! I love the way it looks and moves and the the css you made is pretty nice. I will surely use this idea in future projects!

TestShoot said
F3d4907cced93b725d9cb8864645b64f

Thanks for this code. If you have more text than is allowed to fit in the span tag, go in to the CSS and change the max-width for .tags a:hover span. I set mine to 90px instead of the default 40px.

Leave a comment