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

Construya un Portafolio Adaptivo, Filtrable con Trucos CSS3

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

El atractivo visual inherente de los portafolios filtrables (como el hub de Tuts+) los ha hecho muy populares. Hoy, estaremos haciendo uno usando marcado simple, CSS3 y un poco de jQuery.


Paso 1: La Estructura de Archivos

Usaremos la siguiente estructura de archivos para nuestro proyecto:

File Structure

Establezca un proyecto en base a estos archivos (tendrá que icluir HTML5 Shiv) y empecemos con el marcado HTML en index.html.


Paso 2: Cabecera HTML

Mantengamos el ritmo y cantemos una lista de cosas que tenemos que hacer para crear el <head>:

  • Declare el tipo de medio y el conjunto de caracteres de la página.
  • Establezca el ancho de nuestra ventana de visualización para que sea el mismo que el ancho del dispositivo y configure el zoom inicial a 1 (Lea más sobre esto aquí)
  • Dele un título a nuestra página.
  • Adjunte un favicon (¿interesado en favicons aptos para retina?)
  • Adjunte nuestra hoja de estilo principal (style.css)
  • Adjunte nuestra hoja de estilo para manejar media queries (media-queries.css)
  • Enlace a la última versión de jQuery.
  • Agregue HTML5 Shiv para manejar problemas de compatibilidad de HTML5 con navegadores antiguos.

Y esto es lo que tenemos:


Paso 3: Marcado HTML Básico

En el cuerpo, primero agregamos un 'contenedor' para mantener todos nuestros elementos dentro de un ancho definido, centrado en la página. Dentro de eso añadimos (prepárate para otra lista rápida disparada):

  • Un <header> para nuestro encabezado ('John Doe').
  • Una navegación básica (<nav>) que comprende un menú <ul>, con cinco elementos, cada uno con su ID respectivo.
  • Una <section> para las thumbnails con la clase 'work'.
  • Un <footer> con todas las cosas de copyright.

Paso 4: Figura e Imagen HTML

Usaremos la etiqueta <figure> para nuestras thumbnails y aplicaremos la clase de la respectiva categoría a la que pertenece. Dentro de la figura, agregamos una etiqueta <a> que contiene la imagen (<img>) para el fondo del thumbnail y una lista de descripción (<dl>) para el texto descriptivo. 


Paso 5: Texto Descriptivo HTML (DL, DT, DD)

Como se mencionó anteriormente, usaremos una lista de descripción para nuestro texto descriptivo. Nuestros términos de descripción (<dt>) serán nuestros pequeños títulos —  Cliente y Rol, para nuestras descripciones (<dd>) —  Envato e Ilustración, respectivamente.


Paso 6: El HTML Completo

Así es como se ve nuestro marcado HTML:

Vamos a seguir adelante con el estilo ahora.


Paso 7: Selección de CSS y Barra de Desplazamiento

Empezaremos por tratar con algunos elementos lúdicos; El estado de selección y la barra de desplazamiento (que son totalmente opcionales), además de incluir algunas fuentes.

En el código anterior, hemos importado dos webfonts de Google —  Open Sans y PT Sans Narrow. Luego, simplemente establecemos un fondo gris oscuro y un color de texto blanco para las selecciones de usuario.

A continuación, establecemos un ancho de 9px para nuestra barra de desplazamiento (en los navegadores Webkit) y le damos al "camino" un fondo gris claro, un borde delgado y una sombra insertada de caja suave. Luego, le dimos un fondo gris oscuro al tirador de la barra de desplazamiento y le agregamos un borde delgado.

Nota: Para más información sobre webkit-scrollbars, vea la publicación de Chris Coyier.


Paso 8: Cuerpo CSS

Le daremos a nuestro cuerpo un fondo gris claro y aplicaremos la fuente 'Open Sans' que importamos anteriormente. También agregaremos un borde superior rojo para incrementar la finura.


Haga un poco de ruido...

Paso 9: Contenedor CSS

Ahora, para nuestro contenedor, estableceremos un ancho de 960px, un margen superior y inferior de 10px y lo centraremos en la página estableciendo los márgenes derecho e izquierdo a "auto". También forzaremos la aceleración de hardware en (algunos) dispositivos móviles usando '-webkit-transform: translateZ (0);'.


Paso 10: Encabezado CSS

Simplemente aumentaremos nuestro font-size de encabezado, centraremos el texto y le daremos un font-weight de 300 para una apariencia más elegante.


Paso 11: Pie de página de CSS

Centraremos horizontalmente el texto, agregaremos los márgenes superior e inferior de 50px cada uno, estableceremos el color del texto en gris y lo posicionaremos debajo de la sección "work" usando "clear: both".

Vamos a trabajar en la navegación ahora.


Paso 12: Navegación CSS

