Uso práctico de CSS3: Transformaciones y transiciones

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las transformaciones y transiciones (introducidas como parte de la especificación CSS3) nos permiten crear el tipo de interacción y experiencia que anteriormente solo se relacionaba con JavaScript o Flash. Es probable que hayas leído gran cantidad de discusiones y tutoriales que cubren estas propiedades, aunque tienden a ser de naturaleza más bien experimental.

En este tutorial exploraremos las transformaciones y las transiciones CSS creando algo más útil. Vamos a crear una sola página HTML estática que utilizará transformaciones y transiciones en un slider, además de algunos interesantes efectos de desplazamiento.

Antes de continuar vale la pena señalar la compatibilidad del navegador. Este tutorial muestra técnicas modernas, técnicas que serán habituales más adelante, pero que de momento carecen de compatibilidad en los navegadores más antiguos. Echa un vistazo a caniuse.com para un análisis más detallado sobre qué navegadores admiten los diversos métodos que vamos a describir aquí.

Preparación

Bien, en este punto ya sabemos a hacia dónde nos dirigimos, para poder decidir qué tenemos que preparar.

Antes que nada, la preparación es la clave del éxito. ~ Alexander G. Bell

Habilidades básicas

En primer lugar, necesitamos una comprensión básica de HTML y CSS. Suponiendo que cumplas con esto, ya estamos preparados para ponernos en marcha.

Sin embargo, si eres verdaderamente nuevo en esta área, te aconsejo que te tomes un tiempo para ponerte al día sobre el tema; afortunadamente Envato ha proporcionado un curso gratuito de 30 días que te enseñará todas las cosas esenciales que necesitas saber sobre HTML y CSS.

Buscar imágenes

Obviamente, para crear el slider del sitio web necesitaremos algunas imágenes, así como los subtítulos de las mismas. PhotoDune servirá muy bien a nuestros propósitos. Las imágenes que usaremos en este tutorial son las siguientes.

También necesitaremos una textura para el fondo. Actualmente, mi lugar favorito para encontrar texturas es Subtle Patterns y después de navegar entre todas sus páginas, decidí finalmente usar este ejemplo.

Administrar carpetas

Aunque esto es opcional, personalmente me gusta administrar las carpetas de mi proyecto desde el primer paso, de esta manera nos aseguramos de mantener una organización desde el principio. Por lo tanto, para este sitio web he creado dos carpetas principales psd y html, y la carpeta html consta de dos carpetas más, una para las fuentes y otra para las imágenes.

El diseño

A continuación, creamos en Photoshop una maqueta de sitio web que usaremos como referencia mientras lo construimos con HTML. No voy a profundizar en este paso, ya que el diseño real está fuera del alcance de este tutorial. Puedes encontrar numerosos tutoriales de diseño en Tuts+, como este.

Bien, la imagen de abajo representa lo que se me ocurrió; vamos a guardar el archivo dentro de nuestra carpeta psd.

El HTML

Antes de escribir nada de código, he recortado algunos gráficos necesarios que usaré en el diseño. Primero, el fondo para la navegación que tiene un color negro en la parte superior, y después, el patrón personalizado para las miniaturas de la imagen.

Si seguiste todo el curso de 30 días sobre HTML y CSS, el día 27 Jeffrey repasó cómo recortar un archivo PSD.

HTML5

También utilizaremos nuevas etiquetas de la especificación HTML5, así que encontrarás <nav>, <header>, <footer> y algunas otras etiquetas nuevas que yo (honestamente) rara vez uso como <figure> y <figcaption>.

Sin embargo, aquí no discutiremos demasiado sobre HTML5, eso va más allá del alcance de este tutorial. En su lugar, puedes encontrar un montón de tutoriales HTML5 en Tuts+.

Cabecera y navegación

Muy bien, ahora abramos un editor de texto y empecemos a codificar algún tipo de marcado.

Como puedes ver en el diseño final, no separaremos el menú y la sección de cabecera, por lo que la navegación principal en sí se ajustará dentro de la etiqueta de cabecera (<header>).

 
<header> 
	<div> 
		<h1 class="home"><a href="/">the resto.</a></h1> 
		<nav id="site-nav"> 
			<ul class="menu"> 
				<li><a href="#">About</a></li> 
				<li><a href="#">Contact</a></li> 
				<li><a href="#">Restaurant</a></li> 
				<li><a href="#">Store</a></li> 
			</ul> 
		</nav> 
	</div> 
</header>

Sección del slider

El slider de imagen se ajustará dentro de una etiqueta de sección. section es un nuevo elemento que también se incluye en la nueva especificación HTML5 y que sirve para definir una sección o segmento en un documento HTML.

 
<section id="image-slider"> 
	<div class="hidden"> 
	<span class="shine"></span> 
	<ul> 
		<li id="slide-1" class="slide"> 
		<figure> 
			<img src="images/slide/grilled-chicken.jpg" /> 
			<figcaption> 
				<p>Faworki cotton candy apple pie lollipop. Jelly beans apple pie sweet roll pie cheesecake.</p> 
			</figcaption> 
		</figure> 
		</li> 
		<li id="slide-2" class="slide"> 
		<figure> 
			<img src="images/slide/pasta.jpg" /> 
			<figcaption> 
				<p>Sesame snaps caramels powder muffin applicake chocolate cake.</p> 
			</figcaption> 
		</figure> 
		</li> 
		<li id="slide-3" class="slide"> 
			<figure> 
				<img src="images/slide/steak.jpg" /> 
				<figcaption> 
					<p>Pie danish applicake sugar plum sweet roll faworki cookie lollipop carrot cake. Chupa chups jujubes cupcake tart. </p> 
				</figcaption> 
			</figure> 
		</li> 
		<li id="slide-4" class="slide"> 
			<figure> 
				<img src="images/slide/cappuccino.jpg" /> 
				<figcaption> 
					<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 
				</figcaption> 
			</figure> 
		</li> 
	</ul> 
	</div> 
	 
	<!-- image slider navigation --> 
	<nav class="nav-slider"> 
		<ul> 
			<li><a href="#slide-1">1</a></li> 
			<li><a href="#slide-2">2</a></li> 
			<li><a href="#slide-3">3</a></li> 
			<li><a href="#slide-4">4</a></li> 
		</ul> 
	</nav> 
	</section>

Este es todo el HTML que necesitamos para formar nuestro slider de imágenes. Ahora, echemos un vistazo más de cerca a cada parte del marcado.

Empezando con <div class="hidden">, usaremos esta clase para ocultar las diapositivas que se desbordan de la dimensión especificada; que en este caso sería de 960 por 380 píxeles.

Las diapositivas se estructuran mediante una lista sin orden. Cada una de las diapositivas está contenida dentro de una etiqueta <li> con un identificador único <li id="slide-3 class="slide"> para que podamos seleccionar una diapositiva específica a través de un identificador de fragmento más adelante.

