Compartir es una parte integral de la experiencia web y los diseñadores siempre están buscando formas nuevas e interesantes para resaltar o mostrar la parte compartida de sus páginas.
Hoy, vamos a crear un menú para compartir sencillo que integra una fuente de ícono así como algunas animaciones. El producto final está inspirado en Disqus, pero tiene un toque único. Vamos a saltar y ver cómo funciona.
Echa un vistazo a la demostración final: haga clic aquí
Menú Disqus Share
La idea para el tutorial de hoy proviene del menú de comentarios de Disqus que se ve al final de este y de todos los demás artículos de Design Shack. Cuando alguien deja un comentario, puedes compartir ese comentario a través de un pequeño menú para compartir. Por defecto, es simplemente la palabra "compartir", pero cuando pasas el ratón sobre ella, tres íconos sociales salen volando y se hacen visibles. Es un efecto llamativo que es muy simple de construir, así que pensé que sería divertido caminar a través de él.
Paso 1. La fuente del icono
Para este menú, necesitaremos al menos tres iconos de redes sociales. Para evitar los problemas de escala que ve en el ejemplo de Disqus anterior, me gustaría que fueran basados en vectores. Para lograr esto podríamos ir de dos maneras diferentes. Lo primero es usar gráficos SVG, que es bastante fácil. Quizás una ruta aún más fácil sea simplemente usar una fuente de icono.
Después de algunas búsquedas, encontré Socialico de FontFabric, que es gratis, tiene toneladas de iconos y tiene licencia para incrustar en sitios web.
Ahora, para asegurarnos de que tenemos la máxima compatibilidad para incrustar esta fuente en nuestra página, vayamos a FontSquirrel. Este sitio nos permitirá cargar un solo archivo de fuente y descargar un kit @ font-face bien empaquetado completo con todos los diferentes tipos de archivos y el código que necesitamos para incrustar la fuente en CSS.
Después de descargar el kit de @ font-face, tome todos los archivos de fuente incluidos y colóquelos en el directorio principal del sitio para este proyecto. Si abrimos el archivo CSS que se generó, encontramos el siguiente código, que podemos copiar y pegar en nuestro propio CSS.
¡Hasta ahora tan bueno! Ahora tenemos una fuente impresionante disponible para nosotros que incrustará iconos sociales infinitamente escalables en nuestra página. Tienes que apreciar ese tipo de conveniencia.
Paso 1. El HTML
Ahora es el momento de marcar este tonto. Hacer esto es extremadamente fácil. Primero, cree un párrafo con un nombre de clase de? Compartir ?, luego escriba? Compartir? en como el texto también.
A continuación, agregue tres enlaces después de? Compartir? texto. Usaré las mayúsculas F, L y S, que se traducen a Facebook, Twitter y StumbleUpon en nuestra fuente de ícono social.
¡Eso es! Todo lo que necesitamos es este simple marcado, recurriremos a CSS para todas las cosas de lujo.
Paso 2. Párrafo CSS
Lo primero que vamos a necesitar de estilo es el párrafo en sí. Hay algunas cosas clave para llegar aquí. Primero, necesitamos establecer la posición para relativo. Esto es así más adelante, cuando usamos el posicionamiento absoluto en los iconos, permanecerán en los límites del párrafo.
A continuación, agregamos algunos márgenes, relleno, dimensiones, color y configuramos la fuente. Tenga en cuenta que he hecho todo de gran tamaño para los fines de la demostración. ¡Siéntete libre de escalar todo esto!
Con este fragmento de código, esto es lo que debería tener tu página. Tenga en cuenta que, en este punto, los iconos son solo letras, esto se debe a que aún no hemos establecido la fuente para los enlaces. Vamos a ocuparnos de eso a continuación.
Paso 3. Párrafo CSS
Ahora es el momento de codificar esas etiquetas de anclaje. Aquí vamos a utilizar el posicionamiento absoluto, que, de nuevo, restablece la posición de esos enlaces dentro de los límites de nuestro párrafo relativamente posicionado. Con posicionamiento absoluto, podemos mover los artículos en su lugar con el parte superior y izquierda propiedades
A continuación, cuidemos la apariencia de los enlaces. Queremos configurar el color, la decoración del texto y la fuente. Para la fuente, asegúrese de usar el kit de fuentes Socialico que creamos en el paso uno.
Este código transforma nuestras letras en los iconos sociales que estamos buscando. El problema, por supuesto, es que todos están agrupados en el lado izquierdo.
En realidad, sin embargo, esto no es un problema en absoluto, es exactamente lo que queremos. Solo sobre la marcha queremos que estos se extiendan de una manera agradable y animada. Por ahora, sin embargo, debemos hacer que estos iconos sean invisibles y agregar una transición para que cualquier cambio que ocurra más adelante sea gradual.
Etapa 4. Hovers basicos
Tenemos prácticamente el punto de partida de nuestro menú todo codificado. Ahora solo tenemos que resolver todo un lío de estados flotantes para hacer que todo este trabajo funcione. Comenzamos con unos pocos efectos básicos.
La primera posición del cursor cambia el cursor al puntero aunque la palabra? Compartir? No es técnicamente un enlace. El segundo trae la opacidad de copia de seguridad para nuestros iconos ocultos. El tercero cambia el color de un icono cuando el usuario se desplaza sobre él.Debido a que nuestros iconos son texto, ¡esto es realmente fácil! Esto hubiera requerido mover un sprite o cambiar la imagen de fondo si hubiéramos usado un enfoque basado en imágenes.
Paso 5 Mover los iconos
Lo siguiente que debemos hacer es mover los íconos en su lugar cuando el usuario se desplace sobre "compartir". Para hacer esto, simplemente usamos el izquierda propiedad para empujarlos sobre.
El verdadero truco es descubrir cómo seleccionar y posicionar cada enlace individualmente. Afortunadamente, CSS3 tiene un selector increíble que funciona perfecto aquí: nth-of-type.
Estos son selectores complicados, así que vamos a desglosarlos. La primera parte le dice al navegador que estamos activando un evento de desplazamiento para "compartir". clase. A continuación, utilice enésima de tipo para apuntar al primer, segundo y tercer ancla, que efectivamente atrapa cada uno de nuestros iconos.
Advertencia de compatibilidad
Una cosa a tener en cuenta, enésima de tipo es un selector de nivel tres, lo que significa que está fuera de suerte para IE8 y anteriores. Podemos hacer una de dos cosas para arreglar esto. Si no le importa un poco de JavaScript, puede usar Selectivizr para agregar esta funcionalidad a IE6.
Si no desea ir a la ruta de JavaScript, su única opción es agregar marcado adicional. En este escenario, cada ancla tiene su propia clase única.
Ahora en tu CSS, tienes un enlace único que te lleva a cada ícono individual con bastante facilidad. Esta solución es definitivamente mucho más desordenada que la ruta Selectivizr, pero la falta de JavaScript es una ventaja.
Paso 6 Añadir más efectos
Por defecto, nuestros iconos se deslizarán hacia la derecha y se desvanecerán. Sin embargo, si queremos que este efecto sea un poco más emocionante, podemos recurrir a las transformaciones de CSS y generar una variedad de resultados diferentes. Aquí hay un montón de diferentes opciones a considerar, todas las cuales se mostrarán en la demostración final.
¡Véalo en acción!
Con eso, todos hemos terminado! Sigue el enlace de abajo para ver la página de demostración, luego desplázate sobre los diferentes menús para ver los frutos de nuestro trabajo.
Manifestación: haga clic aquí
Conclusión
Ahora tiene un excelente menú de animación que puede usar para llamar la atención en su próximo proyecto. ¡Deja un comentario a continuación y hazme saber qué piensas de él y cómo lo mejorarías!