Efectos en videos con CSS

Todos sabemos bien que CSS es un mecanismo simple, una forma de descripción de estilos que ofrece a los desarrolladores el control total

sobre el estilo y formato de sus documentos.

Es por eso que hoy gracias a algunas nuevas propiedades de WebKit Nightly, específicamente la propiedad de efectos CSS con HTML5 video, les traemos este interesante efecto CSS para que implementen en sus archivos de video.

Con un poco de CSS como el que está a continuación, podremos lograr el bonito efecto de reflejo vivo en HTML5 video (el cuál reproduce un .mov a elección)

CSS

.reflector
{
-webkit-box-reflect: below 1 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(1.0, rgba(255, 255, 255, 0.5)));
}
.fader
{
-webkit-transition-property: opacity;
-webkit-transition-duration: 550ms;
-webkit-transition-timing-function: ease-in-out;
}

En sólo unas pocas líneas de jQuery construimos el listado de películas, luego haremos fade in en el video y lo reproduciremos todo con un con un solo clic, con ayuda de este código Javascript:

JAVASCRIPT