Ten en cuenta que usamos figure para contener la imagen de diapositiva y figcaption para el título de la diapositiva. Estos elementos describen perfectamente, semánticamente, los roles y la relación que tienen.

 
<figure> 
	<img src="images/slide/cappuccino.jpg" /> 
	<figcaption> 
	<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 
	</figcaption> 
</figure>

figure es una nueva etiqueta de la especificación HTML5. Esta etiqueta está diseñada para marcar gráficos, fotos, diagramas, etc. Mientras que figcaption, según w3c, representa una leyenda o pie de foto para la figura. Por lo tanto, estas etiquetas están efectivamente interrelacionadas.

Sección de leyendas de imagen

La leyenda de la imagen también se ajustará dentro de una etiqueta section.

 
<section id="image-caption"> 
	<ul> 
	<li class="thumbnail thumbnail-1"> 
		<figure> 
		<span class="pattern-overlay"></span> 
			<img src="images/thumbnail/women-at-dinnner.jpg"/> 
		<figcaption> 
		<p>Lemon drops dessert</p> 
		</figcaption> 
		</figure> 
	</li> 
	<li class="thumbnail thumbnail-2"> 
		<figure>	 
		<span class="pattern-overlay"></span> 
			<img src="images/thumbnail/cooked-breakfast.jpg"/> 
		<figcaption> 
		<hr /><h3>Apple pie chupa</h3> 
		<p>Apple pie chupa chups pudding cheesecake pie cake topping jelly-o.  
		Icing sweet roll toffee.</p> 
		<p>Lemon drops toffee pastry cookie marzipan carrot cake tart sweet roll tiramisu.</p> 
		</figcaption> 
		</figure> 
	</li> 
	<li class="thumbnail thumbnail-3"> 
		<figure> 
		<span class="pattern-overlay"></span> 
		<img src="images/thumbnail/steamed-dumplings.jpg"/> 
		<figcaption> 
		<hr /><h3>Jelly beans</h3> 
		<p>Jelly beans icing macaroon pudding carrot cake.  
		Sweet roll halvah pudding cookie candy canes cake jelly marshmallow.</p>  
		<p>Chupa chups halvah tiramisu sugar plum.</p> 
		</figcaption> 
		</figure>	 
	</li> 
	<li class="thumbnail thumbnail-4"> 
		<figure> 
		<span class="pattern-overlay"></span> 
			<img src="images/thumbnail/salad.jpg"/> 
		<figcaption> 
<p>Gummies chocolate bar tootsie roll oat cake gummies. Sesame snaps faworki ice cream tootsie roll pastry.</p> 
		</figcaption> 
		</figure> 
	</li> 
<li class="thumbnail thumbnail-5"> 
		<figure> 
		<span class="pattern-overlay"></span> 
			<img src="images/thumbnail/table-in-restaurant.jpg"/> 
		<figcaption> 
		<p>Wypas cheesecake sweet ice cream faworki macaroon sweet pie.  
		Tart sweet muffin pastry cotton candy ice cream chocolate gummi bears.</p> 
		</figcaption> 
		</figure> 
	</li> 
	<li class="thumbnail thumbnail-6"> 
		<figure> 
		<span class="pattern-overlay"></span> 
			<img src="images/thumbnail/pizza.jpg"/> 
		<figcaption> 
		<hr /><h3>Chocolate chocolate</h3> 
		<p>Chocolate chocolate cake wafer halvah jelly ice cream fruitcake wypas.  
		Sweet topping candy sugar plum bear claw sugar plum bonbon. </p> 
<p>Croissant sweet roll apple pie cotton candy bear claw marshmallow cheesecake ice cream chocolate bar</p> 
		</figcaption> 
		</figure> 
	</li> 
	</ul> 
</section>

Eso es todo lo que necesitamos para la sección Image Caption, el marcado se explica bastante bien por sí solo, ya que es similar al marcado de Image Slider.

Pie

Simplemente añadiremos texto de copyright en el pie de la página.

 
<footer> 
<p>Envato &copy; 2012. All rights reserved</p> 
</footer>

El estilo

En esta sección comenzaremos todo el trabajo de aplicación de estilos. Asumo que ya sabes cómo separar los estilos del documento HTML y vincularlos usando un archivo css.

<link href="style.css" rel="stylesheet" type="text/css" />

Prefix-Free

Los estilos utilizarán muchas especificaciones CSS3 nuevas, que para funcionar correctamente requerirán, por desgracia, de un prefijo de proveedor para cada navegador. Como -o- para Opera, -moz- para Mozilla Firefox y -webkit- tanto para Safari como para Chrome. Escribir CSS hinchado de esta manera puede ser muy ineficiente.

Por lo tanto, he decidido añadir prefix-free de Lea Verou en el documento; una biblioteca JavaScript que gestiona automáticamente todos estos prefijos de proveedor, así que sólo tendremos que añadir el formato oficial de la propiedad. Por ejemplo, normalmente tendríamos que escribir la siguiente regla CSS para escalar un elemento:

 
div { 
	transform: scale(2,4); 
	-ms-transform: scale(2,4); /* IE 9 */ 
	-webkit-transform: scale(2,4); /* Safari and Chrome */ 
	-o-transform: scale(2,4); /* Opera */ 
	-moz-transform: scale(2,4); /* Firefox */ 
}

Mientras usemos el script prefix-free, podremos eliminar todos los prefijos de proveedor.

 
div { 
	transform: scale(2,4); 
}

Descarga el archivo prefix-free y colócalo en la parte inferior del documento, antes de la etiqueta de cierre del cuerpo.

<script src="prefixfree.js">

Restablecimiento de CSS

Otro problema que encontraremos a través de los navegadores es la incoherencia. Prácticamente cada navegador representa los elementos HTML a con su propio estilo predeterminado y a menudo estos estilos difieren ligeramente.

Para sobrescribir el estilo predeterminado de los navegadores y asegurarnos de que estamos trabajando desde el mismo punto de inicio en cada navegador, usaremos un restablecimiento CSS. Por ahí existen varias opciones; como esta de Eric Mayer, YUI de Yahoo y HTML5 Reset de Richard Clark. Pero esta vez estoy interesado en probar Normalize.css creado por Nicolas Gallagher. Descarga el archivo y coloca el enlace dentro de la etiqueta head, antes de que se haga referencia a cualquier otro archivo css.

 
<head> 
	<link href="normalize.css" rel="stylesheet" type="text/css" /> 
</head>

Muy bien, ahora estamos listos. Comencemos con el estilo. Empieza desde la etiqueta body.

El sitio web tendrá un fondo texturizado; aplicaremos el fondo en el cuerpo, y también especificaremos la familia de fuentes predeterminada y sus tamaño.

 
body { 
	background:url('images/grid-noise.png') repeat; 
	font: 12pt Tahoma, Geneva, sans-serif; 
}

@Font-Face

Hablando sobre la fuente, planeamos aplicar algunas fuentes para el HTML que no son del sistema, por lo que abordaremos esto usando la regla @font-face. Bueno, @font-face no es realmente nada nuevo en CSS, en realidad fue incluido en la especificación CSS2, pero desafortunadamente el método no fue ampliamente adoptado por los diseñadores web en ese momento.

