Click here to Skip to main content
Click here to Skip to main content

Web Site Extreme Makeover, Part 7 of 7

, 3 Nov 2013
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)

About the Author

B. Clay Shannon
Publisher "Found in the Translation"
United States United States
I am the entire team at "Found in the Translation," which produces multilingual books (paperback and Kindle versions) such as "Don Quixote: In Spanish and English, Paragraph-by-Paragraph" among many others (English paired with not only Spanish, but also French and even Finnish). You can see all those books here: http://jsfiddle.net/clayshannon/pRgQL/75/
 
Personal web sites that I have created can be seen at http://usamaporama.azurewebsites.net and http://bigsurgarrapata.azurewebsites.net/ and http://www.awardwinnersonly.com
 
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 "half cowboy, half Indian") and nonfiction: http://www.lulu.com/spotlight/blackbirdcraven
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionYour articles seem consistent! PinmemberIvor O'Connor4-Nov-13 5:18 
AnswerRe: Your articles seem consistent! PinmemberIvor O'Connor4-Nov-13 23:56 
GeneralRe: Your articles seem consistent! PinprofessionalB. Clay Shannon5-Nov-13 2:37 
Thanks; I know about it; I posted a question on msdn as to why; they said I have exceeded my data limits, but I don't understand what data the site is sending... I may have to move it elsewhere...
GeneralRe: Your articles seem consistent! PinmemberIvor O'Connor5-Nov-13 3:45 
GeneralRe: Your articles seem consistent! PinprofessionalB. 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 | Mobile
Web04 | 2.8.140709.1 | Last Updated 3 Nov 2013
Article Copyright 2013 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid