Crear una impresionante presentación de diapositivas en 3D con Cu3er Parte 1

Hoy vamos a construir una página web simple con una herramienta increíble y gratuita: Cu3er.

Cu3er es un deslizador de imagen en 3D realmente pulcro con transiciones visuales locas y muchas opciones de personalización. Aunque está construido con Flash y JavaScript, no necesita saber ninguno de estos para usarlo.

En este artículo, obtendremos la página creada y la presentación de diapositivas en funcionamiento. La próxima vez volveremos y veremos cómo personalizar algunas de las muchas características y variables de Cu3er.

Lo que estamos construyendo

Para ver lo fácil que es incorporar Cu3er en un diseño, crearemos una página web simple que contiene un encabezado, pie de página, copia de párrafo y un área de navegación.

Antes de comenzar, es posible que desee ver la demostración y descargar los archivos de origen.

Nota: En mis propias pruebas, cu3er funciona muy bien en Safari y Firefox pero tiene algunos problemas en IE (sorpresa). Debido a esto, así como a la poca cantidad de CSS3 que usaremos, asegúrese de Ver la demo en Firefox o Safari..

Para mantener las cosas interesantes, también usaremos un poco de CSS3 y aprenderemos cómo configurar un "pie de página adhesivo". que permanece anclado en la parte inferior de la página. ¡Empecemos!

Paso 1: Agarrar Cu3er

Lo primero que querrás hacer es pasar por el sitio web de Cu3er y presionar el botón de descarga. Cuando abres el .zip deberías ver los siguientes archivos:

Lo primero que querrás hacer es copiar esta carpeta completa y colocarla en un lugar seguro para que siempre puedas volver a las versiones originales de cualquiera o todos los archivos.

Una vez que hayas hecho eso, abre demo.htm en su IDE favorito o editor de texto.

Paso 2: Personaliza la página de demostración

Cuando abres la página de demostración, verás que es bastante sencillo y ya contiene un div centrado con una versión funcional de cu3er. ¡Te dije que esto sería fácil!

Solo necesitamos agregar contenido y volver a diseñar esta página, y todo estará terminado. Para comenzar este proceso, reemplace los comentarios del Paso 1, Paso 2, etc. en el cabeza Parte del documento y añadir algo más descriptivo. También elimine cualquier estilo en línea e inserte un enlace a una hoja de estilo externa. Deberías tener algo como lo siguiente.

CU3ER - Demo! var flashvars = {}; flashvars.xml = "config.xml"; flashvars.font = "font.swf"; atributos var = {}; attributes.wmode = "transparente"; attributes.id = "control deslizante"; swfobject.embedSWF ("cu3er.swf", "cu3er-container", "600", "300", "9", "expressInstall.swf", flashvars, atributos); <p>A continuación, vaya al cuerpo del HTML y lance el <em>cu3er-contenedor</em> en una? presentación de diapositivas? div. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/create-an-awesome-3d-slideshow-with-cu3er-part-1_4.jpg"> <p>Mi archivo final fue de 15px de ancho por 55px de alto. El tuyo puede ser tan amplio como quieras, pero si lo sigues, asegúrate de tener la altura adecuada para que todo se alinee. </p> <h2>Paso 4: Iniciar algunos CSS</h2> <p>Cree un archivo style.css y agregue el siguiente CSS.</p> <textarea wrap="soft" readonly=""> / * Restablecer * / * {margen: 0px; relleno: 0px; } / * Float Clear * / .clearDiv {clear: both; } / * Estilos de cuerpo * / html, cuerpo {fondo: # 4a4a4a url (images / header_repeat.jpg) repeat-x; text-align: center; Familia tipográfica: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; peso de la fuente: 300; altura: 100%}

Revisemos estos trozos de código uno a la vez. En primer lugar, agregué un simple margen y reinicio de relleno, solo me aseguro de que varios valores predeterminados del navegador no arruinen nuestro diseño. El siguiente es un truco que aprendí de Chris Coyier en CSS-Tricks para limpiar flotantes (así que grítale si no crees que es semántico). Estaremos flotando algunas cosas en este diseño y ahora que hemos configurado este CSS, simplemente podemos lanzar una .clearDiv clase para asegurarse de que el contenido que sigue a esa sección se restablecerá de nuevo a donde lo queremos.