Incluir nuestra propia fuente usando @font-face es bastante simple. De hecho, las buena gente de font squirrel crearon esta práctica herramienta para generar el código que necesitarás.

En nuestro diseño, usamos ChunkFive para el logotipo del restaurante y Titillium para el menú de navegación. Vamos a descargar todas estas fuentes y a aplicar las reglas de @font-face a la hoja de estilos:

 
@font-face { 
	font-family: 'ChunkFiveRegular'; 
	src: url('fonts/Chunkfive-webfont.eot'); 
	src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), 
		 url('fonts/Chunkfive-webfont.woff') format('woff'), 
		 url('fonts/Chunkfive-webfont.ttf') format('truetype'), 
		 url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); 
	font-weight: normal; 
	font-style: normal; 
}

 
@font-face { 
	font-family: 'TitilliumText22LRegular'; 
	src: url('fonts/TitilliumText22L003-webfont.eot'); 
	src: url('fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'), 
		 url('fonts/TitilliumText22L003-webfont.woff') format('woff'), 
		 url('fonts/TitilliumText22L003-webfont.ttf') format('truetype'), 
		 url('fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); 
	font-weight: normal; 
	font-style: normal; 
}

Estilo de la cabecera y la navegación

La cabecera tendrá el fondo que recortamos anteriormente en este tutorial y también aplicaremos nuestra nueva familia de fuentes, a la clase home y nav li.

 
header { 
	background: url('images/nav-bg.png') repeat-x; 
	padding: 0; 
	height: 70px; 
	border-bottom: 2px solid #000; 
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5); 
	width: 100%; 
} 
header > div { 
	width: 960px; 
	margin: 0 auto; 
} 
header .home { 
	margin: 0; 
	font: 36pt/60pt 'ChunkFiveRegular', Arial, sans-serif; 
	text-shadow: 0px 2px 0px #000; 
	float: left; 
} 
header a { 
	text-decoration: none; 
	color: #fff; 
	text-shadow: 1px 1px 0 #000; 
	transition: all 300ms ease-out; 
} 
header nav { 
	float: right; 
} 
header nav ul { 
	padding: 0; 
	margin-right: 6px; 
} 
header nav li { 
	display: inline; 
	font: 12pt/35pt 'TitilliumText22LRegular', Arial, sans-serif; 
	margin-left: 25px; 
	text-transform: uppercase; 
}

Observa que no incluimos prefijos de proveedor para declarar la regla de la sombra de la caja. Tengo que agradecer a Lea Verou por crear el script prefix-free, que ahorra un montón de líos.

Aplicar estilo al contenido

El estilo de #content es estándar. Tendrás un color de fondo ligeramente blanco, un ancho fijo de 960px, centrado en la pantalla, y una sombra paralela.

 
#content { 
	width: 960px; 
	height: auto; 
	margin: 25px auto 0; 
	background: #f3f3f3; 
	border: 1px solid #bbb; 
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3); 
}

Hasta ahora, después de haber aplicado todos los estilos anteriores deberías ver algo similar a esto:

Aplicar estilo al slider de imagen

Ahora, vamos a aplicar algunos estilos al Image Slider. El slider que incluye la navegación tendrá unas dimensiones de 960 por 425 píxeles, mientras que la propia diapositiva de la imagen, como mencionamos antes, solo tendrá 960 por 360 píxeles.

 
#image-slider { 
	height: 425px; 
	width: 960px; 
} 
#image-slider ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
}

La leyenda de la imagen tendrá un fondo ligeramente transparente. Para lograr este efecto de transparencia no usaremos la regla de opacidad, ya que también afectaría al texto dentro de la leyenda. En su lugar, lo lograremos usando el canal Alpha del modo de color RGBA.

 
#image-slider figcaption { 
	background-color: rgba(0,0,0,.7); 
	color: #fff; 
	padding: 10px 20px; 
	position: relative; 
	text-shadow: 1px 1px 0px #000; 
	width: 920px; 
	bottom: 0; 
}

Si prestas mucha atención a la imagen de la diapositiva; hay un espacio en blanco entre la imagen y la leyenda. Para eliminarlo añadimos display: block; a la imagen.

 
#image-slider img { 
	display: block; 
}

Posición de la diapositiva

En esta sección vamos a trabajar con las diapositivas. Estas utilizarán el posicionamiento absoluto para apilarse unas sobre las otras.

 
#image-slider .slide { 
	position: absolute; 
}

Cuando la imagen de la diapositiva no deba ser visible, lo conseguiremos cambiando el valor de su opacidad a cero.

 
#image-slider .slide img { 
	position: relative; 
	opacity: 0; 
}

Sin embargo, la imagen de la primera diapositiva debe estar visible. Por lo tanto, la seleccionaremos específicamente usando el selector :first-child y estableceremos la opacidad en 1.

 
#image-slider .slide:first-child img { 
	opacity: 1; 
}

Vale, el resultado todavía no es lo que esperamos del diseño final. Como puedes ver en la imagen de arriba, las leyendas de las diapositivas que deben estar ocultos siguen siendo visibles. Así que tenemos que ocultarlas.

 
#image-slider .hidden { 
	height: 380px; 
	overflow: hidden; 
	position: relative; 
	width: 960px; 
	border-bottom: 1px solid #aaa; 
}

Creación de efecto brillante

Hay mucho que agradecer a las nuevas especificaciones CSS3, ya que ahora podemos crear un efecto de brillante sin incorporar ninguna imagen. Lograremos el efecto usando Background Gradient (degradado de fondo) de CSS3.

No voy a entrar en detalles sobre cómo aplicarlo, ya que aquí se puede leer este consejo al completo.

Ahora, vamos a añadir los siguientes estilos;

 
#image-slider .shine { 
	height: 300px; 
	margin: 0 auto; 
	position: absolute; 
	right: -60px; 
	top: -58px; 
	transform: rotate(-20deg); 
	background: linear-gradient(45deg, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); 
	width: 1500px; 
	z-index: 5; 
}

Si has leído el consejo, asumo que la regla de degradado debe ser ya obvia para ti. Pero, echemos un vistazo a otra regla para averiguar lo que hace realmente el CSS.

En primer lugar, el <span class="shine">tendrá absoluta: posición con índice z: 5 para llevarlo a la parte superior de otros elementos de la diapositiva. El efecto brillante no aparece correctamente, por lo que el elemento todavía necesita ser girado por aproximadamente -20 grados (transformar: rotate(-20deg);).</span>

Navegación del slider

El estilo del slider es bastante simple. De forma predeterminada, el menú de la navegación tendrá una posición en línea para que cada menú aparezca uno al lado del otro.

 
.nav-slider { 
	text-align: center; 
	padding-top: 15px; 
	border-top: 1px solid #fff; 
} 
.nav-slider li { 
	display: inline; 
	margin: 0 5px; 
}

Observa que la navegación sigue mostrando el texto numérico; debemos quitarlo y darle algunos estilos.

