Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML & CSS

Uso práctico de CSS3: Transformaciones y transiciones

by
Difficulty:IntermediateLength:LongLanguages:

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>).


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.

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 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.

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.


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:

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

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.

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.


@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:


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.

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.

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.

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.

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.


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.

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

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.

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.


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;

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.

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.


Las miniaturas de imagen

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

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

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

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.

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.


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.

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

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.

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

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;

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.

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.

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.

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.

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.

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


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.

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.


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.

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.

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.

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


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.

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


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).

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

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


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.

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


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.

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.

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".

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

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.

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.

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.

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.

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


Recapitulando

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


Marcado 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.

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


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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.