Don't Miss

4 Cool CSS Tricks to Spice Up your Blog

By Zohaib Liaqat - 6 Comments
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.
4 Cool CSS Tricks to Spice Up your Blog
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.
3d text effect using css blogolect

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.
blurry text effect using css blogolect

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.
flipped image effect using css blogolect

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

6 comments to ''4 Cool CSS Tricks to Spice Up your Blog"

ADD COMMENT
  1. Good tips to enhance the blog traffic
    jack
    bizbilla b2b

    ReplyDelete
  2. A debt of gratitude is in order for a fascinating post. Entirely you will realize while writing your paper on reporting there is a fight between standard and web news-casting. We ought not attempt to direct news-casting, as though it is a danger to society. I don't think we require a more extensive definition, however I do think we require proficient guidelines custom essay writing service separating it from independent/free writer. We as a whole ought to comprehend, the main admendment is the thing that constitutes everybody to be a writer by the right to speak freely.

    ReplyDelete
  3. I can say I was lucky because I've never been fired. First of all, due to the fact that I gave all my strength to work, and if the work ceased to be interesting for me, I didn't try to torture myself and immediately quit the job. Of course, after each such departure, I also had to recover, because it was rather pitiful to be disappointed in a place that seemed so wonderful to you and where you spent your days, found new friends. But usually I only grieve for a couple of days, and then I start looking for jobs, I order a resume after I discovered http://www.articlebiz.com/article/1051645613-1-5-things-you-need-to-do-before-applying-for-a-new-job/ and started going to the interviews.

    ReplyDelete
  4. The Snow Blower Black Friday Ad 2019 is Here! I have all of the Snow Blower Black Friday deals to share with you Snow Blower Black Friday Ad Scans for you to preview so you can see all the deals coming up at Snow Blower Black Friday deals.

    ReplyDelete