Primero añadimos el bloque en línea (inline-block), por lo que el ancla se puede añadir con un valor de anchura y altura, luego añadiremos text-indent: -9999px para que visualmente el texto no quede dentro.

 
.nav-slider li a { 
	background: #ddd; 
	border: 1px solid #ccc; 
	display: inline-block; 
	height: 19px; 
	text-indent: -9999px; 
	width: 19px; 
}

Las miniaturas de imagen

Ahora, añadiremos estilos a la sección Image Caption.

 
#image-caption { 
	padding: 32px 32px 40px; 
} 
#image-caption ul { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
} 
#image-caption ul li { 
	display: inline-block; 
	width: 270px; 
	vertical-align: top; 
	height: 190px; 
	background: #fff; 
	border: 5px solid #ddd; 
	cursor: pointer; 
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2); 
	position: relative; 
	overflow: hidden; 
}

También eliminamos el espacio en blanco entre la imagen y el título.

 
#image-caption img { 
	display: block;  
}

La miniatura tendrá una superposición de patrón que hemos recortado antes.

  
.pattern-overlay { 
	background: url('images/thumbnail-pattern.png') repeat; 
	height: 190px; 
	width: 270px; 
	position: absolute; 
	z-index: 1; 
}

Como podemos ver en la imagen de arriba, las imágenes en miniatura están amontonadas. Necesitamos un margen para crear un hueco en el medio. En lugar de definir este margen para cada miniatura, dictaremos que solo la imagen central tenga uno usando nth-child.

nth-child es una pseudo-clase css para seleccionar elementos secundarios concretos mediante una fórmula. Para obtener más información sobre esta pseudo-clase, puedes leer esta completa explicación.

Muy bien, primero seleccionaremos las imágenes del medio, en este caso la miniatura de la imagen número 2, 5 y sus múltiplos.

 
.thumbnail:nth-child(3n+2) { 
	margin: 0 23px; 
}

Después de esto, seleccionamos solo las tres primeras imágenes para asignarles un margen inferior. Por lo tanto, la primera y la segunda fila también tendrán un espacio en el medio.

 
.thumbnail:nth-child(-n+3) { 
	margin-bottom: 33px; 
}

Leyendas de las miniaturas

Tomando como referencia nuestro diseño, la leyenda normalmente tendrá un color verde con una ligera transparencia y un borde redondeado.

 
.thumbnail figcaption { 
	background: rgba(136,184,88,0.9); 
	margin: 10px; 
	border-radius: 3px; 
	padding: 10px; 
	width: 230px; 
	color: #fff; 
	font-size: 10pt; 
}

Algunos de los subtítulos tendrán el nivel de titular 3 (H3) y aquí especificamos el estilo para h3.

 
.thumbnail figcaption h3 { 
	font-size: 14pt; 
	font-weight: normal; 
}

El texto dentro de la leyenda se ajusta dentro de una etiqueta de párrafo (p). por lo que también especificamos los espacios entre el titular y el párrafo utilizando un margen.

 
.thumbnail figcaption p, .thumbnail figcaption h3 { 
	margin: 3px; 
	padding: 0; 
}

Y para los estilo del pie de página, simplemente centraremos el texto.

 
footer { 
	width: 960px; 
	text-align: center; 
	margin: 0 auto; 
	color: #777; 
	text-shadow: 1px 1px 0px #fff; 
	font-size: 10pt; 
}

Muy bien, hemos completado todos los estilos necesarios y hasta este momento puedes esperar que el resultado tenga un aspecto parecido a esto:

Los efectos

En esta sección comenzaremos a aplicar algunos efectos al sitio web utilizando transformaciones y propiedades de transición.

¿Cómo funcionan estas propiedades?

Supongo que te habrás encontrado con algunos artículos que ya han explicado estas propiedades (transformaciones y transiciones), especialmente si eres un lector regular de la red de blogs de Tuts+. Permitidme explicar algo sobre estas propiedades para hacer un rápido resumen.

Transform es una nueva propiedad CSS incluida en la especificación CSS3. Con esta propiedad podemos aplicar varias transformaciones como trasladar (mover), rotar, sesgar y escalar elementos.

Las transformaciones pueden lograrse mediante la siguiente función css; transform: transform-method(value). Para el método de transformación podemos usar translate, scale, rotate y skew. Con fines demostrativos, aplicaremos cada uno de estos métodos a las leyendas de nuestras imágenes.

Aunque la transición también forma parte de la especificación CSS3, esta propiedad nos permitirá crear un efecto gradual en la animación en lugar de cambios instantáneos. En formato abreviado, el efecto se puede aplicar utilizando la siguiente función:

transition: <property> <duration> <timing-function> <delay>

Vamos a aplicarlos a los subtítulos de nuestras imágenes para comprenderlo mejor.

Transición de color

En la sección de navegación demostraremos un sencillo ejemplo del efecto de transición. Cambiaremos sin problemas el color del menú de blanco (#FFFFFF) a naranja (#FFB400) especificando la propiedad de transición (transition-property) cuando pasemos el cursor sobre el menú.

Echemos un vistazo a la siguiente regla CSS;

 
#site-nav li a { 
	transition: color 500ms; 
} 
#site-nav li a:hover { 
	color: #ffb400; 
}

La anterior regla CSS especificará solo la propiedad de color que se realizará en la transición con 500 ms de duración. Y observa que no añado ninguna función de sincronización (timing-function) específica. Si no la especificamos, el navegador utilizará ease de forma predeterminada.

Ahora vamos a pasar a la siguiente, y más desafiante, sección.

Efectos de las leyendas de las imágenes

En esta sección aplicaremos varias transformaciones y efectos de transición a las leyendas de las imágenes. Para empezar, especificamos una regla común para la transición de las miniaturas de imagen.

 
.thumbnail img { 
	transition: all 350ms; 
}

No añadimos una propiedad específica en la regla, en su lugar, usamos "all" para ella. Esto significa que el efecto de transición se aplicará a todas las propiedades alrededor de la imagen.

En este caso, cuando pasemos el cursor sobre la imagen, esta será un 30% transparente.

 
.thumbnail:hover img { 
	opacity: 0.3; 
}

En el siguiente paso definiremos cada uno de los comportamientos de transición de las leyendas.

Leyenda 1: Mover hacia arriba

La primera leyenda de imagen tendrá un timing-function lineal, por lo que el movimiento será constante desde el principio hasta el final.

 
.thumbnail-1 figcaption { 
	transition: all 350ms linear; 
	margin: 0 10px 0 10px; 
}

Luego, cuando pasemos el cursor sobre la miniatura, el leyenda se moverá hacia la parte superior. Podemos lograr el movimiento usando el método translate. El método translate hará que el elemento se mueva de un punto a otro punto especificado en el valor de translate.

 
.thumbnail-1:hover figcaption { 
	transform: translateY(-100%); 
	margin-top: -10px; 
}

Usamos un porcentaje para la traslación en lugar de dar un valor concreto en la unidad de píxeles. De esta manera, el título se moverá en relación con la altura de la imagen, independientemente del valor real de la altura. Además, ten en cuenta que hemos añadido margen superior (margin-top).

