Web Site Extreme Makeover, Part 7 of 7

Imitating Shimmering Water with CSS

We will now add some pizazz to the prime text of the home page by associating a CSS animation with it, so that it cycles through various shades of blue when the site is first opened / the home page loads.

First, I add this to Site.css

/*In memory of Rory Gallagher*/
.EdgedInBlue {
    color: white;
    font-size: 2em;
    font-family: 'Segoe UI Light', Candara, Consolas, Calibri, sans-serif !important;
    text-shadow: 4px 3px 6px #000000;
    text-shadow: 4px 3px 6px rgba(0, 0, 0, .5);
    display: inline;
    padding-right: 10px;

    animation-name: bluesForRory;
    animation-duration: 5s;
    animation-delay: 2s;
    -moz-animation: bluesForRory 5s 1 linear;
    -o-animation: bluesForRory  5s 1 linear;
    -webkit-animation: bluesForRory 5s 1 linear;
    animation: bluesForRory 5s 1 linear;
}

@-webkit-keyframes bluesForRory {
from {
         color: MidnightBlue;
     }
7% {
        color: Navy;
    }
14% {
        color: Blue;
    }
21% {
        color: DeepSkyBlue;
    }
28% {
        color: SkyBlue;
    }
35% {
        color: LightSkyBlue;
    }
42% {
        color: Aqua;
    }
49% {
        color: PowderBlue;
    }
56% {
        color: Azure;
    }
63% {
        color: PowderBlue;
    }
70% {
        color: Aqua;
    }
77% {
        color: LightSkyBlue;
    }
84% {
        color: SkyBlue;
    }
88% {
        color: DeepSkyBlue;
    }
92% {
        color: Blue;
    }
96% {
        color: Navy;
    }
to {
       color: MidnightBlue;
   }
}

As you can see, I start with MidnightBlue and return to MidnightBlue, but in-between that cycle through various shades of blue, giving approximately equal time to each shade.

Note, though, that in addition to "@-webkit-keyframes rainbowGlow", you will also need the same CSS with:

@-moz-keyframes bluesForRory, @-o-keyframes bluesForRory, and @keyframes bluesForRory

Finally, I give the primary (H1) text on the home page the "EdgedInBlue" class, like so:

<h1 class="EdgedInBlue">Hartt's Pool Plastering</h1>

I can't really show in a screen shot how this works, since it's ephemeral. You can either see a similar effect at my site http://www.awardwinnersonly.com (where it goes through the colors of the rainbow), or wait until this site is live and check it out then.

Nevertheless, this effect also adds a shadow to the text, so I will tease you with a “snapshot” of the effect:

Now For Some Font Refinement

I'm not crazy about the fonts used by default on the page, so I'm going to create a CSS class or two that I will use to prettify the text a little.

It ended up being several CSS classes that I created. I won't go into great detail about which ones I applied where, for two reasons: 0) It would be kind of boring, and 1) These are decisions you should make yourself, anyway, based on your sense of style, the desires of the customer, the nature of the business (it's “personality” etc.). Nevertheless, here are the CSS classes that I added:

.coolPool {
    color: midnightblue;
    font-family: "Segoe UI", Consolas, sans-serif;
}

.statelyPresence {
    font-family: "Palatino Linotype", "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans Condensed", sans-serif;
}

.beanies {
    font-variant: small-caps;
}

.whiterShadeOfPale {
    color: White;
}

You can tell from the names I give my CSS classes that I'm either easily amused or I like to have fun with my variable/class names. To each his own / YMMV. At any rate, these are the classes I added and then applied to various HTML tags to make the site's text a little more appealing from my perspective / point of taste. Speaking of Taste, they did a song entitled “What's Goin' On” before Marvin Gaye did.

Here's an idea of what it looks like now with these changes:

Up and Running

The site has been published to http://replaster.azurewebsites.net

It still needs some tweaking, as far as changing and adding text, perhaps adding a few images, but for the most part, it's done, I think. To compare it to the original site, go to http://www.replaster.com

Farewell, and Thanks For All The Catfish

So ends our epic trek into the land of UI refactoring and semi-blindly fumbling our way to the end. If you made it through all seven installments, give yourself a pat on the back or go to the mirror and smile at the first person who shows up.

In Case You Missed Them - Previous Installments in the Series