Empezaremos eliminando todo el estilo predeterminado de nuestro <ul>.  A continuación, agregaremos un margen superior y inferior de 50px y alinearemos el texto al centro.

Ahora, usando 'display: inline', obtendremos todos nuestros <li>s desplegados en una sola línea. Vamos a poner el cursor en 'puntero' y añadir un margen derecho de 10px a cada <li>. El color de texto predeterminado será un tono claro de gris que se convertirá en negro al hacer hover.

También añadiremos un pequeño tiempo de transición para animar los cambios de color.

Puesto que el último <li> es, umm, el último elemento hijo, no necesita ningún margen derecho. Así que, lo removeremos.

Ahora, vamos a agregar las barras después de los <li>s. Lo lograremos usando el pseudo-selector ': after'. Al establecer su 'content' en '/', el color a gris claro, y un margen izquierdo adecuado, podemos producir un sistema simple pero efectivo de separación de enlaces. También nos aseguramos de que las barras no cambien de color en la posición "hover" forzando su color predeterminado en li:hover también.

De nuevo, tendremos que eliminar la barra del últim <li>.

Eso es todo para la navegación, vamos a ir a las miniaturas ahora.


Paso 13: Thumbnails CSS

Primero, agregaremos un margen superior e inferior de 20px a la sección '.work'.

A continuación, vamos a darle estilo a cada ".work figure" (es decir, todas nuestras miniaturas). Usaremos 'float: left' para alinearlos. A continuación, agregamos un margen de 20px, estableceremos una altura y un ancho de 200px, y añadiremos un efecto de sepia suave con '-webkit-filter: sepia(0.4)'. Luego, vamos a establecer position a relative para que podamos posicionar de manera absoluta otros elementos (la descripción en este caso) dentro de la figure. A continuación, agregamos una suave sombra box-shadow que también funcionará como nuestro borde. También agregaremos un pequeño tiempo de transición para que nuestras cajas aumenten y reduzcan su tamaño.

Nos aseguraremos de que nuestra imagen siempre se ajuste a la miniatura estableciendo su altura y ancho al 100%.

Eso es todo para nuestras miniaturas básicas. Vamos a trabajar en sus descripciones ahora.


Paso 14: Descripciones CSS

Lista de Descripción

Como no queremos que nuestra descripción sea visible inicialmente, estableceremos su opacity en 0. Luego, la posicionaremos de forma absoluta (dentro de la figura) y la haremos rellenar completamente la figura estableciendo las 4 propiedades — top , right, bottom y left — a 0.

Luego configuramos su line-height a 2.5 y le damos un fondo oscuro, translúcido. Puesto que utilizamos un fondo oscuro, pondremos su color de texto en blanco. También añadiremos un pequeño tiempo de transición para animar su opacidad en la figure:hover.

Como queremos que aparezca al hacer hover sobre la miniatura, vamos a establecer su opacity a 1 en figure:hover.

Términos de Descripción

En primer lugar, estableceremos su font-family a "PT Sans Narrow". Para que aparezcan un poco más pequeños que sus descripciones, estableceremos su font-size a 80%. A continuación, convertiremos nuestros términos de descripción (cliente y función) en mayúsculas mediante 'text-transform:uppercase'.  También estableceremos un margen inferior negativo para evitar un espaciamiento excesivo entre los términos y sus descripciones.

Descripciones de Definición

No necesitamos hacer mucho aquí - simplemente estableceremos margin a 0. (Por defecto, los <dd>s tienen un ligero margen izquierdo.)


Paso 15: Thumbnails CSS 'current' / 'not-current'

.current

Cuando las miniaturas de una determinada categoría reciben la clase .current (a través de JS), queremos que crezcan y recuperen su tono normal (es decir, eliminen el sepia). Los escalaremos usando 'transform: scale (1.05)', de esta manera escalaremos a 1,05 veces el tamaño original en los ejes x e y, y eliminaremos el sepia que habíamos añadido anteriormente usando '-webkit-filter: sepia(0)'.

.not-current

Aquí, haremos exactamente lo opuesto de lo que hicimos con las miniaturas .current — las escalaremos hasta el 75% usando 'transform: scale(0.75)' y las haremos en blanco y negro usando '-webkit-filter:grayscale(1)'.

.current-li

Simplemente estableceremos el color de texto de los '.current-li's a negro.


Paso 16: El CSS Completo

Así se ve nuestro CSS completo:

Comencemos a trabajar en el JS ahora.


Paso 17: El Algoritmo JS

Esto es lo que vamos a hacer por medio de nuestro Javascript (en orden cronológico):

  1. Detectar el pulsado de nav > li.
  2. Decrementar el tamaño de todas las miniaturas dándoles la clase .not-current .
  3. Agregue la clase .current-li  al <li> correspondiente de la categoría seleccionada.
  4. Remover la clase .not-current sólo de las miniaturas de la categoría seleccionada.
  5. Agregar la clase .current a todas las miniaturas de la categoría seleccionada.

