EntradaCódigo de iconos sociales. Sprites CSS en el ejemplo de instalación de botones-enlaces en el blog "suscripción a actualizaciones
- el cambio de tamaño no afecta la calidad,
- se muestra perfectamente en todos los dispositivos, incluidos aquellos con pantallas Retina,
- Aplicación de casi cualquier estilo aplicable al texto, como fondo, color, sombras, etc.
- facilidad de implementación;
Para su atención fuentes con iconos de redes sociales.
1. FUENTE DE ICONOS SOCIALES DE RONDO
Excelentes íconos tipográficos de algunas de las redes sociales más populares y no solo, sino que lamentablemente no existe ningún ícono nuestro, el favorito de todos.2. Fontello - generador de fuentes de iconos
Generador de iconos con un gran conjunto de iconos prefabricados. Una de las ventajas es la capacidad de seleccionar solo los iconos necesarios y generar una fuente a partir de ellos, lo que afectará favorablemente la optimización de la página y la velocidad de carga de dicha fuente. Entre las ventajas, también se puede destacar la presencia de iconos de redes sociales como Vkontakte y Odnoklassniki.
3. Fuente Mono Social Icons
Una solución ideal para integrar rápidamente iconos de fuentes en un proyecto, ya existe un código de incrustación para CSS, SCSS y HTML de ejemplo. El único inconveniente es la falta de redes sociales rusas populares.
4. Pixeden - Paquete de iconos sociales
Bonitos iconos con una poderosa página de demostración, puedes ver la belleza de usar iconos de fuentes y diseñarlos con CSS
29 de octubre de 2019 La entrada ha sido actualizada
Yuri Nemets
Efectos de botón de redes sociales para sitio web
¿Crees que es posible combinar botones e imágenes de redes sociales? Para que ambos se vean muy hermosos y creativos. Sí, puedes hacerlo de una forma muy interesante. Y ni uno solo, sino varios. Para ser más precisos, en este artículo encontrarás 12 formas de crear efectos geniales para los botones de redes sociales cuando pasas el cursor sobre una imagen. En algunos casos, no solo necesita desplazarse, sino también hacer clic con el mouse, lo que también agrega interactividad. Una forma inusual de hacer que su sitio se destaque con estos efectos de desplazamiento.
Vea los 12 ejemplos y descárguelos desde el siguiente enlace:
Descargar
Por cierto, con respecto a los efectos de desplazamiento, hay un par de artículos más en el sitio sobre este tema:
Me gusta el efecto, ¡utilícelo!
Por ejemplo, me gustó el primer efecto. Coloca el cursor sobre la imagen de abajo para ver el efecto.
(coloca el cursor sobre la imagen)
Una forma bastante atractiva de resaltar las imágenes más importantes tanto en el sitio como en un sitio de venta de una página. Pero, como ya escribí, hay muchos más efectos (¡12!).
Paso 1: HTML
Para los íconos que ves en los botones de redes sociales, se usa FA (Font Awesome). Estos iconos están conectados en una línea entre bloques. :
| 1 | <link rel = "hoja de estilo" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
Una vez que haya descargado todas las fuentes, debe elegir el efecto que desee. Mi efecto está en el archivo index.html... Este archivo contiene todos los estilos necesarios para crear un efecto de desplazamiento.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class = "imagen-efecto-respaldo"> <div class = "capa compartida"> <a href = "#" class = "compartir-botón compartir-vía-vk"> <i clase = "fa fa-vk"> En contacto con</ a> <a href = "#" class = "botón de compartir compartir a través de facebook"> <i class = "fa fa-facebook"> Facebook</ a> <a href = "#" class = "botón de compartir compartir-via-twitter"> <i class = "fa fa-twitter"> Gorjeo</ a> </ div> <div class = "capa de imagen"> <img src = "images / tree.jpg" width = "500" alt = "(! LANG: surf de California" > !} </ div> </ div> |
Toda la estructura necesaria está ahí. Todo lo que queda es configurar los estilos en CSS. Por tanto, pasamos al 2º y, al mismo tiempo, al último paso.
Paso 2 - CSS
Los estilos están en cada archivo HTML entre bloques ... Es decir, en cada archivo con efectos diferentes, en este bloque en la parte superior del documento hay estilos correspondientes.
Debe tomar estos estilos y colocarlos en su hoja de estilo:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | .image-effect-fall-back (ancho: 500px; alto: 300px; posición: relativa; margen: 0 automático; -webkit-perspectiva: 800px; perspectiva: 800px;) .image-effect-fall-back .image-layer (posición: absoluta; arriba: 0; izquierda: 0; altura: 300px; -webkit-transición: 0.6s; transición: 0.6s; índice z: 1;) .image-effect-fall-back: hover .image- layer (-webkit-transform: rotateX (70deg); transform: rotateX (70deg); overflow: visible;) .image-effect-fall-back .image-layer img (altura: 100%;) .image-effect-fall -back .image-layer: before (content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba (0, 0, 0, 0.5); box -sombra: 0 0 100px 50px rgba (0, 0, 0, 0.5); opacidad: 0; -webkit-transición: todos los 0.5s; transición: todos los 0.5s; -webkit-transform: rotateX (114deg) translateZ (-26px ) escala translateY (110px) (0,75 ); transformar: rotateX (114deg) translateZ (-26px) translateY (110px) scale (0,75); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; ) .image-effect-fall-back: hover .image-layer: before (opacity: 0.3;) .image-effect-fall-back .share-layer (position: absolute; bottom: 100px; left: 0; width: 100%; altura: 100px; opacidad: 0; índice z: 10; -webkit-transición: 0.6s; transición: 0.6s; -webkit-transform: rotateX (70deg); transform: rotateX (70deg);) .image -efecto-retroceso: hover .share-layer (opacidad: 1; -webkit-transform: rotateX (0deg) translateY (-70px); transform: rotateX (0deg) translateY (-70px);) / * estilos para todos los botones * /.botón para compartir (pantalla: bloque en línea; decoración de texto: ninguna; color: #ffffff; relleno: 12px; ancho: 90px; radio del borde: 2px; margen: 25px 10px;) / * color de los botones de redes sociales * /.share-via-vk (color de fondo: # 4C75A3;) .share-via-facebook (color de fondo: # 3b5998;) .share-via-twitter (color de fondo: # 00aced;) |
Te lo advierto de inmediato: algunos ejemplos usan jQuery, porque allí, para obtener el efecto completo, debes hacer clic en la imagen. Solo necesita tomar todo el código JS que se usa en la página con el ejemplo que desee.
¡Atención! Después de pegar el código CSS en su hoja de estilo, es posible que los botones no se muestren exactamente como se muestra en el ejemplo. Esto puede deberse al hecho de que su hoja de estilo tiene diferentes estilos para los elementos y clases que se utilizan en la demostración.
Producción
Por regla general, la creatividad siempre ha sido bienvenida. Creo que aquí todos podrán elegir uno de los 12 efectos por sí mismos y usarlos en el futuro en sus propios proyectos.
Desenterré algo bueno. Iconos de interfaz encerrados en un solo objeto. Si alguien no sabe qué es un sprite, esta es una imagen en la que hay varias imágenes que se muestran en el sitio por separado usando css. No sé si lo expliqué claramente, pero puedes averiguar qué es un sprite usando este ensamblaje como ejemplo.
Beneficios de los sprites
No he publicado íconos durante mucho tiempo, probablemente porque todos los íconos que necesitaba ya estaban en mi sitio :)) pero necesitaba íconos en un sprite y los encontré y los compartí con ustedes. Por cierto, la característica distintiva y la ventaja más significativa del sprite es que si la imagen del sprite se carga una vez, todos los elementos de este sprite ya no se cargarán y, en consecuencia, reducirá la velocidad de la página html. Normalmente, los sprites se utilizan para botones que cambian al pasar el mouse. A veces sucede que el botón en su estado normal y el botón al pasar el mouse son dos imágenes diferentes, y es posible que haya notado que en algunos sitios, cuando pasa el mouse sobre el botón, la imagen no aparece de inmediato, se carga. Con un sprite, esto no será un problema. Otra ventaja de los sprites es que ahorra espacio. Digamos que tiene algún tipo de complemento, como un control deslizante, y varias docenas de imágenes van a él (las esquinas de los marcos, los marcos mismos, flechas, viñetas, íconos de redes sociales, etc.). Entonces, cuando todos están encerrados en una imagen, se ve mucho más conveniente y ordenado si estuvieran en una carpeta con imágenes por separado.
Qué se muestra en estos iconos
Como de costumbre, te diré qué imágenes hay entre estos iconos para que encuentres los iconos necesarios para la búsqueda, que tengo en el menú principal en la parte superior del sitio: castillo, robot, diamante o piedra preciosa, monitor, regalo, micrófono, cohete, helado, hombre, reloj, tijeras, iconos de todo tipo de redes sociales y servicios, llaves, arco, billetera, ipad, sandía, billetera, joystick de juego, calculadora, payaso, bombilla, arco, basura lata o canasta, carta, globo terráqueo, hamburguesa, auto, nube, cámara y mucho más. Hay alrededor de 100 imágenes en total.
Conectar estos iconos es muy sencillo:
1. Conectamos el archivo css sprite.css de esta manera: cree una carpeta css en la raíz de su sitio, agregue este archivo css allí, y en la página donde se mostrarán los iconos entre las etiquetas
inserte el siguiente código:
3. En el lugar donde desea colocar el icono, pegue el código:
4. Puedes usar mi demo, hay todos los íconos presentados y usando el visor de Google Chrome del elemento, define el nombre del ícono e inserta en lugar del "nombre del ícono". Digamos que el icono del reloj tiene el siguiente código:
Bueno, creo que no es difícil descubrir cómo insertar estos íconos desde un sprite, especialmente porque ya lo he explicado todo :)) ¡Disfrútalo!
Hola queridos lectores del sitio del blog. Por supuesto, puede utilizar el complemento para esta tarea, pero no es tan dificil hacerlo tu mismo, y habrá menos, especialmente porque ya tengo muchos de ellos trabajando para ellos (vea el artículo en el enlace proporcionado). Tomé los íconos de las redes sociales de los que ya escribí con cierto detalle (espero que Dimoks no se oponga a esto).
Y también lo consideré apropiado para el correo electrónico.
Crea un objeto a partir de botones e inserta el código Html en el sitio.
Después de haber creado todos los grupos y páginas necesarios en las redes sociales, lo que significa que ha recibido todos los enlaces necesarios, puede desconcertarse si agrega botones al sitio. Por supuesto, puede, de acuerdo con mi publicación sobre, elegir un icono adecuado para cada red social y, si es necesario, reducir su tamaño al requerido en y.
Pero esta no es la mejor opción. ¿Por qué? Pues porque para subir cada imagen de la red social, se hará una solicitud por separado a su servidor. Si tiene una docena de iconos, significa diez solicitudes, que de alguna manera crearán una carga adicional en el servidor y. Tal desperdicio no nos conviene, especialmente desde que lo ha sido durante mucho tiempo.
Decidí no reinventar la rueda (crear un sprite), pero usé la creada por el constructor Share42 (un enlace a una descripción de cómo trabajar con ella se da justo arriba). En él, puedes seleccionar aquellas redes sociales, cuyos íconos necesitarás, y junto con el código recibirás un sprite CSS, es decir físicamente un archivo gráfico, que contendrá todos los íconos de redes sociales que necesita y suscripciones a fuentes RSS (y correo electrónico, si es necesario).
Elegí cuatro redes principales y un par de íconos para suscribirme a noticias con un tamaño de ícono de 24 por 24, por lo que mi sprite se ve así (aunque todavía llegué allí, pero no importa):
Ahora tenemos todos los ingredientes: enlaces a grupos o páginas de redes sociales e íconos para mostrarlos en el sitio. Solo queda preparar todo esto correctamente, es decir. diseño. Mi blog funciona con WordPress, así que pegaré el código del botón en uno de los archivos. En mi caso, se llama sidebar.php. Código HTML resulta extremadamente simple:
Bueno, y lo más interesante. Con la ayuda, determinamos qué área de nuestro sprite se mostrará en este lugar específico como fondo (en nuestro caso, este fondo se coloca debajo del hipervínculo). Se necesita mucho tiempo para explicar cómo sucede esto, así que lea el artículo en el enlace y todo se aclarará (se dan ejemplos ilustrativos). Si eres perezoso, simplemente experimenta con los números, que, como habrás notado, no son por nada múltiplos de 24.
Sí, cargue el archivo de sprite en su sitio usando FTP y especifique la ruta en segundo plano (). Eso es todo. Si no funciona que lea atentamente los materiales en los enlaces anteriores, bueno, si no sucede nada, describa su situación en los comentarios (en detalle: para insertar el código, olvídese de incluirlo en etiquetas PHP con cuadrado soportes).
¡Buena suerte para ti! Nos vemos pronto en las páginas del sitio del blog.
Te puede interesar
A medida que continuamos socializando nuestros sitios, a menudo es conveniente que los lectores reciban actualizaciones del blog directamente en su red social favorita. Démosles esa oportunidad. Para ello, es necesario registrarse en estas mismas redes sociales. Puede crear un perfil de la administración o el autor del sitio, o puede crear una página pública para una empresa o proyecto. En el futuro, será necesario publicar regularmente noticias y actualizaciones del sitio en las fuentes de noticias del perfil para que sus suscriptores puedan familiarizarse con ellas. Esto, por cierto, es conveniente usar los que instalamos anteriormente. Diseñaremos enlaces a perfiles sociales usando CSS sprite o CSS sprites.
¿Qué son los sprites CSS y los sprites en general?
Sprites- un conjunto de imágenes pequeñas que se combinan en una. Esto se hace para no descargar de 10 a 20 imágenes pequeñas y livianas desde el servidor a la computadora del usuario, sino para enviarlas en una secuencia, combinándolas en un solo archivo. Los sprites llegaron al diseño web desde la industria del juego, donde se usaron para crear gráficos animados en 2D, por ejemplo, disparar monstruos, etc.
En el diseño de sitios, también se utiliza una técnica en la que varios iconos se combinan en un archivo, por ejemplo, como este:
Como puede ver en este ejemplo, no solo se recopilaron íconos de redes sociales en un archivo, sino también otros elementos de diseño, como flechas, botones "Me gusta", etc. Pero combinar absolutamente todos los gráficos que se utilizan en el sitio en un solo objeto no es del todo correcto. Es mejor dividir los elementos en grupos y cargar solo los necesarios en un cierto tipo de páginas.
En esta imagen, traté de mostrar esquemáticamente cómo funcionan los sprites CSS. Si el bloque es más grande que la imagen de fondo, entonces se coloca en la esquina superior izquierda de forma predeterminada, si no se establece la repetición en los estilos CSS. Pero podemos cambiar la posición de la imagen de fondo en relación con la esquina superior izquierda del bloque. Esto es especialmente útil si el bloque, por ejemplo, tiene el mismo tamaño que un solo icono. Tenemos siete iconos, de 32x32 cada uno. Están ubicados horizontalmente, por lo que no necesitamos cambiar la posición del fondo verticalmente. Establecemos la posición de la imagen de fondo -32 px, obtenemos un ícono en el bloque, -64 px - un ícono de Facebook, etc.
¿Cómo crear botones de enlace para perfiles de redes sociales?
Después de registrarme en las respectivas comunidades y en, recibí enlaces a perfiles, la dirección de mi feed RSS y un enlace a un formulario de suscripción para recibir actualizaciones por correo. Luego los combiné en el siguiente código y lo pegué en un widget de texto en el panel de administración de WordPress:
El ancla de enlace en este código usa la etiqueta : ... Es él quien es el bloque mismo en el que se muestra el icono deseado. El cambio de la imagen de fondo se establece en el archivo de estilo. style.css a través de la propiedad posición de fondo:
/ * Botones para suscribirse a actualizaciones * / .spmenu (padding: 0px; margin: 0px; color: # 4682B4; text-align: left; font-size: 100%;) .spmenu a, .spmenu a: hover (cursor : pointer; color: # 1E90FF; text-decoration: none; font-size: 100%;) .spmenu span (display: inline-block; width: 32px; height: 32px; background: url ("images / icons.png ") sin repetición;) .spmenu span.sprite_gplus (posición de fondo: 0px 0px;) .spmenu span.sprite_twitter (posición de fondo: -32px 0px;) .spmenu span.sprite_fbook (posición de fondo: -64px 0px; ) .spmenu span.sprite_rss (posición de fondo: -96px 0px;) .spmenu span.sprite_email (posición de fondo: -128px 0px;)
Por lo tanto, para cada elemento dentro de la clase " spmenu»Se establece la imagen de fondo icons.png que es un conjunto de iconos. Tenga en cuenta que es un elemento en línea en línea de acuerdo con la especificación HTML, por lo que para darle dimensiones estrictas (ancho y alto), debemos cambiar la forma en que se muestra a nivel de bloque en las propiedades de CSS (línea: pantalla: bloque en línea;). El tamaño del bloque de 32x32 coincide con el formato de nuestros iconos.
A menudo en lugar de
usar etiquetas
,
,
etc., creo que este enfoque es incorrecto. ¿Por qué cambiar los estilos de las etiquetas estándar cuando hay una universal?
... Y la etiqueta
generalmente crea una solicitud adicional al servidor, y solo estamos usando sprites, tratando de reducir la cantidad de estas solicitudes.
¿Dónde puedo conseguir los iconos del sprite?
- Dibuja tú mismo.
- Busque el motor de búsqueda entre las imágenes.
- Hay colecciones especiales de iconos en la web que a menudo se regalan de forma gratuita.
- Muchas redes sociales y servicios muestran logotipos e íconos oficiales en sus sitios web que se pueden utilizar en sus aplicaciones.
- Para crear un archivo de sprite de íconos de redes sociales automáticamente, puede usar el servicio. Seleccione los iconos en el orden deseado, guarde el archivo con el script, descomprima y vea la imagen icons.png- archivo de sprite listo.
Además de mostrar iconos, los sprites son útiles para desarrollar un menú animado, cuando, cuando pasas el cursor sobre su elemento, se atenúa o se ilumina. Luego, dos conjuntos de botones se almacenan en el archivo de sprite, y en el evento "mouse over" cambian dinámicamente la posición de la imagen de fondo usando JS.
El menú de botones-enlaces a los canales para recibir actualizaciones, que se prometió al principio de la nota, está listo, este es el final del artículo. Suscríbete para recibir actualizaciones, la diversión apenas comienza.