A continuación, he asignado algunos estilos de texto como familia de fuente y peso de fuente. También puse el fondo a un gris oscuro e inserté el gráfico del encabezado. Asegúrese de configurar la sección del encabezado para que se repita, de modo que obtenga una barra que se extienda por toda la página. Finalmente, establecí la altura al 100% y me aseguré de que estos estilos se aplicaran tanto a las partes del html como del cuerpo. Esto tiene que ver con el truco del pie de página adhesivo que configuraremos más adelante. Por ahora solo asegúrate de que estos estilos estén presentes.

Tu archivo debería estar saliendo bien ahora y se parece más o menos a la imagen de abajo.

Paso 5: estilo de ajuste de página y encabezado

A continuación, agregue el siguiente texto a su CSS:

#page_wrap {width: 850px; margen: 0 auto; } / * Estilos de encabezado * / #header {color: #fff; flotador izquierdo; margen superior: 10px; Familia tipográfica: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; tamaño de fuente: 25px; }

Aquí hemos establecido nuestro ajuste de página en 850px (un poco poco ortodoxo, pero parece correcto) y nuestro margen para auto. Esto centra todo nuestro contenido muy bien dentro de la ventana del navegador.

A continuación, puse el texto en blanco, lo dejé flotar a la izquierda, lo puse aparte desde arriba y le asigné una familia y tamaño de fuente. Esto debería posicionar el? Design Shack? texto bien en su vista previa.

Paso 6: Coloque la presentación de diapositivas

Antes de agregar la navegación en el encabezado, necesitamos quitar la presentación de diapositivas de nuestro camino. Para hacer esto, primero coloque la clase clearDiv de la que hablamos antes después del encabezado y antes de la presentación en su HTML.

<p>Cabaña de diseño</p>

Ahora que hemos eliminado el flotante del encabezado, podemos ingresar a nuestro CSS y agregar algunos estilos para la presentación de diapositivas.

/ * Estilos de presentación * / # cu3er-container {width: 600px; } #slideshow {background: url (images / cube_shadow2.jpg) no se repite; posición de fondo: centro superior; altura: 350px; margen superior: 70px; }

Aquí hemos agregado la mayoría del estilo a la envoltura alrededor de la presentación de diapositivas. Esto es para que podamos mantener el cu3er-contenedor div a 600px (el ancho de la presentación de diapositivas) mientras tiene un gráfico de sombra que se extiende más allá de este límite.

Puedes crear tu propia sombra en Photoshop o simplemente tomar la mía de los archivos de origen.

Ahora su presentación de diapositivas debe colocarse perfectamente sobre un bonito gráfico de sombra para darle una especie de ilusión flotante.

Paso 6: Añadir la navegación

Ahora que la presentación de diapositivas está fuera de nuestro camino, podemos agregar en el área de navegación. Mantendremos esto bastante básico y solo usaremos una lista desordenada de enlaces. Al igual que el encabezado, la navegación usará un flotador, así que coloque el HTML de navegación después del encabezado y antes de clearDiv.

<p>Cabaña de diseño</p> <ul> <li>Casa</li> <li>Artículos</li> <li>Galería</li> <li>Gorjeo</li> </ul>

Ahora necesitaremos una gran parte de CSS para diseñar todo lo relacionado con la navegación. Necesitamos cubrir la división de navegación en su conjunto, la lista desordenada, los elementos de la lista, los enlaces de los elementos de la lista y los efectos de desplazamiento del enlace de los elementos de la lista.

#nav {float: derecha; color: #fff; transformación de texto: mayúsculas; tamaño de fuente: 12px; margen superior: 15px; } #nav ul {estilo de lista: ninguno; } #nav ul li {float: derecha; relleno-izquierda: 20px; } #nav ul li a {color: #fff; texto-decoración: ninguno; } #nav ul li a: hover {color: #fff; texto-decoración: subrayado; }

Todo aquí es bastante sencillo. La navegación se hace flotar hacia la derecha (esto lo establece en el lado derecho de la página y coloca los elementos en una línea), se establece en blanco, se coloca en su lugar y se transforma en mayúsculas. Hemos establecido el estilo de lista en ninguno para eliminar las viñetas y eliminado cualquier decoración de texto de enlace, excepto en el desplazamiento, donde aplicamos un subrayado.

