5 Cool CSS Tricks To Spice Up Your Website

CSS tricks
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"/>
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;
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
/* emails */
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
/* PDFs */
    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 :)

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 »

Post a Comment

We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.