Tutorial web: Diseño y codificación de un sitio web limpio y multipropósito

Crear un bonito sitio web para ti o para tu empresa de trabajo independiente no es tan difícil como parece. Este tutorial está dirigido a todos aquellos que necesitan una solución bastante sencilla (no quiere decir aburrida) pero con estilo para su propio pequeño rincón de la web, sin tener que esforzarse demasiado. Además, el sitio web de ejemplo creado en este tutorial no tiene un tema específico, por lo que puede ser utilizado por casi cualquier persona, sin importar en qué nicho se encuentre. También es muy fácil de personalizar y modificarlo para que coincida con el estilo de tu marca no te llevará más que unos minutos.

Avance:

Esto es lo que vamos a crear: Ver demostración en vivo

Estructura alámbrica

Tenía una imagen clara en mi cabeza de cómo quería que se viera este sitio web, así que en lugar de dibujar, fui directamente a Photoshop y armé este simple wireframe:

Photoshop

Paso 0 - Preparaciones

Utilicé la plantilla de cuadrícula de 12 columnas 960.gs para este diseño. Si estás trabajando en Photoshop y no lo has probado antes, te sugiero que consigas las acciones de Photoshop 960gs. Con estas acciones puedes crear un nuevo archivo de cualquier dimensión deseada y luego se encargará de las guías y la superposición de la cuadrícula. Ahora podrías decir que no es tan difícil abrir la plantilla psd y cambiar el tamaño del lienzo, y estoy de acuerdo contigo. Pero me gusta más el método de acción simplemente porque no tienes que almacenar los PSD y buscarlos cada vez que comienzas un nuevo diseño. Si ya has descargado el paquete de plantillas 960.gs, encontrarás la acción de Photoshop en él. Si no lo has hecho, sigue adelante y descárgalo del sitio web de su creador: 960-grid-actions Una vez que las acciones se cargan en Photoshop, tendrás que trabajar un poco en ellas, porque de forma predeterminada, los cuadros de diálogo de acción no funcionan como te gustaría. Busquemos la acción (cuadrícula de 12 columnas en este caso) en el panel de acciones y observemos el estado de sus cuadros de diálogo. Si está activada, desactívela haciendo clic en este pequeño ícono: Luego, continúe y gire hacia abajo el menú de acciones y haga clic en el interruptor de alternancia de su cuadro de diálogo para activarlo. Este es el único cuadro de diálogo que necesitamos que aparezca cuando ejecutamos la acción. Nos permitirá especificar el tamaño del documento. Ejecute dicha acción y debería aparecer una nueva ventana de documento. Establezca el tamaño en 1020x1420px (nuestro contenido estará contenido dentro de 940px) y presione Aceptar; las guías deberían crearse en un segundo. Además, asegúrese de comenzar a organizar su PSD desde el principio.

Paso 1 - El logotipo

Arrastre la guía horizontal a 50 px y, debajo de ella, escriba la marca denominativa. Utilicé Apricot con un tamaño de fuente de 46 pt y en #e35e35. Arrastre otra guía debajo del logotipo para facilitar el corte más adelante. En este caso, la guía se coloca a 109 px.

Paso 2 - Menú de navegación

Pasemos a la navegación. Estará flotando hacia la derecha, así que alinéela como corresponde. La fuente que usé para la navegación fue Museo500, 14pt, #454545. La distancia entre cada palabra es de 34px. En caso de que no la tengas o no hayas oído hablar de ella (lo cual es poco probable), puedes obtenerla desde aquí . La familia Museo no es completamente gratuita, pero algunos de los pesos sí lo son. Consigue la de 500. En este punto no necesitamos diseñar los estados activo y de desplazamiento para este menú. Como puedes ver en la vista previa, solo será cuestión de unas pocas líneas de CSS.

Paso 3 - Sección deslizante

