Share
Los sprites CSS pueden aumentar dramáticamente el rendimiento de un sitio web, y con jQuery, podemos implementar efectos de transición increíbles fácilmente. Empecemos.
Los Sprites se remontan a los primeros días de los videojuegos, donde se utilizaron como técnica de optimización para mostrar gráficos en 2D. Un sprite CSS es una técnica que consiste en agrupar imágenes para formar una única imagen maestra, y luego mostrar selectivamente solo las secciones requeridas usando atributos CSS (ancho, alto, posición de fondo, etc.).
En este tutorial crearemos un menú de navegación inspirado en Dragon Interactive. Tienen un excelente concepto de diseño, con un uso perfecto de los reflejos y colores..
Comience creando un nuevo documento de Photoshop, que es de 800 px de ancho por 500 px de alto.
A continuación, crearemos una regla horizontal en la marca de 70px yendo a ver -> nueva guía; Esta será nuestra altura de menú..
Ahora vamos a crear un menú de carpeta, y dentro de él, una subcarpeta llamada "Menú de texto".
Seleccione la herramienta de texto (acceso directo: t) y configure las siguientes propiedades en la caja de herramientas de caracteres.
También se pueden usar otras fuentes, pero esta familia de fuentes es más adecuada para el efecto de texto incrustado que daremos más adelante. Si no tiene esta fuente, puede obtenerla en el sitio web..
Cree otra regla horizontal a 40px, esto ayudará a mantener el texto de nuestro menú alineado horizontalmente.
Ahora seleccione la carpeta de texto del menú y escriba las palabras de menú INICIO, SERVICIOS, PORTAFOLIO, ACERCA DE, y CONTACTO, manteniendo espacios iguales entre cada uno. Ahora debería verse como la imagen de abajo.
Ahora cree otra carpeta debajo de la carpeta de texto del menú y asígnele el nombre "Fondo del menú".
A continuación, vamos a crear una nueva capa dentro de la carpeta de fondo del menú, y luego, usando una herramienta de marco rectangular, creamos una selección de 100px de ancho y 70px de alto..
Seleccione la herramienta de degradado (método abreviado: g) y configure los colores de degradado de # 555555 a #adadae .
Ahora dibuja un gradiente comenzando desde la parte inferior de la selección hasta la parte superior de la selección; Entonces dale un golpe con las siguientes propiedades:
El trazo fue agregado para dar profundidad a nuestras divisiones de menú..
Ahora, para lograr los fines altamente pulidos, y para crear el efecto adecuado cuando se produce el movimiento del mouse, le daremos un resaltado adyacente.
Vaya a seleccionar> modificar> contrato e ingrese 1px.
Seleccione la herramienta de grabación y establezca las siguientes propiedades:
Ahora moveremos la división de menú a la derecha 1px, usando la herramienta de movimiento (atajo: v) para mostrar el lado izquierdo del trazo, que era invisible debido a su posición.
Cree copias de la capa anterior y ajústelas con respecto al texto del menú.
Así es como se ve el menú cuando ajustamos la posición de las capas y el texto del menú en consecuencia.
Para incrustar el efecto tipográfico, agregamos el efecto "Eliminar sombra" con las siguientes configuraciones a nuestro texto:
Ahora es el momento de crear el aspecto del menú durante el estado de desplazamiento del mouse. Cree una copia de la carpeta "Fondo del menú" y cámbiele el nombre a "Menu Hover". Luego, utilizando la herramienta Mover, mueva la carpeta 70px hacia abajo para que la parte superior del menú recién creado toque la guía horizontal..
La razón por la que hemos creado la copia de la carpeta del menú es porque estamos interesados en la posición del texto del menú. Si lo hubiéramos creado manualmente, tendríamos que preocuparnos por la alineación exacta del texto del menú, que sería mucho más tedioso.
Ahora, seleccionaremos la capa de fondo del menú de servicio de la carpeta "Menú Hover", y le daremos un bonito efecto elegante sobre el estado de hover. Para hacer esto, primero cree una selección presionando ctrl y haga clic en la capa; a continuación, presione eliminar, que eliminará el tono actual. Siguiente…
Seleccione un degradado radial y dibuje una línea desde la parte inferior de la selección hasta 30 px por encima de la parte superior de la selección.
Nuestro trabajo no está terminado todavía. Para darle un toque suave, necesitamos pulirlo un poco más. Para crear una división de menú más reveladora, haremos que los bordes sean más oscuros. Para lograr esto, necesitamos agregar los siguientes efectos:
Aplica un efecto similar para la cartera y sobre los menús. Para el menú de contacto, cambie los colores de degradado a:
Así se ve nuestro menú ahora:
La división del menú del hogar debe recibir un tratamiento especial; seleccione la capa presionando ctrl y haciendo clic en la capa. Presione eliminar para eliminar el tono actual y seleccione la herramienta de degradado con los siguientes colores:
Esta vez, seleccione un degradado lineal y dibuje un degradado desde la parte superior de la selección hasta la parte inferior de la selección.
Seleccione la herramienta de grabación, manteniendo el resto de las propiedades iguales a excepción del rango, ajústelo a medios tonos y aplique pinceladas alrededor de los bordes excepto en la parte superior.
Ahora para crear el efecto vidrioso: seleccione la herramienta pluma, asegúrese de que esté seleccionado "relleno de forma", dibuje la forma como la de la imagen y configure su modo de fusión a luz suave con una opacidad de aproximadamente el 40%.
Dos cosas más antes de que terminemos con la parte de Photoshop.
Finalmente nuestra imagen de sprite se ve así:
Ahora viene la sección de codificación, que es bastante fácil. Cree un archivo html y agregue el siguiente código:
Menú impresionante
Aquí hemos creado un archivo html simple, que consiste en una lista desordenada: nuestra barra de navegación. Antes de seguir adelante, echemos un vistazo a un par de archivos que ahora estaremos importando:
Cree un archivo .js externo, llamado sprite.js, y pegue el siguiente código.
Accentsconagua
$ (function () $ ('# navigation li a'). append (''); // intervalo cuya opacidad se animará cuando el mouse se desplace. $ ('# navigation li a'). hover (function () $ ('. hover', this) .stop (). animate ('opacity': 1, 700, 'easeOutSine'), function ( ) $ ('. hover', este) .stop (). animate ('opacity': 0, 700, 'easeOutQuad'))); Cuando se carga el DOM, inyectamos un lapso en nuestra etiqueta de anclaje; este lapso realmente animará. Luego, utilizando la función de desplazamiento para la etiqueta de anclaje, animamos la opacidad del intervalo. Para crear una animación más suave, utilizaremos la ecuación de aceleración. Estoy usando 'easeoutsine' y 'easeoutquad'; Siéntase libre de probar una combinación alternativa, si lo desea..
Ahora viene la parte de CSS. Crea el archivo style.css. A continuación se muestra la imagen inicial de cómo se ve el menú. Por ahora, solo son cuatro puntos, porque aún no lo hemos diseñado..
Primero, alineamos la lista..
cuerpo fondo: # 000000; #navigation margin-left: 250px; #navigation li float: left;
Solo hemos movido un poco el menú del centro..
Estilo de la etiqueta de anclaje; Su fondo será nuestra imagen de sprites..
#navigation li a background-image: url (images / sprite.jpg); bloqueo de pantalla;
El estilo de visualización debe estar configurado para bloquear; De lo contrario, no se mostrará nada..
En el siguiente paso, les daremos a cada uno el posicionamiento adecuado..
.home background-position: 0px 0px; ancho: 102px; altura: 70px; .services background-position: -102px 0px; ancho: 110px; altura: 70px .portfolio background-position: -212px 0px; ancho: 108px; altura: 70px .about background-position: -320px 0px; ancho: 102px; altura: 70px .contact background-position: -422px 0px; ancho: 103px; altura: 70px
Aquí, hemos establecido la posición de fondo y el ancho de cada etiqueta de anclaje. Los valores pueden variar, y requiere un poco de tiempo para ser perfecto.
#navigation a .hover background: url (images / sprite.jpg) no-repeat; bloqueo de pantalla; opacidad: 0; posición: relativa; arriba: 0; izquierda: 0; altura: 100%; ancho: 100%; #navigation a.home .hover background-position: -0px -72px; #navigation a.services .hover background-position: -102px -72px; #navigation a.portfolio .hover background-position: -212px -72px; #navigation a.about .hover background-position: -320px -72px; #navigation a.contact .hover background-position: -422px -72px;
Ahora definiremos el CSS para el lapso; esta es la misma imagen de sprite que se usa arriba. La altura y el ancho están hechos al 100% para que ocupen todo el bloque de anclaje. El fondo de cada etiqueta de span se ajusta, y finalmente nuestro trabajo está completo.
Tenga en cuenta que se necesita tiempo para ajustar correctamente la posición y el ancho; puede terminar con valores ligeramente diferentes para estos atributos, y eso está perfectamente bien!
Phew parece mucho trabajo, pero las grandes cosas toman tiempo para construirse. Aquí hay algunos recursos adicionales que pueden ser útiles.
