Top 7 link and text effects using javascript/css
In this article I will run through my favourite ways of enhancing links and text on your website using Javascript and CSS. I don’t recommend the use of these all the time. Only on small website in certain scenarios are they appropriate due to slowing down the speed of your website and often many have accessibility issues. Having said that they are very cool and I hope your like them. If you have any others you would like to suggest please post a comment and I will add it to the list.
-
Scrollovers
This was the first javascript linking effect I came across. I used to use it a lot on headings. Great little tool which makes your links flip over when you roll over them. Give it a try!
-
Jquery/Mootools Link Nudging
I only discovered this neat trick a couple of weeks ago on David Walsh’s website (fantastic source of information). When you hover over a link the link moves to the right by increasing the padding-left using javascript. Give it a try!
-
Links With Icon Cues
This was the first javascript linking effect I came across. I used to use it a lot on headings. Great little tool which makes your links flip over when you roll over them. Give it a try!
-
Menu Fading
I also just recently came across this effect. It can be very versatile and create some really wonderful effects. There is a great tutorial on CSS Tricks showing how to implement the effect. Give it a try!
-
Javascript Text Replacement
This is an extremely powerful and useful tool. It gives you the ability to use non-standard fonts on your website without the use of flash or any images. A truly amazing piece of code. There are many different versions of this out there. I suggest checking out cufon because its so easy to set up. Give it a try!
-
CSS Only Grunge Text
This is a pretty cool and simple effect. Basically you create a grunge PNG image. Then on your headers or the text you want to use simply position the PNG over the top. Trying reading the following link for the code to use it. Give it a try!
-
CSS Only Gradient Text
Another simple trick just link the grunge only text. This time you just create a 1px wide PNG and do the same effect. Webdesigner wall has a great article about it which will explain to completely along with multiple demos and example code. Give it a try!
Like this post?
If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.
Want to learn CSS fast?
Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.
Thanks for the tutorial. Outcome looks great!
Thanks for the feedback Dominic
Do you have any Youtube turtorials and do you also do Freelance work?
I do freelance work. You can view my company website at http://www.intelligentstudios.co.uk. At the moment I don’t have any youtube videos but plan to add some screencasts to the website when the new design is finished.
awesome tutorial. can’t wait to see the rest of what you got…
Thanks for the comment, I will get my next tutorial up as soon as I can.
I was wondering if anyone knows how to easily change how far the slide goes down and how to adjust its up position (after being down).
Never mind! I figured out like two minutes after posting! Thanks for the great tutorial though, I really appreciate it!
Cool tutorial, thanks tutorial added.
Thanks for the tutorial.
Thanks for the tutorial. Outcome looks great!
Awesome work…. Keep Going….
Hi,
This is the best tutorial of CSS. Presentation of article with code is also good.