CSS3 page fade in

2012-10-27T18:01:00.002-06:00

If you ever see a page fade in, it is most likely done with Jquery. But it is also possible to do this with CSS3 animation. Here's how.

First start by adding the animation property to the wrapper.

::-moz-selection {
      animation: fadein 3s;
    -moz-animation: fadein 3s;
    -webkit-animation: fadein 3s; 
    -o-animation: fadein 3s;
}

Now it's time to use the @keyframes at rule.

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-webkit-keyframes fadein { /* Chrome & Safari */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

Try the demo.
Also, here's a detailed article on CSS3 animation.

CSS Selection Styling

2012-10-24T17:08:00.001-06:00

Styling the selection color is an simple way to spice up your website and it can be done easily with a few lines of CSS. Here's how:

::-moz-selection {
    background-color: #51B653;
}

::selection {
    background-color: #51B653;
}

The ::selection and ::-moz-selectionselectors are supported in Firefox, Chrome, Safari, Opera, and IE9+.

Sadly, their are limitations on the CSS properties. You can use: background, color, outline, and cursor.

Here is a quick demo of ::selection.

Code Pond

CSS3 page fade in

CSS Selection Styling