Create A Fade-In-Out Logo With CSS

[naathyn]

This is a very simple tutorial illustrating how you can make a nice logo using simple CSS tricks. Currently the logo styling is black and works well on a dark background as it is given an embossed effect with its text-shadow. When hovered, it will slowly transition to white. Feel free to modify the colour of the logo and the colour of its hover. You can also tinker around with the transition ease for faster/slower effects. I have included cross-compatibility with IE, Mozilla and Webkit browsers as you can see in the code.

#logo {
    float: left;
    margin-right: 1em;
    font-size: 1.7em;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -1px;
    padding-top: 9px;
    font-weight: bold;
    line-height: 1;
    /* black */
    color: rgb(0, 0, 0);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .1),
                 0 0 30px rgba(255, 255, 255, .125);
    -webkit-transition: all ease-in-out 0.4s;
    -moz-transition: all ease-in-out 0.4s;
    transition: all ease-in-out 0.4s;
    transform: scale(1);
}

#logo:hover {
    /* white */
    color: rgb(255, 255, 255);
}

To apply it in your html you simply would do something like this:

<a href="#" id="logo"> My Logo </a>

Now you're all set! If you run into any problem, I'm here to help.

Demo

 

[Jake]

Nice tutorial, naa.

 

[naathyn]

Thanks alot 🙂