4 Cool CSS Tricks to Spice Up your Blog

No doubt! Every Blogger loves CSS. CSS is used for styling webpages, customizing colors, layout etc. Almost everything that we do for styling our blog is based on CSS. There are thousands of amazing things that you can do with CSS. Even if you've been learning CSS for many years, you probably still come to new things, new values, new effects/tricks and properties you've never used.

So, lets learn some new CSS tricks today, that you can use to spice up your blog. In this tutorial we'll share 4 Cool CSS tricks that you might find useful.

3D Text

Create a 3D effect for your text using this simple CSS code. Add this CSS code to the CSS code of that element which you want to make 3D. You can make it look more cool by changing its color.

text-shadow:   1px 0px #eee, 0px 1px #ccc,
                      2px 1px #eee, 1px 2px #ccc,
                      3px 2px #eee, 2px 3px #ccc,
                      4px 3px #eee, 3px 4px #ccc,
                      5px 4px #eee, 4px 5px #ccc,
                      6px 5px #eee, 5px 6px #ccc,
                      7px 6px #eee, 6px 7px #ccc,
                      8px 7px #eee, 7px 8px #ccc,
                      8px 8px #eee;

Check the Image below to see how it Looks.

Blurry Text

Turn your normal text to a cool blurry text using CSS. Use the below CSS code to create a blurry text and grab your visitors attention :)

.blur {
   color: transparent;
   text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

Check the Image below to see how it Looks.

Flip an Image

Sounds crazy! You can flip images with CSS. Try this amazing effect for your blog. Use the below CSS to Flip an Image.

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

Before you try this effect, have a look at the image below.

Animated Gradient Effect

Create animated gradient effect for your blog buttons. Use the below CSS to create animated gradient effect. You can also use this effect for styling your labels widget.

.button {
background-image: linear-gradient(#518712, #124555);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
.button:hover {
background-position: 0 0;
}

We hope you enjoyed this article and also learned some new CSS tricks. We'll cover some more tutorials on CSS this week. Stay Tuned!

Share these tricks with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Share This:

Tags:

Beginner's Guide CSS Tricks

• Prevoius
• Next