Click here to Skip to main content
15,071,928 members
Articles / Web Development / HTML
Posted 3 Nov 2013


9 bookmarked

Web Site Extreme Makeover, Part 7 of 7

Rate me:
Please Sign up or sign in to vote.
4.94/5 (5 votes)
3 Nov 2013CPOL3 min read
Some final snazzification, polishing, and deployment

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

Image 1

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:

Image 2

Up and Running

The site has been published to

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

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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

B. Clay Shannon
Founder Across Time & Space
United States United States
I am in the process of morphing from a software developer into a portrayer of Mark Twain. My monologue (or one-man play, entitled "The Adventures of Mark Twain: As Told By Himself" and set in 1896) features Twain giving an overview of his life up till then. The performance includes the relating of interesting experiences and humorous anecdotes from Twain's boyhood and youth, his time as a riverboat pilot, his wild and woolly adventures in the Territory of Nevada and California, and experiences as a writer and world traveler, including recollections of meetings with many of the famous and powerful of the 19th century - royalty, business magnates, fellow authors, as well as intimate glimpses into his home life (his parents, siblings, wife, and children).

Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.

I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction, including a two-volume social and cultural history of the U.S. which covers important events from 1620-2006:

Comments and Discussions

QuestionYour articles seem consistent! Pin
Ivor O'Connor4-Nov-13 5:18
MemberIvor O'Connor4-Nov-13 5:18 
AnswerRe: Your articles seem consistent! Pin
Ivor O'Connor4-Nov-13 23:56
MemberIvor O'Connor4-Nov-13 23:56 
GeneralRe: Your articles seem consistent! Pin
B. Clay Shannon5-Nov-13 2:37
professionalB. Clay Shannon5-Nov-13 2:37 
GeneralRe: Your articles seem consistent! Pin
Ivor O'Connor5-Nov-13 3:45
MemberIvor O'Connor5-Nov-13 3:45 
GeneralRe: Your articles seem consistent! Pin
B. Clay Shannon5-Nov-13 6:08
professionalB. Clay Shannon5-Nov-13 6:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.