5 Cool CSS Tricks To Spice Up Your Website

CSS is a basic part of any webpage, and is what gives the page its distinctive look. CSS can be simple yet complicated at the same time, from a simple typography rule to a complex animation. It can be used to create amazing things. Today, we'll share some CSS styles which you might useful, and may use on your website to spice things up a bit.

1. Blurry text

Blurry text has a certain appeal, and is often used to direct attention towards a specific piece of text. Not to mention it looks cool :) Here's the CSS for making some text blurry. The trick is to fist make the text transparent, then add a drop shadow like so;

.blurry-text {

   color: transparent;

   text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

Here's a sample text that is really blurry.

2. Animated gradient

Sounds cool, right? Well it is. Strictly speaking, you cannot animate a gradient color unlike some of the other CSS properties. You can, however, move the background around to make it look like it's animated.

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;

}

3. Image Grayscale

Grayscale tones up an image and makes it look classy and cool. You can apply an SVG filter to an image to turn it into grayscale.

<svg xmlns="http://www.w3.org/2000/svg">

    <filter id="grayscale">

        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>

    </filter>

</svg>

img {

    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */

    filter: gray; /* IE6-9 */

    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

} 

4. Customizing link types

You can use CSS to customize how different types of links appear based on their file formats. You can set http:// links to appear a certain way, and mailto: and .pdf files to appear another. Here's the CSS;

a[href^="http://"]{

    padding-right: 20px;

    background: url(external.gif) no-repeat center right;

}

/* emails */

a[href^="mailto:"]{

    padding-right: 20px;

    background: url(email.png) no-repeat center right;

}

/* PDFs */

a[href$=".pdf"]{

    padding-right: 20px;

    background: url(pdf.png) no-repeat center right;

}

5. Vertical alignment

Vertically aligning something can be a real pain. There's no simple property you can apply to everything. Here is, however, a CSS3 transform style which you can use to vertically align anything.

.verticalcenter {

    position: relative;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%);

}

Got any more cool CSS tricks you want to share with us? Let us know in the comments section below! Cheers :)