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 :)

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Unknown 12/04/2014