Leyenda 2: Mover hacia abajo y retrasar la transición

La segunda leyenda tendrá altura y anchura completas para que cubra la miniatura de la imagen. Usaremos ease-in para el título, así que puedes esperar que el título comience lentamente. También añadimos transition-delay por aproximadamente 350 ms, lo que significa que el efecto se iniciará justo después de que se complete la transición de la imagen.

 
.thumbnail-2 figcaption { 
	transition: all 350ms ease-in 350ms; 
	height: 150px; 
	position: absolute; 
	top: -190px; 
}

A continuación, cuando pasemos el cursor sobre la miniatura, la leyenda eventualmente se moverá hacia abajo.

 
.thumbnail-2:hover figcaption { 
	transform: translateY(190px); 
}

Leyenda 3: Efecto zoom-in

Para la tercera leyenda, usaremos ease-out. Al usar esto, la transición de las leyendas finalizará lentamente. Planificamos el zoom de la leyenda cuando pasemos el cursor sobre la miniatura respectiva, por lo que especificamos la escala de la leyenda a 0 en su punto inicial.

 
.thumbnail-3 figcaption { 
	transition: all 350ms ease-out; 
	transform: scale(0); 
	height: 150px; 
	opacity: 0; 
	position: absolute; 
	top: 0; 
}

Y a continuación, está el conjunto de reglas CSS para el estado hover. Cuando pasemos el cursor sobre la tercera miniatura, la leyenda se escalará, de nuevo a su dimensión original.

 
.thumbnail-3:hover figcaption { 
	transform: scale(1); 
	opacity: 1; 
}

Leyenda 4: Múltiples transformaciones

El cuarto título tendrá una transformación rotatoria y para que el texto no se invierta giraremos la leyenda primero unos -180 grados.

Tanto la leyenda como el texto de su interior tendrán propiedad de transición y esta vez usaremos ease-in-out. A juzgar por el nombre de la función, como puedes adivinar, hará que el efecto de transición comience y termine lentamente.

 
.thumbnail-4 figcaption { 
	transition: all 500ms ease-in-out; 
	transform: rotate(-180deg); 
	overflow: hidden; 
	max-height: 150px; 
	position: relative; 
}

Dado que planeamos hacer un efecto de alejamiento para el texto, primero lo transformamos para escalarlo verticalmente un 300% y lo ocultamos visualmente disminuyendo la opacidad.

 
.thumbnail-4 figcaption p { 
	transition: all 350ms ease-in-out 500ms; 
	transform: scale(3); 
	opacity: 0; 
}

Después, cuando pasemos el cursor sobre la miniatura, la leyenda eventualmente se moverá a la parte superior desde su posición inicial y al mismo tiempo rotará. Este es un sencillo y práctico ejemplo de cómo podemos aplicar múltiples transformaciones en un elemento.

 
.thumbnail-4:hover figcaption { 
	transform: rotate(0deg) translateY(-100%); 
	margin-top: -10px; 
}

Para la transformación del texto, lo vamos a alejar como mencionamos anteriormente.

 
.thumbnail-4:hover figcaption p { 
	transform: scale(1); 
	opacity: 1; 
}

Leyenda 5: Jugando con cubic-bezier

Hablando de la función de sincronización de la transición, ya usamos ease, linear, ease-in, ease-out, así como ease-in-out. Estas palabras clave son en realidad representaciones de valores específicos de curvas de bezier. Como:

linear es igual a cubic-bezier(0,0,1,1)
ease es igual a cubic-bezier(0.25,0.1,0.25,1)
ease es igual a cubic-bezier(0.42,0,1,1)
ease-out es igual a cubic-bezier(0,0,0.58,1)
ease-in-out y salida es igual a cubic-bezier(0.42,0,0.58,1)

Esta vez, para esta leyenda, intentaremos usar un bézier cúbico con un valor personalizado. En realidad, es muy difícil predecir cómo funcionan los cambios si no estamos viendo los resultados en vivo. Afortunadamente, existe una práctica y muy útil herramienta para jugar con cubic-bezier, de manera que podamos ver el resultado de los cambios de forma inmediata.

Visita cubic-bezier.com, creado por Lea Verou, donde podrás jugar con curvas de bezier la misma persona detrás de prefix-free.

En el siguiente CSS, he establecido los valores cubic-bezier de manera que la transición se ejecute bastante rápido al principio y significativamente más lento al final.

 
.thumbnail-5 figcaption, .thumbnail-5 img { 
	transition: all 350ms cubic-bezier(.1,.72,.68,.68); 
}

Luego, cuando se esté pasando el ratón sobre la miniatura, queremos que la imagen y la leyenda se muevan hacia arriba correspondientemente.

 
.thumbnail-5:hover figcaption, .thumbnail-5:hover img { 
	transform: translateY(-90px); 
}

Leyenda 6: Transformar el origen.

Hemos aplicado el método de escalado y rotación para las leyendas anteriores. Es posible que hayas notado que la rotación y la escala comenzaron desde el punto central del elemento. Esto se debe a que el origen de transformación es 50% 50% de forma predeterminada.

transform-origin es una propiedad que nos permite especificar el punto de partida de la transformación en el elemento. Se puede lograr utilizando la siguiente sintaxis transform-origin: x y.

En la sexta leyenda cambiaremos el origen a 0 0(x y).

 
.thumbnail-6 figcaption { 
	top:0; 
	position: absolute; 
	height: 150px; 
	transform: scale(0); 
	transform-origin: 0 0; 
	opacity: 0; 
}

Y tanto la leyenda como la imagen tendrán un efecto de transición.

 
.thumbnail-6 figcaption, .thumbnail-6 img { 
	transition: all 500ms; 
}

Después, cuando pasemos el cursor sobre la miniatura, la imagen y la leyenda se transformarán al mismo tiempo.

 
.thumbnail-6:hover img { 
	transform: scale(0);	 
	transform-origin: 0 0; 
	opacity: 0; 
} 
.thumbnail-6:hover figcaption { 
	transform: scale(1); 
	transform-origin: 0 0; 
	opacity: 1; 
}

Efectos de las imágenes del slider

Hemos jugado bastante con transformaciones y propiedades de transición. En este paso los aplicaremos a nuestro Image Slider.

En primer lugar, configuramos la imagen y la leyenda. Aquí, establecemos la imagen para que tenga un efecto de transición del tipo fade-in.

 
#image-slider li img { 
	transition: all 1s linear; 
} 
 
#image-slider li figcaption { 
	transition: all 500ms ease-in-out 300ms; 
}

Además de especificar la transición de la navegación del slider.

 
.nav-slider li a { 
	transition: all 1s ease-out; 
}

Breve introducción a la pseudo-clase `:target`

El deslizador de imagen se accionará con un clic. Al hacer clic en el menú del slider, la diapositiva/imagen respectiva se mostrará finalmente, por lo general con efectos de deslizamiento o de fundido. Este tipo de navegaciones y efectos deslizantes se basan generalmente en la tecnología JavaScript o Flash.

