Awesome Effects for Tumblr Blogs

by Ashley Poland
Nick White/Photodisc/Getty Images

An "awesome" effect is in the eye of the beholder -- what you find tacky may be the coolest effect ever for another Tumblr user. But once you decide on your own custom effects, you need to edit your theme's source code, so read any included tutorials for all effects carefully before jumping in. It may take several tries to find the right balance for your blog, but the end result will be a blog theme unique to you.

Text Effects

If you want to add something a little whimsical to your blog, you might consider using the Rainbow Text Generator to create links in a classic rainbow palette. However, a more dramatic and subtle change is to use a custom font that fits your blog's mood. Google Fonts offers more than 600 Web-ready fonts that you can apply to your Tumblr blog with minimal modification, ranging from simple sans serif fonts to decorative handwriting fonts. CSS also allows you to apply gradients and filters to text. (Links in Resources.)

Image Effects

Images are a big part of the Tumblr experience, and CSS3 makes it easy to change the way your images appear on the page. For example, use the hover pseudo-class in CSS to change how the images display when visitors hover over them.. The following example uses a CSS Webkit filter to make all images appear in grayscale until you hover over them:

img {-webkit-filter: grayscale(100%);} img:hover {-webkit-filter: grayscale(0%);}

CSS3 offers several filters, such as sepia tone, blurs, contrast management and other basic image editing effects. The article "Say Hello to Webkit Filters" from Tuts+ discusses these filters and how to use them. (Link in Resources.)

Cursor Effects

Another method for customization is to change your visitor's cursor, creating visual interest at the user's focal point. For instance, consider the Rainbow Fireworks effect which creates a small fireworks-like explosion whenever the visitor clicks on your page. Another option is the Sparkle Cursor, which causes colorful sparkles to fall from the visitor's cursor. A third is the custom cursor, which allows you to upload any image you want to replace the visitor's default mouse cursor. (Links in Resources.)

Full-Page Effects

The website Snazzyspace offers several effects for Tumblr, including those that affect your whole blog. One example is a message that pops up when visitors load your page for the first time. This serves well if you have any warnings (such as not-safe-for-work content). Another option is the falling snow animation, which drops snowflakes over the page to invoke a wintery feel. Snazzyspace also offers a counter to your blog that shows both your current visitor count and your highest ever visitor count. (Links in Resources.)

Photo Credits

  • Nick White/Photodisc/Getty Images

About the Author

Ashley Poland has been writing since 2009. She has worked with local online businesses, supplying print and web content, and pursues an active interest in the computer, technology and gaming industries. In addition to content writing, Poland is also a fiction writer. She studied creative writing at Kansas State University.

More Articles