9 CSS Snippets To Spice Up Your Blog

Written by Tony Hue | Posted in CSS & Snippets

Join LonePlacebo.com on Facebook!

css snippets

Get your pen out...TWSS!

Is your blog looking like it needs a makeover these days? Strapped on cash and can’t afford a premium WordPress theme? Then you should consider editing your theme’s folder and bringing some desperately needed energy into the appearance of your website or blog. In this post, I provide you with 9 CSS recipes that you can use on your site. I hope you find them useful.

1. Changing the Border Style on Image Mouseover

hover image1

Ever wanted to add some focus as visitors mouse over images on your site? With this recipe, you can add a simple border shadow effect to your images.

:hover img {box-shadow: 0 0 8 rgba(0, 0, 0, 0.8);
                -moz-box-shadow: 0 0 8 rgba(0, 0, 0, 0.8);
                -webkit-box-shadow: 0 0 8 rgba(0, 0, 0, 0.8);   }

On the above example, I used box shadow using CSS3. If you want to go old school, try this simple alternative instead:

:hover img {border-style: solid;
                background: #000000;  }

This snippet will create a solid, black border when you put your mouse over the image.

Or, you can add a hover effect to images with links like so:

a img :hover {border-style: solid;
                   background: #000000;   }

2. Adjust Space Between Letters and Words

letter spacing 

h3 { color: #FF0000;
       font-size: 24px;
       letter-spacing: 0.3em;
       word-spacing: 0.2em;  }

Line 4 adjusts the space between letters and line 5 adjusts the space between words. I hope that wasn’t too terribly difficult.

3. Use Pull Quotes for Improved Reading

pullquote

Commonly found in magazines and newspapers, pull quotes are a great way to make your articles easier to read.

.pullquote { width: 300px;
                float: right;
                margin: 5px;
                font-family: Georgia, "Times New Roman", Times, serif;
                font: italic bold #ff0000 ; }

4. Change the Text Selection Color

text selection color

CSS-Tricks.com

Tired of the default blue background and white text when you highlight text on a browser? With this recipe, you can change it to your heart’s desire.

::selection { color: #000000;
                  background-color: #FF0000;  }

Include the following to add support for Mozilla Firefox browsers:

::-moz-selection { color: #000000;
                          background: #FF0000;  }

With this recipe, you can add a subtle detail that can make your blog stand out from others.

5. Remove the Smiley Face at the Footer of your Blog

Recognize this guy?
smiley
He’s usually hanging out at the bottom of your pages. No, he is not a virus and he didn’t come to torment you. If you have the WordPress.com Stats plugin installed on your blog or website, the plugin will automatically insert this image at the bottom of your page. To remove it, simply insert this snippet into your blog’s stylesheet:

img#wpstats { display:none; }

Or, you can simply leave him alone. He won’t bite.

6. Rounded Borders Around Images

With CSS3, you can do really start creating something beautiful. With this recipe, you can specify how much to round the corners of your images.

img { border-radius: 25px;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;   }

7. Indent the First Line of a Paragraph

p{ text-indent: 2.5em;
    margin: 0 0 0.5em 0;
    padding: 0;   }

8. Remove Textarea Scollbar in Internet Explorer

IE scrollbar
Once again, IE can’t stop complaining and demands our attention. This time, he automatically inserts a scrollbar in the textarea even when the entire content is visible. Use this snippet to shut him up.

textarea{ overflow: auto;   }

9. Drop Caps

dropcaps

Drop caps are a great way to make your articles look more professional. Check out this recipe:

p:first-letter{display:block;
                  margin:5px 0 0 5px;
                  float:left;
                  color:#FF3366;
                  font-size:60px;
                  font-family:Georgia;  }

Image via tnarik

For more ways to customize your blog’s design, check out this article from FWebDe: Basic CSS3 Techniques to Liven Up Your Blog’s Design

This is a call to action. Respond to this call to action in the comments section below.

Related posts:

  1. The Best of 2009: Blog Posts, Videos, and Tweets
  2. 4 Ways to Maximize Your WordPress.com Blog
  3. 8 iPhone Applications That Help You Blog
  4. 5 Solutions to Common WordPress Problems
  5. How to Customize your WordPress Admin Area

Last updated on:

June 22, 2010 at 10:41 am

Hide

Written by Tony Hue

Tony Hue is a second-year college student majoring in Business Administration. During his free time, he enjoys watching hilarious viral videos of cats and blogging excessively to a nonexistent audience. You can follow Tony on Twitter or join the LonePlacebo Facebook Page .

"Sharing is caring"

rss email

Join the conversation!

15 comments to “9 CSS Snippets To Spice Up Your Blog ”

Speak up!

(required)*

(required but will not be published)*


CommentLuv Enabled

 

Back to Top