Sin embargo, en este tutorial, vamos a tratar de lograrlo usando CSS exclusivamente, es decir, mediante el uso de la pseudo-clase :target.

El selector :target es una de las características distintivas de CSS3 que nos permitirá seleccionar un elemento dentro de un documento HTML con un identificador específico que coincida con el identificador de fragmento en el URI.

Por ejemplo, un URI; http://www.somedomain.com/page/#section-1 seleccionará un elemento con id="section-1" en la página. Por lo tanto, de forma similar a :hover, se aplicará cualquier estilo a :target.

Muy bien, echemos un vistazo a las siguientes reglas CSS:

A continuación, la regla CSS convertirá la opacidad de la imagen en 1 cuando el li respectivo esté actuando como :target. Recuerda que marcamos la diapositiva/imagen usando etiquetas de lista desordenadas.

 
#image-slider li:target img { 
	opacity: 1; 
}

La leyenda en su interior debe deslizarse hacia arriba un 100% de la anchura; por favor, no omitas la declaración !important. Esto es !importante.

 
#image-slider li:target figcaption { 
	transform: translateY(-100%) !important; 
}

De acuerdo, prueba el resultado en tu navegador.

Efectos de la navegación del slider

La propiedad transition se puede aplicar específicamente en selectores, como :hover y :active.

Arriba hemos definido la transición para .nav-slider li a, pero también especificaremos una función de sincronización diferente bajo ciertas condiciones del comportamiento del usuario.

Cuando pasamos el ratón sobre la navegación del slider, el menú cambiará de color a verde durante 300 ms de efecto "ease-in".

 
.nav-slider li a:hover { 
	background: #89c53f; 
	border: 1px solid #467536; 
	transition: all 300ms ease-in; 
}

Al hacer clic sobre él, el menú cambia a verde oscuro muy rápidamente, alrededor de unos 50 ms.

 
.nav-slider li a:active { 
	background: #467536; 
	border: 1px solid #20411d; 
	transition: all 50ms; 
}

Y cuando el menú no recibe actividad del usuario, volverá a su estado original muy lentamente, durante aproximadamente 1s como hemos especificado arriba en el .nav-slider li.

El límite

Como cualquier otra tecnología, CSS no es ninguna excepción. Todavía tiene algunas limitaciones.

Si actualizas tu navegador (supongo que todavía estás en tu página de práctica de este tutorial), observaras que la leyenda de la primera diapositiva no apareció en la primera carga de la página. Bueno, esto es porque en el CSS sólo indicamos que se mostrase la leyenda una vez que un li es destinatario de alguna acción. Por lo tanto, aquí tenemos que añadir una traslación concreta a la leyenda.

Seleccionamos la primera diapositiva usando el selector :first-child y trasladamos la leyenda moviéndola hacia arriba en un 100% de su altura.

 
#image-slider li:first-child figcaption { 
	transform: translateY(-100%); 
}

Actualiza tu navegador, ahora la primera leyenda debería aparecer en la primera carga. Recuerda que en el paso anterior añadimos una transición de retardo de 300 ms, por lo que la leyenda comenzará a aparecer después de esa cantidad concreta de tiempo.

Sin embargo, hay un problema, la instrucción CSS anterior hará que la leyenda permanezca en su lugar, aunque hemos navegado a la otra diapositiva. Por lo tanto, necesitamos crear para ello una regla de neutralización.

Añadiremos una clase .hide a la leyenda (en la primera diapositiva) y la definiremos de manera que vuelva a su posición inicial.

 
#image-slider li:first-child figcaption.hide { 
	transform: translateY(0); 
}

Espera, ¿no añadimos una clase hide en la leyenda?

No, no lo hicimos.

La añadiremos condicionalmente desde jQuery en su lugar (tristemente). Se aplicaría la clase hide, si los usuarios navegasen a otras diapositivas.

Coloca el siguiente enlace jQuery de la biblioteca de Google en la parte inferior de la página antes de la etiqueta de cierre del cuerpo. La versión actual de jQuery es 1.7.1.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" </script>

En primer lugar, creamos variables para los elementos seleccionados.

 
var firstcaption = $('.slide:first-child figcaption'), 
	otherslides	= $('.nav-slider li:nth-child(n+2)');

Y luego creamos una función para añadir la clase hide cuando los usuarios hagan clic en el menú para navegar a las otras diapositivas.

 
otherslides.click(function(){ 
		firstcaption.addClass("hide"); 
	});

No se olvide envolverlo todo el código de arriba dentro de la etiqueta <script>

 
<script> 
$(function() { 
  	var 	firstcaption = $('.slide:first-child figcaption'), 
		otherslides	= $('.nav-slider li:nth-child(n+2)'); 
     
		otherslides.click(function(){ 
		firstcaption.addClass("hide"); 
	}); 
 }); 
</script>

Recapitulando

Muy bien, en este tutorial hemos escrito una buena cantidad de código, así que vamos a recapitular.