Crea una nueva guía horizontal 40 px por debajo de la última (a 149 px) y otra 373 px más abajo (a 522 px). Esta será la sección del control deslizante. Rellénala con el "patrón limpio 3 claro" de este conjunto de Patrones mínimos para fondos . Arrastra otra guía horizontal 30 px hacia abajo desde la parte superior de la sección del control deslizante, que sería de 179 px. La altura de la ventana del control deslizante es de 280 px, esa es otra guía, a 459 px. El ancho es de 940 px. Llama a esta capa "ventana" y rellénala con cualquier color por ahora. Para terminar la ventana del control deslizante, ve a las opciones de fusión de la capa y aplícale un trazo gris claro de 5 px.

Paso 4 - Controles deslizantes

En este ejemplo, utilicé 4 imágenes para el control deslizante, por lo tanto, 4 viñetas. Arrastre 2 nuevas guías horizontales a 489 px y 497 px, y una vertical a 55 px. Con la herramienta Elipse (U), dibuje cuatro círculos idénticos entre las dos guías horizontales que acaba de crear. Aplique a tres de ellas un trazo interior de 1 px utilizando #e35e35 como color, utilizando blanco como relleno o reduciéndolo hasta el 0 %. El diámetro de la viñeta en estado activo es de 10 px (en lugar de 8 px para el estado normal). Para hacerlo, vuelva a dibujar el círculo o simplemente cambie el color de relleno a #e35e35 y cambie el trazo para que sea exterior. Alinee las viñetas como se muestra aquí: Así es como debería verse en este punto:

Paso 5 - Sección Acerca de nosotros - 1.ª columna

Crea una nueva guía horizontal a 565 px (unos 40 px por debajo de la sección del control deslizante) y escribe el primer encabezado, "Quiénes somos", en Museo500, 19 pt, #454545. El texto del párrafo está 25 px por debajo del encabezado, tiene un relleno de 5 px a la izquierda y está configurado en Museo Sans 500, 13 pt. Nuevamente, la fuente se puede descargar desde aquí . Asegúrate de que el ancho de este párrafo no exceda los 240 px, una nueva guía vertical a 295 px te ayudará a controlar esto. Ahora, en el borde junto al párrafo. En primer lugar, carga los pinceles cuadrados usando el panel Preajustes de pincel y selecciona el de 3 px. Usa los siguientes ajustes para hacer que el pincel dibuje líneas discontinuas verticales (!): Manteniendo presionada la tecla Shift, dibuja el borde así: Duplica toda esta pequeña sección (aún mantienes todo organizado y está todo en una carpeta dedicada, ¿verdad?) y muévela 35 px hacia abajo.

Paso 6 - 2da columna

Crea una nueva columna de la misma manera que la primera, pero sin que el ancho del párrafo supere los 345 px. Una guía vertical de 705 px funcionará. Debajo del párrafo de texto, crea un botón de un tamaño de 104 x 28 px, establece el relleno en blanco, añade un trazo de 1 px #ffbca4 y centra el texto que se encuentra dentro. La fuente es Museo500 a 14 pt, #e35e35. Vista limpia:

Paso 7 - 3ra columna

Por último, el ancho de la tercera columna es deeste añopx. Estos son los ajustes de fuente: La distancia entre estos pequeños párrafos es de 25 px.

Paso 8 - Divisor ( hr /)