Y con eso se acaba nuestra navegación. Ahora todo lo que queda es un texto superfluo y el pie de página, ¡y todo habrá terminado!

Paso 7: Agregue el texto debajo de la presentación

Solo para redondear un poco el diseño, agregaremos un encabezado y un párrafo debajo de la presentación. Solo unas pocas líneas de html es todo lo que necesitaremos:

<h1>Vídeo de Cu3er</h1> <p>Un tutorial de Design Shack</p>

Luego, aplicaremos estilo a las etiquetas h1 y de párrafo individualmente. Note que usé la técnica de tipografía que aprendimos en el artículo de Google Fonts. Esto utiliza una sombra de texto CSS3 que es más clara en color que el fondo para dar la ilusión de texto insertado.

/ * Estilos de línea de etiqueta * / #tagline h1 {font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; tamaño de fuente: 70px; font-weight: negrita; color: # 272727; text-shadow: 0px 2px 3px # 555; } #tagline p {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; tamaño de fuente: 20px; peso de la fuente: 300; color: # 272727; text-shadow: 0px 2px 3px # 555; }

Eso nos lleva al final de la mayor parte de nuestro diseño. Incluso puedes detenerte allí si lo deseas, pero voy a continuar y mostrarte un truco de pie de página pegajoso que aprendí esta semana.

La imagen que usamos a continuación para el pie de página es exactamente igual a la imagen del encabezado, solo se gira 108 grados, de modo que el rojo está en la parte superior y el negro en la parte inferior.

Paso final: añadir el pie de página

Si se está preguntando qué es un pie de página pegajoso, es simplemente un pie de página que se adhiere a la parte inferior de la página al cambiar el tamaño de la ventana. Esto puede ser difícil de implementar, pero Ryan Fait ha creado un método bastante ingenioso para lograrlo con muy poco código; Mira ese método aquí.

La idea básica es que puedes usar márgenes negativos y un? Push? para mantener el pie de página en la parte inferior de la página. Lo primero que debemos hacer es insertar los divs push y footer en nuestro html. Coloque el div push dentro de la envoltura de la página y el div del pie de página fuera de la envoltura de la página (por lo que se extenderá a los bordes).

<h1>Vídeo de Cu3er</h1> <p>Un tutorial de Design Shack</p>

Ahora entra en tu CSS e inserta el siguiente código:

/ * Estilos de pie de página * / .push {altura: 55px; / * .push debe tener la misma altura que .footer * /} #footer {height: 55px; fondo: # 4a4a4a url (images / footer_repeat.jpg) repetición-x; }

Observe que la altura del empuje se ha establecido a la altura exacta del pie de página. Esto es muy importante y el truco no funcionará sin él. También coloqué la imagen de fondo que mencioné anteriormente (solo gire la imagen del encabezado).

Finalmente, agregaremos un fragmento más de CSS en nuestro ajuste de página:

#page_wrap {width: 850px; margen: 0 auto; min-height: 100%; altura: auto! importante; altura: 100%; margen: 0 auto -55px; / * el margen inferior es el valor negativo de la altura del pie de página * /}

La altura y la altura mínima se han establecido en 100% y el margen inferior se ha establecido en el valor negativo de la altura del pie de página (55px). Esto crea el efecto de mantener el pie de página en la parte inferior de la página. los altura: auto! importante; bit es un hack de IE para moverse min-height Problemas con ese navegador.

Resultado final

¡Nuestra página está completa! Si has hecho todo bien, tu página debería verse como la de abajo. Puede notar que mi versión se inicia automáticamente cuando se carga la página, no se preocupe si la suya no lo hace, trataremos esto en el próximo artículo.

Ahora tienes una página impresionante con un deslizador de imagen flash 3D alucinante para comenzar a construir un sitio de cartera.

Conclusión

Tenga en cuenta que prácticamente todo el trabajo involucrado fue la creación del sitio web.¡Cu3er estaba funcionando realmente bien en el primer paso! Vuelve pronto a la segunda parte, donde aprenderemos a modificar algunas de las funciones básicas, agregar texto y enlaces y más.