Marcado HTML

 
<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="utf-8"> 
	<title>Practical Use of CSS3: Transforms and Transitions - Webdesigntuts+</title> 
	<link href="normalize.css" rel="stylesheet" type="text/css" /> 
	<link href="style.css" rel="stylesheet" type="text/css" /> 
	<link href="effects.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
	<!-- site navigation --> 
	<header> 
		<div> 
		<h1 class="home"><a href="/">the resto.</a></h1> 
		<nav id="site-nav"> 
			<ul class="menu"> 
				<li><a href="#">About</a></li> 
				<li><a href="#">Contact</a></li> 
				<li><a href="#">Restaurant</a></li> 
				<li><a href="#">Store</a></li> 
			</ul> 
		</nav> 
		</div> 
	</header> 
	<!-- content section --> 
	<div id="content"> 
	<!-- image slider --> 
	<section id="image-slider"> 
		<div class="hidden"> 
		<span class="shine"></span> 
		<ul> 
			<li id="slide-1" class="slide"> 
				<figure> 
					<img src="images/slide/grilled-chicken.jpg" /> 
					<figcaption> 
						<p>Faworki cotton candy apple pie lollipop. Jelly beans apple pie sweet roll pie cheesecake.</p> 
					</figcaption> 
				</figure> 
			</li> 
			<li id="slide-2" class="slide"> 
				<figure> 
					<img src="images/slide/pasta.jpg" /> 
					<figcaption> 
						<p>Sesame snaps caramels powder muffin applicake chocolate cake.</p> 
					</figcaption> 
				</figure> 
			</li> 
			<li id="slide-3" class="slide"> 
				<figure> 
					<img src="images/slide/steak.jpg" /> 
					<figcaption> 
						<p>Pie danish applicake sugar plum sweet roll faworki cookie lollipop carrot cake.  
						Chupa chups jujubes cupcake tart. </p> 
					</figcaption> 
				</figure> 
			</li> 
			<li id="slide-4" class="slide"> 
				<figure> 
					<img src="images/slide/cappuccino.jpg" /> 
					<figcaption> 
						<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 
					</figcaption> 
				</figure> 
			</li> 
		</ul> 
		</div> 
		<!-- image slider navigation --> 
		<nav class="nav-slider"> 
			<ul> 
				<li><a href="#slide-1">1</a></li> 
				<li><a href="#slide-2">2</a></li> 
				<li><a href="#slide-3">3</a></li> 
				<li><a href="#slide-4">4</a></li> 
			</ul> 
		</nav> 
	</section> 
	 
	<!--  image caption --> 
	<section id="image-caption"> 
		<ul> 
			<li class="thumbnail thumbnail-1"> 
			<figure> 
				<span class="pattern-overlay"></span> 
				<img src="images/thumbnail/women-at-dinnner.jpg"/> 
				<figcaption> 
					<p>Lemon drops dessert</p> 
				</figcaption> 
			</figure> 
			</li> 
			<li class="thumbnail thumbnail-2"> 
			<figure>	 
				<span class="pattern-overlay"></span> 
				<img src="images/thumbnail/cooked-breakfast.jpg"/> 
				<figcaption> 
					<hr /><h3>Apple pie chupa</h3> 
					<p>Apple pie chupa chups pudding cheesecake pie cake topping jelly-o.  
					Icing sweet roll toffee.</p> 
					<p>Lemon drops toffee pastry cookie marzipan carrot cake tart sweet roll tiramisu.</p> 
				</figcaption> 
			</figure> 
			</li> 
			<li class="thumbnail thumbnail-3"> 
			<figure> 
				<span class="pattern-overlay"></span> 
				<img src="images/thumbnail/steamed-dumplings.jpg"/> 
				<figcaption> 
					<hr /><h3>Jelly beans</h3> 
					<p>Jelly beans icing macaroon pudding carrot cake.  
					Sweet roll halvah pudding cookie candy canes cake jelly marshmallow.</p>  
					<p>Chupa chups halvah tiramisu sugar plum.</p> 
				</figcaption> 
			</figure>	 
			</li> 
			<li class="thumbnail thumbnail-4"> 
			<figure> 
				<span class="pattern-overlay"></span> 
				<img src="images/thumbnail/salad.jpg"/> 
				<figcaption> 
					<p>Gummies chocolate bar tootsie roll oat cake gummies. Sesame snaps faworki ice cream tootsie roll pastry.</p> 
				</figcaption> 
			</figure> 
			</li> 
			<li class="thumbnail thumbnail-5"> 
			<figure> 
				<span class="pattern-overlay"></span> 
				<img src="images/thumbnail/table-in-restaurant.jpg"/> 
				<figcaption> 
					<p>Wypas cheesecake sweet ice cream faworki macaroon sweet pie.  
					Tart sweet muffin pastry cotton candy ice cream chocolate gummi bears.</p> 
				</figcaption> 
			</figure> 
			</li> 
			<li class="thumbnail thumbnail-6"> 
			<figure> 
				<span class="pattern-overlay"></span> 
				<img src="images/thumbnail/pizza.jpg"/> 
				<figcaption> 
					<hr /><h3>Chocolate chocolate</h3> 
					<p>Chocolate chocolate cake wafer halvah jelly ice cream fruitcake wypas.  
					Sweet topping candy sugar plum bear claw sugar plum bonbon. </p> 
					<p>Croissant sweet roll apple pie cotton candy bear claw marshmallow cheesecake ice cream chocolate bar</p> 
				</figcaption> 
			</figure> 
			</li> 
		</ul> 
		</section> 
	</div> 
	<!-- site footer --> 
	<footer> 
	<p>Envato &copy; 2012. All rights reserved</p> 
	</footer> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="prefixfree.js"></script> 
<script> 
$(function() { 
  	//Define variables 
	var firstcaption = $('.slide:first-child figcaption'), 
		otherslides = $('.nav-slider li:nth-child(n+2)'); 
    //Add class "hide" when the other slides are clicked 
		otherslides.click(function(){ 
		firstcaption.addClass("hide"); 
	}); 
 }); 
</script> 
</body> 
</html>

El CSS

Hemos separado los estilos en dos archivos. En primer lugar, el archivo style.css almacenará todas las reglas CSS que influyen en el aspecto del sitio web.

 
/* Apply a background in the body tag */ 
body { 
	background:url('images/grid-noise.png') repeat; 
	font: 12pt Tahoma, Geneva, sans-serif; 
} 
/* @font-face */ 
@font-face { 
	font-family: 'ChunkFiveRegular'; 
	src: url('fonts/Chunkfive-webfont.eot'); 
	src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), 
		 url('fonts/Chunkfive-webfont.woff') format('woff'), 
		 url('fonts/Chunkfive-webfont.ttf') format('truetype'), 
		 url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); 
	font-weight: normal; 
	font-style: normal; 
} 
@font-face { 
	font-family: 'TitilliumText22LRegular'; 
	src: url('fonts/TitilliumText22L003-webfont.eot'); 
	src: url('fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'), 
		 url('fonts/TitilliumText22L003-webfont.woff') format('woff'), 
		 url('fonts/TitilliumText22L003-webfont.ttf') format('truetype'), 
		 url('fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); 
	font-weight: normal; 
	font-style: normal; 
} 
/* Header */ 
header { 
	background: url('images/nav-bg.png') repeat-x; 
	padding: 0; 
	height: 70px; 
	border-bottom: 2px solid #000; 
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5); 
	width: 100%; 
} 
header > div { 
	width: 960px; 
	margin: 0 auto; 
} 
header .home { 
	margin: 0; 
	font: 36pt/60pt 'ChunkFiveRegular', Arial, sans-serif; 
	text-shadow: 0px 2px 0px #000; 
	float: left; 
} 
header a { 
	text-decoration: none; 
	color: #fff; 
	text-shadow: 1px 1px 0 #000; 
	transition: all 300ms ease-out; 
} 
header nav { 
	float: right; 
} 
header nav ul { 
	padding: 0; 
	margin-right: 6px; 
} 
header nav li { 
	display: inline; 
	font: 12pt/35pt 'TitilliumText22LRegular', Arial, sans-serif; 
	margin-left: 25px; 
	text-transform: uppercase; 
} 
/* Content */ 
#content { 
	width: 960px; 
	height: auto; 
	margin: 25px auto 0; 
	background: #f3f3f3; 
	border: 1px solid #bbb; 
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3); 
} 
/* Image Slider Section */ 
#image-slider { 
	height: 425px; 
	width: 960px; 
} 
#image-slider ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
} 
#image-slider img { 
	display: block; /** For removing white space **/ 
} 
#image-slider figcaption { 
	background-color: rgba(0,0,0,.7); 
	color: #fff; 
	padding: 10px 20px; 
	position: relative; 
	text-shadow: 1px 1px 0px #000; 
	width: 920px; 
	bottom: 0; 
} 
#image-slider .slide { 
	position: absolute; 
} 
#image-slider .slide img { 
	position: relative; 
	opacity: 0; 
} 
#image-slider .slide:first-child img { 
	opacity: 1; 
} 
#image-slider .hidden { 
	height: 380px; 
	overflow: hidden; 
	position: relative; 
	width: 960px; 
	border-bottom: 1px solid #aaa; 
} 
#image-slider .shine { 
	height: 300px; 
	margin: 0 auto; 
	position: absolute; 
	right: -60px; 
	top: -58px; 
	transform: rotate(-20deg); 
	background: linear-gradient(45deg, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); 
	width: 1500px; 
	z-index: 5; 
} 
/* Slide Navigation Section */ 
.nav-slider { 
	text-align: center; 
	padding-top: 15px; 
	border-top: 1px solid #fff; 
} 
.nav-slider li { 
	display: inline; 
	margin: 0 5px; 
} 
.nav-slider li a { 
	background: #ddd; 
	border: 1px solid #ccc; 
	display: inline-block; 
	height: 19px; 
	text-indent: -9999px; 
	width: 19px; 
} 
/* Image Caption Section */ 
#image-caption { 
	padding: 32px 32px 40px; 
} 
#image-caption ul { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
} 
#image-caption ul li { 
	display: inline-block; 
	width: 270px; 
	vertical-align: top; 
	height: 190px; 
	background: #fff; 
	border: 5px solid #ddd; 
	cursor: pointer; 
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2); 
	position: relative; 
	overflow: hidden; 
} 
#image-caption img { 
	display: block; /** Remove white space **/ 
} 
.pattern-overlay { 
	background: url('images/thumbnail-pattern.png') repeat; 
	height: 190px; 
	width: 270px; 
	position: absolute; 
	z-index: 1; 
} 
.thumbnail:nth-child(3n+2) /** Select only the the middle images (2,5,...etc)**/ { 
	margin: 0 23px; 
} 
.thumbnail:nth-child(-n+3) /** Select only the first 3 images **/ { 
	margin-bottom: 33px; 
} 
.thumbnail figcaption { 
	background: rgba(136,184,88,0.9); 
	margin: 10px; 
	border-radius: 3px; 
	padding: 10px; 
	width: 230px; 
	color: #fff; 
	font-size: 10pt; 
} 
.thumbnail figcaption h3 { 
	font-size: 14pt; 
	font-weight: normal; 
} 
.thumbnail figcaption p, .thumbnail figcaption h3 { 
	margin: 3px; 
	padding: 0; 
} 
.thumbnail-1 figcaption { 
	margin: 0 10px 0 10px; 
} 
.thumbnail-2 figcaption { 
	height: 150px; 
	position: absolute; 
	top: -190px; 
} 
.thumbnail-3 figcaption { 
	transform: scale(0); 
	height: 150px; 
	opacity: 0; 
	position: absolute; 
	top: 0; 
} 
.thumbnail-4 figcaption { 
	transform: rotate(-180deg); 
	overflow: hidden; 
	max-height: 150px; 
	position: relative; 
} 
.thumbnail-4 figcaption p { 
	transform: scale(3); 
	opacity: 0; 
} 
.thumbnail-5 img { 
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 1, .5); 
	position: relative; 
	z-index: 1; 
} 
.thumbnail-5 figcaption { 
	margin: 0; 
	border-radius: 0; 
	width: 250px; 
} 
.thumbnail-6 figcaption { 
	top:0; 
	position: absolute; 
	height: 150px; 
	transform: scale(0); 
	transform-origin: 0 0; 
	opacity: 0; 
} 
.thumbnail-6, .thumbnail-6 img { 
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 1, .5); 
} 
/* Footer */ 
footer { 
	width: 960px; 
	text-align: center; 
	margin: 0 auto; 
	color: #777; 
	text-shadow: 1px 1px 0px #fff; 
	font-size: 10pt; 
}

Y luego effects.css para todas las reglas CSS que realizan los efectos de transición y transformación en el sitio web.

 
/* Site Navigation */ 
#site-nav li a { 
	transition: all 500ms; 
} 
#site-nav li a:hover { 
	color: #ffb400; 
} 
 
/* Image Slider Effects */ 
#image-slider li img { 
	transition: all 1s linear; 
} 
#image-slider li figcaption { 
	transition: all 500ms ease-in-out 300ms; 
} 
#image-slider li:target img { 
	opacity: 1; 
} 
#image-slider li:target figcaption { 
	transform: translateY(-100%) !important; 
} 
#image-slider li:first-child figcaption { 
	transform: translateY(-100%); 
} 
#image-slider li:first-child figcaption.hide { 
	transform: translateY(0); 
} 
 
/* Nav Slider */ 
.nav-slider li a { 
	transition: all 1s ease-out; 
} 
.nav-slider li a:hover { 
	background: #89c53f; 
	border: 1px solid #467536; 
	transition: all 300ms ease-in; 
} 
.nav-slider li a:active { 
	background: #467536; 
	border: 1px solid #20411d; 
	transition: all 50ms; 
} 
 
/* Image Caption */ 
.thumbnail img { 
	transition: all 350ms; 
} 
.thumbnail-1 figcaption { 
	transition: all 350ms linear; 
} 
.thumbnail-2 figcaption { 
	transition: all 350ms ease-in 350ms; 
} 
.thumbnail-3 figcaption { 
	transition: all 350ms ease-out; 
} 
.thumbnail-4 figcaption { 
	transition: all 500ms ease-in-out; 
} 
.thumbnail-4 figcaption p { 
	transition: all 350ms ease-in-out 500ms; 
} 
.thumbnail-5 figcaption, .thumbnail-5 img { 
	transition: all 350ms cubic-bezier(.1,.72,.68,.68); 
} 
.thumbnail-6 figcaption, .thumbnail-6 img { 
	transition: all 500ms; 
} 
.thumbnail:hover img { 
	opacity: 0.3; 
} 
.thumbnail-1:hover figcaption { 
	transform: translateY(-100%); 
	margin-top: -10px; 
} 
.thumbnail-2:hover figcaption { 
	transform: translateY(190px); 
} 
.thumbnail-3:hover figcaption { 
	transform: scale(1); 
	opacity: 1; 
} 
.thumbnail-4:hover figcaption { 
	transform: rotate(0deg) translateY(-100%); 
	margin-top: -10px; 
} 
.thumbnail-4:hover figcaption p { 
	transform: scale(1); 
	opacity: 1; 
} 
.thumbnail-5:hover figcaption, .thumbnail-5:hover img { 
	transform: translateY(-90px); 
} 
.thumbnail-6:hover img { 
	transform: scale(0);	 
	transform-origin: 0 0; 
	opacity: 0; 
} 
.thumbnail-6:hover figcaption { 
	transform: scale(1); 
	transform-origin: 0 0; 
	opacity: 1; 
}

Reflexiones finales

¡Ya hemos terminado! Ha sido útil ver cómo podemos lograr tantos efectos hoy en día usando sólo reglas CSS y el JavaScript mínimo.

No olvides la falta de soporte de los navegadores más antiguos, especialmente IE. Pero utilizados de forma conservadora, este tipo de efectos pueden mejorar los sitios web de una manera elegante.

Gracias por leer este tutorial; ¡Espero que hayas aprendido algo!