Crea una nueva línea horizontal de 868 píxeles. Vuelve a los pinceles cuadrados y elige el de 2 píxeles. Utiliza la siguiente configuración... ...y dibuja el divisor de esta manera (el color es #ffbca4):

Paso 9 - Sección de Proyectos Recientes

Crea una nueva guía de 932 px y escribe el encabezado de la sección. La configuración de fuente es: Museo500 16pt, #454545. Copia el botón de la sección anterior, ajusta su tamaño (118x28 px en este caso) y colócalo 30 px debajo del encabezado "proyectos recientes".

Paso 10 - Miniaturas del proyecto

Utilizando la herramienta Marco rectangular (M) crea una miniatura de 140x140px. Duplícala y muévela 40px hacia la derecha. Repite el proceso 2 veces más. Mueve todo el grupo 10px hacia abajo. Duplícalo para crear la segunda fila y muévelo 40px hacia abajo por debajo de la primera fila. Y así es como se ve todo en este punto: Duplica el divisor hr / y colócalo 60px debajo de la sección "proyectos recientes". Y el paso final de la parte de diseño es agregar enlaces al pie de página, 45px debajo del último divisor. Estas son las configuraciones para tipo, color y espaciado:

Rebanar

Recorta el logotipo, las viñetas (como un sprite, sobre un fondo transparente) y la miniatura del proyecto. La miniatura del proyecto también es un sprite. Haremos que pase de escala de grises a color completo al pasar el mouse sobre ella. En cuanto al fondo de la sección del control deslizante, donde usamos un patrón, regresa a las opciones de fusión de esa capa y pasa el mouse sobre el patrón para ver su título. En este caso, "clean pattern 3 light" dice que es de 5x5px, lo que significa que será suficiente cortar una pieza de 5x5 para hacer que el fondo sea uniforme.

Margen

Paso 0 - Preparaciones

Sé que no debería hacer falta decirlo, pero no olvides crear carpetas separadas para las imágenes, las hojas de estilo y los scripts.

Paso 1 - Estructura básica del documento

Estamos usando HTML5 y declarar HTML5 DOCTYPE es muy fácil. IE no admite los nuevos elementos HTML5, por lo que debemos llamar al script 'html5shiv' desde el documento.

!--[si es IE] mce:script _mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"/mce:script ![endif]--

Paso 2 – El logotipo

Para el logotipo usamos la etiqueta h1, pero en este caso no tenemos una fuente web que necesitemos, así que la reemplazaremos con la imagen más adelante en la parte CSS.

h1a href="https://.net"/a/h1

Paso 3 - Menú de navegación

En la vista previa, viste el menú desplegable en el menú de navegación, que es exactamente lo que crea este código. Estamos usando una lista desordenada para nuestra navegación y el menú desplegable es simplemente otra lista desordenada dentro de uno de los elementos de la lista principal. El primer enlace tiene una clase de "activo" para que podamos darle estilo al estado activo de la navegación.

ullia href="#"inicio/a/lilia href="#"trabajo/aullia href="#"web/a/li lia href="#"imprimir/a/lilia href="#"ilustración/a/lilia href="#"movimiento/a/li/ul/lilia href="#"acerca de/a/lilia href="#"blog/a/lilia href="#"Contacto/a/li /ul

Paso 4 - Control deslizante

Vamos a reservar un espacio para el control deslizante, pero lo dejaremos vacío por ahora. Volveremos a ello al final del tutorial y explicaré por qué...

hr /

Paso 5 – Sección Acerca de Nosotros

Tenemos 3 columnas, cada una de las cuales es una con una clase de 'columna', y las dos últimas también necesitan una clase adicional cada una, para darles el estilo que queremos, y queremos que sean diferentes entre sí. 😉 La segunda columna tiene una clase adicional de 'pitch' (como en un discurso de ascensor). La tercera columna se dedicó a la información de contacto, por lo que recibe una clase adicional de 'contactos'.

div clase="columna"Quiénes somos es un equipo de profesionales creativos que trabajan arduamente para producir productos de diseño de primer nivel.h2Donde estamos/h2La sede  se encuentra en Filadelfia, pero el equipo es internacional. Hemos reunido a un gran grupo de diseñadores talentosos y capacitados para brindarles a las personas recursos increíbles./divdivCómo podemos ayudarleTrabajamos con diferentes medios, como la web, la impresión y el cine. Al haber trabajado en diferentes nichos, poseemos conocimientos invaluables y habilidades excepcionales que utilizamos para resolver los problemas de los clientes y hacer realidad sus ideas.a href="#"Nosotros también escribimos blogs/a !-- este será un botón --/div !-- Diseñaremos los párrafos y enlaces de la tercera columna de forma un poco diferente al resto. El número de teléfono debe estar dentro de una etiqueta span para que toda la columna tenga un estilo uniforme.--divh2Cómo contactar/h2Envíe un correo electrónico a a href="mailto:#"hello@.net/aChatea con nosotros en Skype a href="callto:#"/aLlámenos al span+1 (23) 456-78-99/spanSocializa con nosotros a href="#footer"Ver pie de página para ver los enlaces/a/divhr /

Paso 6 - Sección de Últimos Proyectos

Todo aquí se explica por sí solo:

h3Proyectos recientes:/h3a href="#"ver portafolio/aullia href="#"/a/lilia href="#"/a/lilia href="#"/a/lilia href="#"/a/lilia href="#"/a/lilia href="#"/a/lilia href="#"/a/lilia href="#"/a/li/ul hr /

Paso 7 - Pie de página

a href="#"Facebook/a a href="#"Twitter/a a href="#"Flickr/a a href="#"Dribbble/a a href="#"Forrst/aTodo el contenido ?este año   DesignerOnDuty. Todos los derechos reservados.

CSS

Paso 1: Restablecimiento de CSS

Restablecer CSS es una parte muy importante de cada proyecto, comience siempre con él.

/*** RESTABLECER CSS ***/ html, cuerpo, div, span, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, dirección, citar, código, del, dfn, em, img, ins, kbd, q, samp, pequeño, fuerte, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, conjunto de campos, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección, resumen, tiempo, marca, audio, video{ margen: 0; relleno: 0; borde: 0; contorno: 0; tamaño de fuente: 100%; alineación vertical: línea de base; fondo: transparente; } cuerpo{ altura de línea: 1; } artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección{ display:block; } nav ul{ list-style:none; } blockquote, q{ quotes:none; } blockquote:before, blockquote:after, q:before, q:after{ content:''; content:none; } a{ margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration: none; } ins{ background-color:#ff9; color:#000; text-decoration:none; } mark{ background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del{ text-decoration: line-through; } abbr[título], dfn[título]{ border-bottom:1px punteado; cursor:ayuda; } table{ border-collapse:collapse; border-spacing:0; } /****** Este separador de contenido ya tiene el estilo que buscamos ******/ hr{ clear: both; display:block; height:1px; border:0; border-top: 1px dashed #ffbca4; /* Cambie este color y estilo de borde para adaptarlo a sus necesidades */ margin:2.5em 0 3em 0; padding:0; } input, select{ vertical-align:middle; }

PD: tenga en cuenta que ya he cambiado el estilo HR de antemano para que coincida con el estilo del separador que diseñamos en Photoshop.

Paso 2 - Declaración de @font-face

Los distintos navegadores requieren distintos formatos de fuente para que funcione con @font-face. Si no tienes el kit web de Museo, puedes conseguir uno en MyFonts (usa los enlaces del principio de esta publicación). Además, hay un generador de kit de @font-face en fontsquirrel.com. Puedes obtener más información sobre @font-face en este excelente artículo

/* @font-face DECLARACIÓN */@cara-de-fuente{    familia de fuentes: 'Museo-500';    fuente: url('../webfonts/eot/museo500.eot');    fuente: url('../webfonts/woff/museo500.woff') formato('woff'),         url('../webfonts/ttf/museo500.ttf') formato('truetype'),         url('../webfonts/museo500.svg#Museo-500') formato('svg');}@cara-de-fuente{    familia de fuentes: 'MuseoSans-500';    src: url('../webfonts/eot/museosans500.eot');    fuente: url('../webfonts/woff/museosans500.woff') formato('woff'),         url('../webfonts/ttf/museosans500.ttf') formato('truetype'),         url('../webfonts/museosans500.svg#MuseoSans-500') formato('svg');}

Paso 3 - General

Ahora que hemos declarado nuestras fuentes personalizadas usando la función @font-face, especifiquemos el selector de cuerpo.

html{    ancho: 100%; alto: 100%;}cuerpo{    familia de fuentes: 'MuseoSans-500', Helvetica, Arial, sans-serif;    tamaño de fuente: 14px;    color:#454545;    fondo:#fff;}encabezamiento{    ancho: 940px;    margen: 50px auto 30px; /* esto centrará el encabezado en la página (horizontalmente) y aplicará los márgenes superior e inferior */}

Paso 4 – El logotipo

Es hora de reemplazar el texto de nuestro logotipo con la imagen.

encabezado h1 a{    fondo: url('../img/logo.png');    ancho: 268px; alto: 59px;    flotar: izquierda; mostrar: bloque;    sangría de texto: -99999px;}

Paso 5 - Navegación

Como recordarás de la parte de Photoshop, usamos Museo-500 para el texto de navegación y, como dije, el estilo de desplazamiento y estados activos son solo un par de líneas de código.

encabezado nav{    flotar: derecha;    margen: 10px 0 0 0;    familia de fuentes: 'Museo-500', Helvetica, Arial, sans-serif;}encabezado li{    flotante: izquierda; pantalla: en línea;    posición:relativa; /* Necesitaremos esto para que el menú desplegable funcione correctamente */}encabezado li a{    pantalla: bloque;    color: #454545;    padding: 8px 16px; /* Espaciando los enlaces */}encabezado li a:hover, encabezado li a.active{    color: #fff;    fondo: #e35e35;}

Paso 6 - Menú desplegable

Esto ocultará el contenido del menú desplegable de la pantalla cuando el usuario no lo llame (no se pase el cursor sobre su elemento principal). También se aplica una transición CSS3 a la opacidad del menú desplegable, lo que le da un efecto de desvanecimiento agradable.

.desplegable{    estilo de lista: ninguno;    posición: absoluta;    izquierda: -9999px;    z-index: 10; /* Así el menú desplegable permanece encima de todo lo demás */    opacidad: 0;    -webkit-transition: opacidad 0,35 s lineal;    -moz-transition: opacidad 0,35 s lineal;    -o-transición: opacidad 0,35 s lineal;    transición: opacidad 0,35 s lineal;}

Esto igualará el tamaño de todos los elementos de la lista desplegable y evitará que el texto pase a la siguiente línea, a menos que se use la etiqueta ;).

.lista desplegable    relleno: 0;    margen: 0;    flotante: ninguno;}.desplegable a{    espacio en blanco: nowrap;    alinear texto: izquierda;    pantalla: bloque;    tamaño de fuente: 13px;}

Este es el estilo de apariencia y comportamiento del menú desplegable cuando está activo:

encabezado li:hover ul{    izquierda: 0;    opacidad: 1;}encabezado li:hover ul a{    color: #e35e35;    fondo: #fff;    -webkit-transition: todos los 0,15 s lineales;    -moz-transition: todos los 0,15 s lineales;    -o-transición: todos los 0,15 s son lineales;    transición: todos los 0,15 s lineales;}encabezado li:hover ul a:hover{    color: #fff;    fondo: #e35e35;}

PD: Aprendí esta excelente técnica de menú desplegable con CSS puro de Harry Roberts y la usé como base para este ejemplo. Consulta el artículo original aquí .

Paso 7 - Control deslizante*

*Volveremos a ello más adelante, pero por ahora, dejemos un poco de contexto:

#control deslizante{    claro: ambos;    altura: 340px;    fondo: url('../img/slider_bg.png') repetir;    relleno: 25px 0 8px 0;    posición: relativa;    superior: 40px;}

Paso 8 – Sección Acerca de nosotros

Primera columna:

#acerca de{    ancho: 940px;    margen: 30px auto 0;}.columna{    flotante: izquierda; pantalla: en línea;    ancho: 240px;    margen: 0 40px 0 15px;    alinear texto: izquierda;}

2da y 3ra columnas:

      .pitch{ ancho: 345px; margen: 0 40px 0 25px; } .contactos{ ancho:este añox; margen: 0 15px 30px 15px; }

Tipografía, etc.

#acerca de h2{    fuente: 19px 'Museo-500', Helvética, Arial, sans-serif;    margen inferior: 14px;}.columna p{    tamaño de fuente: 13px;    altura de línea: 1,7;    margen inferior: 18px;    relleno: 0 5px;    border-left: 1px dashed #ffbca4; /* Esa línea discontinua vertical que hemos dibujado en Photoshop */}.contactos a, span{    tamaño de fuente: 12px;    pantalla: bloque;    color: #454545;    -webkit-transition: color lineal de 0,15 s;}.contactos a:hover{    color: #e35e35; /* Todo excepto el número de teléfono cambiará de color al pasar el cursor sobre él */}

Botón:

.tono p{    margen: 0 0 28px 0;}.lanzar un{    fuente: 14px 'Museo-500', Helvética, Arial, sans-serif;    alinear texto: izquierda;    color: #e35e35;    relleno: 6px 12px;    fondo: #fff;    borde: 1px sólido #ffbca4;    -webkit-transition: todos los 0,15 s lineales;    -moz-transition: todos los 0,15 s lineales;    -o-transición: todos los 0,15 s son lineales;    transición: todos los 0,15 s lineales;}lanzar a:flotar{    relleno: 6px 18px;}.pitch a:activo{    color: #fff;    fondo: #e35e35;}

Paso 9 – Sección de Proyectos Recientes

#proyectos_recientes{    desbordamiento: oculto;    ancho:940px;    margen: 60px auto 0;}#proyectos_recientes h3{    fuente: 16px 'Museo-500', Helvética, Arial, sans-serif;    margen: 0 0 35px 15px;}

Botón nuevamente, simplemente copiemos el estilo del botón de una de las secciones anteriores.

#proyectos_recientes pa{    fuente: 14px 'Museo-500', Helvética, Arial, sans-serif;    alinear texto: izquierda;    color: #e35e35;    margen: 0 0 0 15px;    relleno: 6px 12px;    fondo: #fff;    borde: 1px sólido #ffbca4;    -webkit-transition: todos los 0,15 s lineales;    -moz-transition: todos los 0,15 s lineales;    -o-transición: todos los 0,15 s son lineales;    transición: todos los 0,15 s lineales;}#proyectos_recientes pa:hover{    relleno: 6px 18px;}#proyectos_recientes pa:activo{    color: #fff;    fondo: #e35e35;}

Paso 10 - Miniaturas del proyecto

#proyectos_recientes li a{    pantalla: bloque;    ancho: 140px; alto: 140px;}#proyectos_recientes li{    flotante: izquierda; pantalla: en línea;    margen:este año;}

Cómo usar el radio del borde para simular la forma de un círculo. Si quieres hacer lo mismo para IE, echa un vistazo a CSS3 Pie .

#proyectos_recientes li{    flotante: izquierda; pantalla: en línea;    margen:este año;    -radio del borde del webkit: 80px;    -moz-border-radius: 80px;    radio del borde: 80px;}

Transiciones CSS3 para revelar la forma cuadrada original al pasar el mouse:

#proyectos_recientes li{    flotante: izquierda; pantalla: en línea;    margen:este año;    -radio del borde del webkit: 80px;    -moz-border-radius: 80px;    radio del borde: 80px;    -webkit-transition: -webkit-border-radius 0,20 s lineal;    -moz-transition: -moz-border-radius 0,20 s lineal;    -o-transición: todos los 0,20 s son lineales;    transición: radio del borde 0,20 s lineal;}#proyectos_recientes li:hover{    -radio del borde del webkit: 0px;    -moz-border-radius: 0px;    radio del borde: 0px;}

Uso de sprites para la transición de escala de grises a color:

.item1{    fondo: url('../img/portfolio_item1.jpg') 0 140px;}.item2{    fondo: url('../img/portfolio_item2.jpg') 0 140px;}.item3{    fondo: url('../img/portfolio_item3.jpg') 0 140px;}.item4{    fondo: url('../img/portfolio_item4.jpg') 0 140px;}.item5{    fondo: url('../img/portfolio_item5.jpg') 0 140px;}.item6{    fondo: url('../img/portfolio_item6.jpg') 0 140px;}.item7{    fondo: url('../img/portfolio_item7.jpg') 0 140px;}.item8{    fondo: url('../img/portfolio_item8.jpg') 0 140px;}

En este momento solo tenemos una imagen en escala de grises, así que volvamos a la declaración anterior y agreguemos 'background-position: 0 0;' para que la versión en color se revele al pasar el mouse según lo planeado.

#proyectos_recientes li:hover{    -radio del borde del webkit: 0px;    -moz-border-radius: 0px;    radio del borde: 0px;    background-position: 0 0; /* Esto es lo que acabamos de agregar */}

Paso 11 - Pie de página

pie de página{    claro:ambos;    ancho: 940px;    margen: 0 automático;    relleno: 0 0 50px 0;}pie de página nav{    tamaño de fuente: 13px;    ancho: 660px;}pie de página a{    flotar: izquierda;    pantalla: en línea;    color: #ffbca4;    margen: 0 0 0este año;}

Vamos a darle vida a estos enlaces de pie de página con un poco de magia CSS3.

pie de página a{    flotar: izquierda;    pantalla: en línea;    color: #ffbca4;    margen: 0 0 0este año;    relleno: 5px 10px;    -webkit-transition: todos los 0,1 s lineales;    -moz-transition: todos los 0,1 s lineales;    -o-transición: todos los 0,1 s son lineales;    transición: todos los 0,1 s lineales;}pie de página a:hover{    relleno: 10px 10px;    color: #fff;    fondo: #e35e35;}pie de página a:activo{    color: #fff;    fondo: #454545;}

Información de derechos de autor.

pie de página p{    flotante: derecha; pantalla: en línea;    color: #454545;    tamaño de fuente: 11px;    altura de línea: 1,5;    alinear texto: izquierda;}

¡De vuelta al control deslizante!

¿Qué y por qué?

No puedo decir que conozca muy bien Javascript, la verdad es que apenas sé nada al respecto. Pero los frameworks como jQuery son muy fáciles de entender y aprender, y son lo suficientemente potentes como para añadir mucha funcionalidad a tu sitio y hacerte más feliz (y a los visitantes). Al escribir este tutorial, primero opté por el conocido control deslizante Nivo, que es definitivamente genial. Te da muchas opciones de personalización y es bastante fácil de personalizar. Pero al final decidí deshacerme del querido Nivo por lo que siempre uso en mis proyectos: un control deslizante basado en el de Soh Tanaka . Soh es un genio y he aprendido mucho leyendo su blog. Este control deslizante no ofrece ningún estilo de transición ni subtítulos, pero es muy fácil de implementar y personalizar. Creo que es una gran solución para proyectos en los que no necesitas todas las funciones más sofisticadas que ofrecen Nivo y similares.

Marcado para el control deslizante

Regresa a nuestra sección #slider y agrega esto:

sección        div        div            a href="#"img src="img/slide1.jpg" //a            a href="#"img src="img/slide2.jpg" //a            a href="#"img src="img/slide3.jpg" //a            a href="#"img src="img/slide4.jpg" //a        /div        /div        div        a href="#" rel="1"1/a !-- esta es la viñeta de control activa --        a href="#" rel="2"2/a        a href="#" rel="3"3/a        a href="#" rel="4"4/a        /div/sección

Dar estilo al control deslizante

Ya hemos empezado a darle estilo y hemos añadido el fondo, volvamos allí y continuemos.

.ventana{    ancho: 940px; alto: 280px;    posición: relativa;    margen: 0 automático;    desbordamiento: oculto; /*--Oculta todo lo que esté fuera del ancho/alto establecido--*/    borde: 5px sólido #e3e3e3;}.imagen_reel{    posición: absoluta;    arriba: 0;    izquierda: 0;}.image_reel img{    flotante: izquierda; pantalla: en línea;}.paginación{    ancho: 940px;    margen: 18px automático 22px;}.paginación a{    flotante: izquierda; pantalla: en línea;    relleno: 5px 11px;    fondo: url('../img/bullets.png') 0 0;    sangría de texto: -9999px;}.paginación a.activa{    posición de fondo: 0 22px;}.bala1 {    margen: 0 0 0 9px;}

jQuery

Ahora finalmente es el momento de escribir el script en sí. En primer lugar, llama al script jQuery desde el encabezado de nuestro archivo HTML. Ahora crea un nuevo archivo JS, llámalo 'slider.js' y pega en él el siguiente código. Todo está comentado por el autor para que nadie se pierda. 😉

  $(documento).ready(función() {    //Mostrar la paginación y activar su primer enlace    $(".paginación").mostrar();    $(".paginación a:primero").addClass("activo");    //Obtenga el tamaño de la imagen, cuántas imágenes hay y luego determine el tamaño del carrete de imágenes.    var imageWidth = $(".ventana").width();    var imageSum = $(".image_reel img").size();    var imageReelWidth = anchoimagen * sumaimagen;    //Ajusta el carrete de imágenes a su nuevo tamaño    $(".image_reel").css({'ancho' : imageReelWidth});    //Función de paginación y control deslizante    rotar = función(){    var triggerID = $active.attr("rel") - 1; //Obtener el número de veces que se deslizará    var image_reelPosition = triggerID * imageWidth; //Determina la distancia que debe deslizarse el carrete de imágenes    $(".paging a").removeClass('active'); //Eliminar todas las clases activas    $active.addClass('active'); //Agrega la clase activa (la $active se declara en la función rotateSwitch)    //Animación del control deslizante    $(".image_reel").animate({        izquierda: -image_reelPosition    }, 500 );    };  //Evento de rotación y sincronización    rotarInterruptor = función(){    play = setInterval(function(){ //Establecer temporizador: esto se repetirá cada 5 segundos        $active = $('.paging a.active').next(); //Pasar a la siguiente paginación        if ( $active.length === 0) { //Si la paginación llega al final...            $active = $('.paging a:first'); //volver al primero        }        rotate(); //Activa la función de paginación y control deslizante    }, 5000); //Velocidad del temporizador en milisegundos (5 segundos)    };    rotateSwitch(); //Ejecutar función al iniciar   //Al pasar el mouse sobre ella    $(".image_reel a").hover(función() {    clearInterval(play); //Detener la rotación    }, función() {    rotateSwitch(); //Reanudar el temporizador de rotación    });            //Al hacer clic    $(".paginando a").click(funcion() {    $active = $(this); //Activa la paginación en la que se hizo clic    //Restablecer temporizador    clearInterval(play); //Detener la rotación    rotate(); //Activa la rotación inmediatamente    rotateSwitch(); // Reanudar el temporizador de rotación    devuelve falso; //Evita que el navegador salte al ancla del enlace    });    });

No olvides volver al archivo HTML y llamar a este script recién creado: .

¡Hecho!

Eso es todo. Demostración en vivo

Crea fácilmente un efecto de letra invertida en Illustrator

Es muy probable que en algún momento hayas visto el efecto de letras volteadas en algunos diseños y, si te costó descubrir cómo se lograba, es posible que pienses que se hacía creando cada letra por separado, modificando cada una individualmente y luego coloreándolas con un efecto de degradado. Pero este efecto es realmente muy fácil de hacer en Illustrator y lleva menos de 5