CSS3 is awesome!

I have been playing around with my design lately, and want to share some of the cool things that I've done.

The old behavior of making links bigger when you mouse over them is gone. This was done by using the transition, transform, and scale CSS properties, like so (Firefox example shown):

a, a:visited {
    -moz-transition: -moz-transform 0.3s linear 0s;
}
a:hover {
    -moz-transform: scale(1.15);
}

This design decision had certain discrepancies in different browsers, like whether the text should remain centered on where it did, has a line break in it, should move towards the center if it's on the edge of the screen, and other questions.

In its place, there is a glowy effect. I intended this to be like a neon or fluorescent light turning on and off. This is implemented by the transition and text-shadow properties:

a, a:visited {
    -moz-transition: text-shadow 0.3s linear 0s;
}
a:hover {
    text-shadow: 0 0 10px currentcolor, 0 0 15px currentcolor;
}

This cannot be easily done in Internet Explorer, but should work for the other horsemen of the web (Firefox, Chrome, Safari, Opera), but Opera does not support the nice turn on/off effect, but still glows. (UPDATE: As of version 12, Opera fully supports transitions on text shadows.)

The side bar has a gradient going from a dark red to the page background color. I'm not sure if one would call that maroon, burgundy, or something else; I was never good at tertiary colors like that. On an LCD monitor, if you look at it from the side, the color changes a bit, like it's a hologram!

#sideContent {
    background-image: -moz-linear-gradient(#130017, #020A1D);
    background-color: #130017; /* fallback */
}

I have also implemented a print style sheet. This was rather easy, just add display: none to every part of the page I don't want printed. I used some no-frills alignment, black on white colors, and an appropriate font size.

@media print{
    body{
        font-size: 0.8em;
        background-color: #FFFFFF;
        color: #000000;
        width: 100%;
        font-family: Arial, sans-serif;
    }h1,h2,h3{
        font-family: "Segoe UI", Arial, sans-serif;
    }pre,code{
        font-family: "Lucida Console", monospace;
    }#sideContent,.articleDatea,form,#pagenation,#downContent{
        display: none;
}}

Only if more people knew about this secret, there would be no need for "print friendly" buttons on websites.

I noted that my web fonts do not work reliably all the time when printed, so I fall back to the next fonts in the list. Internet Explorer 9 surprised me, being the only browser that actually printed web fonts as expected.

Posted under Programming.

No new comments may be posted for this article at this time.