Click here to Skip to main content
11,720,785 members (77,048 online)
Click here to Skip to main content

Web Site Extreme Makeover, Part 7 of 7

, 3 Nov 2013 CPOL 8.3K 9
Rate this:
Please Sign up or sign in to vote.
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 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

License

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

Share

About the Author

B. Clay Shannon
Founder "Across Time & Space"
United States United States
Ideaman and Coder at Across Time & Space, creator of "Mark Twain Central" at http://twaincentral.azurewebsites.net/

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: http://www.lulu.com/spotlight/blackbirdcraven

You may also be interested in...

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    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150901.1 | Last Updated 3 Nov 2013
Article Copyright 2013 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid