You must heard of sexy bookmark plugin of wordpress. I really like the way it pop up the icons on hover. Sexy bookmarks is using javascript to accomplish this.
I tried it using only css. This method of using css is known as css sprites. Css sprite is very useful technique in optimizing website performance.
Here is html code, simply copy and paste under your body tag:
1 2 3 4 5 6 7 8 | <ul class="sharing-cl" id="text"> <li><a class="sh-mail" href="">email</a></li> <li><a class="sh-feed" href="">feed</a></li> <li><a class="sh-tweet" href="">twitter</a></li> <li><a class="sh-face" href="">facebook</a></li> <li><a class="sh-su" href="">stumbleupon</a></li> <li><a class="sh-digg" href="">digg</a></li> </ul> |
Copy the CSS under your head tag:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | .sharing-cl{ overflow:hidden; margin:0; padding:0; list-style:none; } .sharing-cl a{ overflow:hidden; width:75px; height:30px; float:left; margin-right:5px; text-indent:-200px; background:url("http://www.webdeveloperjuice.com/demos/images/share-sprite.png") no-repeat; } a.sh-su{background-position:-210px -40px;} a.sh-feed{background-position:-70px -40px;} a.sh-tweet{background-position:-140px -40px;} a.sh-mail{background-position:0 -40px;} a.sh-digg{background-position:-280px -40px;} a.sh-face{ margin-right:0; background-position:-350px -40px; } a.sh-mail:hover{background-position:0 1px;} a.sh-feed:hover{background-position:-70px 1px;} a.sh-tweet:hover{background-position:-140px 1px;} a.sh-su:hover{background-position:-210px 1px;} .sh-digg:hover{background-position:-280px 1px;} a.sh-face:hover{ background-position:-350px 1px; } #text{ margin-top:3em; font-weight:bold; font-family:helvetica,arial,sans-serif; } #text a{ text-indent:0; height:auto; text-align:center; font-size:11px; padding-top:35px; color:#999; text-decoration:none; } |
Here is your image sprite upload in your images folder.
All Done!! Isn’t it easy?
Cheers!
Since this was my first post on this blog and i made silly mistakes. Thanks to Chris who made me realize i shouldn’t have done this.
Therefore i have updated this post as not to misguide challengers.
Comments
Wow thanks.. Was really searching for one. Good work web developer juice
This is so cool. I’m always elated when I find pure CSS substitutions since I’m so javascript phobic. Thanks for the great tutorial.
Thanks Elena
Cool visual effect and good use of a sprite so to cut down on your HTTP requests but it would probably make more semantic sense to use an unordered list for this example rather than a div with a bunch of anchors inside – we basically have a list of links here anyways right?
Also – the lack of any text content from within each anchor themselves make them unusable to non-sighted users, they won’t be able to know which link does what. You should include Bookmark this article on delicious, twitter or whatever for each one to fix this. This can then be hidden using text-indent: -9999em.
I would be concernd with the current treatment of partially obscuring the images tabbing to each link does not reveal the full image. Other than that and text and some other bits…WIN!
Good looking solution but the code is not clever. I’ve re-written the example using semantic markup and much shorter CSS:
http://www.wait-till-i.com/2010/01/08/cleaning-up-the-css-only-sexy-bookmark-demo-code
Thanks for nice clean up. Action appreciated
But still i have some questions :
1. Why you have used .sharing a {} twice when it can be done in once?
2. I found no “id=text” in your code while your CSS says #text{}
3. Why overflow:hidden is used when image is in background? Repetition of image is not possible if width is defined.
1. You’re right. It could be combined into one rule.
2. The text id is used in Chris’s example: http://isithackday.com/demos/sharing.html
3. overflow:hidden is used to clear the floated links.
Nice post mate
Interesting post. Are you able to provide
I agree
I as a rule don
Great advice and very true. One of the most important things bloggers, or any business, can do is try not to give up. Even when times are tough it
Noo! I’m using my iphone and I cannot seem to be able to open the page right. I will be back to read this later when I get back from lecture. The title looks like something I must read.
even though I have other idea on some little facts I have to to agree for a well written article. Keep up the very good work.
When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove me from that service?Thanks
Hey I clicked on your page by accident on bing while searching for something totally irrelevant but I am really glad that I did, You have just added yourself another subscriber.
Interesting, never thought of it like that
Some worth while posts on this blog and a load of good knowledge. If you get some free time, drop by and come and take a look at my efforts and give me a comment at Go Kart DIY
Thanks for the cool blog, it’s nice to read things that makes sense or have a point unlike a lot of geberish blogs. I do read a lot of those too
sometimes it’s just fun. Keep it coming.
Nice blog, not like some boring ones. I had a good read, Thnx! Will keep an eye out for more of your blogs.
I was reading something else about this on another blog. Interesting. Your linear perspective on it is diametrically contradicted to what I read originally. I am still pondering over the opposite points of view, but I’m leaning to a great extent toward yours. And irrespective, that’s what is so good about modern democracy and the marketplace of ideas online.
Hi. Very interesting site. I found it on Google. I will definately recommend it to my friends. Please keep up the great work.
Another great post!
Thank you for taking time to write such a easy to read article on this topic.
Wow, nice to know! lol
Hi, I applaud your blog for informing people, very interesting article, keep up it coming
You should add a subscribers section to this blog, I think I’m addicted
I love your blog
I was wondering if you would be interested in becoming a guest poster on my website? In exchange you could include one link your post? Please let me know when you get a chance and I will send you my contact details – thanks.
Awesome post I just Love it, Keep adding more like this!
In searching for sites related to web hosting and specifically comparison hosting linux plan web, your site came up.
Is there any website that can give us a lots of information like what was stated here? Thanks for the Idea…
I need some help;p
this works great..i like to write as little js as possible so a pure css solution is awesome
Hey I found your webpage by mistake on feedburner while searching for something completely irrelevant but I am very happy that I did, You have just added yourself another subscriber.
hey this blog is great. I’m glad I came by this blog. Maybe I can contribute in the near future. PM ME on Yahoo AmandaLovesYou702 Thank you day237
Nice blog, interesting as well. Thanks for the great blog!
I don’t usually reply to posts but I will during this case. .
Hey I found your website by fluke on google while trying to find something completely unrelated but I am really happy that I did, You have just added yourself another subscriber.
Hey I came across your blog by mistake on google while trying to find something really different but I am truly glad that I did, You have just caught yourself another subscriber.
gr8 research bro ;p
Hahah john, i also came here by mistake, well i got this site really very helpful, here are lot more about javascripts, css and much more.
The plugin really makes her what, it’d use too happy to incorporate in my side) but unfortunately no Fertigsystem (or WordPress blog. Quick question: Is there a tutorial for the plugin also made for own web sites?
Daniel
Thanks!
How long have you been in this field? You seem to know a lot more than I do, I’d love to know your sources!
great..i like to write as little js as possible so a pure css solution is awesome
accident on bing while searching for something totally irrelevant but I am really glad that I did, You have just added yourself another subscriber.
Thanks for sharing this helpful info!
in IE6 it is now working.
For webdesign, should one focus on functionality before going into the design aspect?
Thanks for the post. Keep the great work.
Cheers to the author for giving me some solid ideas
Great post, I look forward to reading more.
thanks for tutor…
nice to meet you
I tried it using only css. This method of using css is known as css sprites. Css sprite is very useful technique in optimizing website performance.
Thanks for sharing.
This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work.
Bookmark Sexy? I just heard about this. I’ll try it, I think this is very useful. thank you for the Demo.
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
Everything is very open and very clear explanation of issues. It contains truly information. Your website is very useful. Thanks for sharing. Looking forward to more!
Really good and interesting stuff.. keep writing
Hey thanks for this! I appreciate you taking the time to put things like this out for free for everyone. I’m sure it will come in handy very soon!
This is my first time i go post. I collected so many interesting things in your site especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work.Regards
Very informative article about css, thank you!
Very informative article about
Valuable information! Looking forward to seeing your notes posted.
Lovely post, i had been struggling to find something like this for quite a while. Thanks a lot for sharing. I am going to add it to my CSS aggregator site.
Thanks for an idea, you sparked at idea from a concept I hadn’t thought of yet. Now lets see if I can do something with it.
Nobody who accomplish result does so without acknowledging the support of others. The sapiential and reliant admit this aid with thankfulness. Our point is to support peoples with their custom essays writing.
I found your website perfect for my needs. It contains wonderful and helpful posts. I have read most of them and got a lot from them. To me, you are doing the great work
Do you represent the Freelance writing job service? Your notes referring to this topic can be great.
It sounds interesting but I am not sure that I agree with you completely.
Always wanted to use these types of bookmarks for my blog. They look great but had issues with them in the first release. Hopefully they work properly now.
pure css is the way to go. The rest is too sloppy
Excellent discussion here, this method of using css is known as css sprites. Css sprite is very useful technique in optimizing website performance.
I found your website perfect for my needs. It contains wonderful and helpful posts. I have read most of them and got a lot from them. To me, you are doing the great work
Adding to my bookmarks thanks. Needed more pictures though.
Wow this takes me back. Like your blog design too.
I think Css sprite is very useful technique in optimizing website performance.
Great thanks for this guys
You are a very intelligent individual!
If you have no idea how to write your psychology essay paper, you would have to hire the custom writing service to see a way to perform book reports.
Indeed a great work. Impressive and challenging for developers. Thanks
I have heard a lot on this point of view, but it seems to me that your ideas are the best.I like the post very much.
nice post keep posting like this i loved it to read this post, thanks for sharing
Adding to my bookmarks cheers, please consider a follow up post.
Hey, loved your post… I have implemented it on my site(not complete yet)…. I really love the Icons which you have used… can you tell me from where you got those…
Excellent this plug in is exactly what I was looking for
Thanks for taking the time out to eductate us!
Cool visual effect and good use of a sprite so to cut down on your HTTP requests but it would probably make more semantic sense to use an unordered list for this example rather than a div with a bunch of anchors inside – we basically have a list of links here anyways right?
Interesting article, Thanks!
Thank you very much for complete tips.
Thank you very much. bookmarked.
I like it, thx a lot for sharing….
Nice blog, interesting as well. Thanks for the great blog!
Really great, practicly explained and Helpful Points.
I like your way of sharing, very informative.
People deserve good life time and loans or commercial loan can make it much better. Because freedom relies on money.
I feel strongly about information and love learning more on this.
Different people do not know for sure how to create their music and movies essay. Hence, at present they should come along your best data related to this topic and write the highest quality essays ever.
I will be checking back sometime to see if you have any new content, cheers.
Nice way of sharing your idea, thank you for the information.
The exterior maintains some classic features such as a single story, low pitched roof, long proportions and clap board siding but also includes some modern upgrades such as large sliding glass doors, sliding window shade screens and a sleek metal roof.
This is a Fine,common Impression Write-up.Very helpful to 1 who is just finding the resouces about this part.It will Unquestionably help
Thank you so much for posting all of the excellent information! Looking forward to reading more posts.
This informative article helped me a lot! Saved your website, very excellent categories everywhere that I see here! I really appreciate the info, thanks.
This well written article encouraged me a lot! Saved the site, very excellent topics everywhere that I see here! I really appreciate the info, thanks.
Thank you very much for sharing this good content! Looking forward to seeintg more blogs.
This well written post encouraged me a lot! Bookmarked your blog, extremely great topics just about everywhere that I see here! I really appreciate the information, thank you.
You are a very intelligent individual!
I don’t usually reply to posts but I will during this case. .
Excellent write up, bookmarked your website for interest to see more information!
Great write up, saved the site in interest to see more information!
This good post encouraged me very much! Bookmarked the website, very great categories everywhere that I see here! I really appreciate the information, thanks.
This educational post helped me a lot! Saved your site, very excellent categories everywhere that I read here! I appreciate the information, thanks.
Excellent summary, bookmarked your site for interest to read more!
Great post, saved the site for interest to read more information!
Milwaukee lawyers
Keep posting and i will follow you..