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.
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
Thanks for the reply Thibaut, I've removed the transition include, but in the hover all I have is this:
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!
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.
15 comments
Alexey said
Thanks!!!Good job!
Alex said
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
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
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
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
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
This is super clean design, this will look awesome in my blog. Thanks
Guru said
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!
Guru said
See here full tutorial for bloggers.
http://bit.ly/TbvgWg
Adriana said
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!
Felix said
You know that there is a live version of Thomas PSD avaiable for almost a year?
Fyi http://dribbble.com/shots/240969-Sliding-Tags-free-psd-live-demo
pirxpilot said
Just used a simplified version in http://liftie.info
Credits here: https://github.com/code42day/liftie#credits
Thanks!
simo said
I found a version of this for wordpress, sharing it for everyone: http://wpfreebies.net/sliding-tags-by-thomas-bossee-coded-version-for-wordpress/ - :)
TestShoot said
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.
WolfGrid said
Great job you done.