#2 aquí se hará usando la función scaleDown() y # 3, # 4 y # 5 se hará usando la función show(category).


Paso 18: JS La función scaleDown()

Usando los métodos removeClass y addClass, eliminamos la clase .current de los elementos que la tienen y agregamos la clase .not-current a todos ellos. También eliminaremos la clase .current-li de cualquier <li> que la tenga actualmente.


Paso 19: JS La Función show(category)

Esta función se implementará cada vez que se haga clic en <li>.  En primer lugar, invocaremos la función scaleDown() para reducir todas las miniaturas. A continuación, agregamos la clase .current-li  al <li> que corresponde a la categoría seleccionada.  A continuación, cambiaremos la clase de las miniaturas de la categoría de .not-current a .current (habíamos aplicado la clase .not-current  a todas las miniaturas de la función scaleDown()). Finalmente, si la categoría seleccionada es "all", eliminaremos las clases añadidas dinámicamente (es decir, .current y .not-current) de todas las miniaturas.

Nota: Dado que el nombre del id (del <li>) y class(de las figures) de cada categoría es el mismo, simplemente nos referiremos al <li> como '# + category' y los figures como '. + category'.


Paso 20: JS Detectar Clics e Implementar la Función show(category)

Finalmente, a través del método document.ready, agregamos la clase .current-li a li # all y detectamos los clics de nav > li. A continuación, obtendremos el id del <li> al que hicimos clic e implementaremos la función show(category) donde la 'category' será 'this.id' es decir la id del <li> al que hicimos clic. Así, por ejemplo, si se hace clic en el <li> con el id #print, show('print') se implementará.

Esto completa nuestro Javascript.


Paso 21: El JS completo

Nuestro JS completo se ve así:

Ahora que nuestro sitio es completamente funcional, vamos a hacerlo adaptivo.


Paso 22: CSS Haciéndolo Adaptivo

Vamos a abrir 'media-queries.css' y a seguir adelante. La forma en que usted elija implementar sus media queries depende totalmente de usted. Es posible que prefiera tener media queries dentro de su hoja de estilos principal, incluso puede preferir tenerlas modulares y en línea con cada declaración de estilo - ¡depende de usted!

Los cambios de estilo requeridos para cada punto de interrupción se describen aquí.

965px o menos

  • Disminuya el ancho del contenedor a 840 px
  • Disminuya la altura y el ancho de las miniaturas a 170px cada una para acomodar 4 miniaturas en cada fila [(170px + 40px) x 4 = 210px x 4 = 840px]

860px o menos

  • Disminuya el ancho del contenedor a 720 px
  • Aumentar la altura y el ancho de las miniaturas de nuevo a 200px cada uno para acomodar 3 en cada fila [(200px + 40px) x 3 = 240px x 3 = 720px]

740px o menos

  • Disminuya el ancho del contenedor a 600 píxeles
  • Disminuya la opacidad de .not-current al 50% (ya que estamos trabajando principalmente para dispositivos móviles ahora)
  • Disminuya la altura y el ancho de las miniaturas a 160px cada una para acomodar 3 en cada fila [(160px + 40px) x 3 = 200px x 3 = 600px]

610px o menos

  • Disminuya el ancho del contenedor a 460 px
  • Establezca el margen superior e inferior de las miniaturas a 20px y margen izquierdo y derecho a 60px
  • Incremente la altura y el ancho de las miniaturas de nuevo a 200px cada uno para acomodar 1 en cada fila [(200px + 120px) x 1 = 320px x 1 = 320px]

480px o menos

  • Disminuya el ancho del contenedor a 320px
  • Establezca el margen superior e inferior de las miniaturas a 20px y el margen izquierdo y derecho a 60px
  • Incremente la altura y el ancho de las miniaturas de nuevo a 200px cada uno para acomodar 1 en cada fila [(200px + 120px) x 1 = 320px x 1 = 320px]


Compatibilidad de Navegador

La funcionalidad de escalado básica (transformaciones CSS) funciona perfectamente en la mayoría de los principales navegadores, que incluyen:

  • IE 9+ (utilice http://www.useragentman.com/IETransformsTranslator/ para versiones inferiores)
  • Firefox 14+
  • Chrome 21+
  • Safari 5.1+

Los efectos de filtro (sepia y escala de grises) sólo funcionan en los navegadores Webkit.


jsfiddles

He hecho tres jsFiddles para que usted pruebe y experimente:

  1. Efecto de División de Descripción (Vertical)
  2. Efecto de División de Descripción (Horizontal)
  3. Imágenes en Miniatura Enmascaradas Diagonalmente

Conclusión

¡Eso es! Hemos creado con éxito un portafolio de trabajo, filtrable y adaptivo. Espero que haya encontrado este tutorial útil. ¡Gracias por leer!

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.