css-sprites

Iconos sociales WP con CSS Sprites

Si bien hay muchos plugins por ahí que puede ayudarte a agregar iconos de redes sociales a tu sitio, no todos son creados iguales. Algunos de ellos podrían ser una carga en el servidor, por no hablar de que algunos no se pueden personalizar.

Por suerte, hay una alternativa que puede ayudar a que tu sitio vaya rápido: sprites CSS.



Por lo general, se añaden imágenes separadas a un sitio para cada enlace de red social. Mientras que esto sería considerado una codificación correcta, significa que por cada llamada a cada imagen, es más largo el tiempo de carga.

Lo guay de sprites CSS es que pueden contener todas las imágenes de los iconos de tus medios sociales al tiempo que el mapeo de todos los enlaces correspondientes a cada imagen se hace adecuadamente. Esto se traduce en un menor número de solicitudes de servidor, ahorrando ancho de banda y cargando las páginas de manera rápida.

En este tutorial veremos cómo utilizar CSS para hacer tus propios iconos de redes sociales totalmente personalizables.

Creando la imagen

El primer paso para la creación de tu propio sprites CSS es crear una imagen con los iconos de redes sociales que deseas utilizar. Debe tener dos capas apiladas una encima de otra, como se muestra en la imagen.

Capa de arriba – Los iconos que serán visibles en la página

Capa inferior – Los iconos que serán visibles cuando el ratón pase por encima.

iconos-sociales

Para este tutorial estamos usando un fondo transparente para la imagen.

No es necesario agregar espacio entre cada imagen, ya que puede ser añadido con CSS más adelante. Como veas.

En este ejemplo, aparecerán de color gris en el sitio los iconos, pero cuando el ratón pasa sobre ella, se mostrarán sus versiones coloreadas.

Una vez que hayas creado tu propio conjunto de iconos de redes sociales, ya estás listo para pasar a la siguiente etapa.

Necesitas saber el ancho y la altura de cada símbolo en píxeles antes de seguir adelante, así que asegúrate de tomar nota de ello.

Añadiendo los enlaces y la imagen a tu sitio

Sube la imagen a tu sitio y copia la ruta de donde se encuentra la imagen para poder usarla en el código después.
A continuación, añade los enlaces a los medios sociales de tu sitio para que estos iconos hagan su trabajo. Puedes hacerlo con HTML.

<div id="social">
<a class="RedSocial" href="https://www.red-social.com/tu-perfil" target="_new" alt="Nombre de la Red Social"></a>
</div>

Esta es la estructura básica que necesitarás para tus enlaces. Sustituye el nombre real del sitio que quieres vincular sustituyendo las instancias de RedSocial y nombre de los medios sociales del sitio en el ejemplo anterior. También asegúrate de reemplazar la URL también.

Repite la línea dos en el código anterior para cada icono en la línea superior de la imagen que hayas creado, en sustitución del texto de relleno en el camino. También puede optar por cambiar el nombre de la div id a algo más adecuado a tus necesidades.

El mejor lugar para poner este código es directamente en los archivos de tu tema en los que quieras que aparezcan los iconos. Por ejemplo, puedes añadir los enlaces a los archivos sidebar.php, footer.php, header.php o una plantilla de página.

Cuando hayas terminado, no verás ninguna diferencia en tu sitio, pero eso está bien porque vamos a añadir las imágenes a continuación.

Hemos añadido títulos en los enlaces para indicarte dónde se verían estos.

css-sprite-sin

Añadir tus iconos y Estilos

Es el momento de añadir tus iconos con CSS. Puedes añadir el código en el archivo style.css de tu tema o a través de un plugin.

Aquí está el código que necesitas añadir:

#social a {
height:#px;
display:block;
position:relative;
margin:#px;
padding:#px;
top:#px;
}
#social a. RedSocialUno {
left:0px;
width:#px;
float:left;
background:url('URL-de-tu-image') 0 0;
}
#social a. RedSocialDos {
left:#px;
width:#px;
float:left;
background:url('URL-de-tu-imagen') -#px 0;
}

Reemplaza las clases con las tuyas propias, junto con la ubicación de la imagen. Los hastags o almohadillas(#) se pueden sustituir con los valores correctos basados en tu archivo, pero no cambies los ceros – se necesitan para que los iconos se muestren correctamente.

También puedes copiar y pegar la clase RedSocialDos para cada icono de los medios sociales adicionales que quieras añadir. También puedes cambiar la posición, el margen, el relleno y la parte superior para satisfacer tus necesidades de estilo específicas.

He aquí un desglose de este ejemplo CSS:

#social a. {height: #px;} – Sustituir el hashtag con la altura de cada icono y no la altura total de la imagen.

#social a. RedSocialUno {left: 0px;} – Aquí es donde tu primer símbolo comienza, en el extremo izquierdo de la imagen.

#social a. RedSocialUno {width: #px;} – Esta es la anchura de tu primer icono de redes sociales. Este número también debe ser el mismo para todos tus otros iconos.

#social a. RedSocialUno {background: url (‘tu-imagen.png’) 0 0;} – La imagen se llama y la posición se establece en cero píxeles tanto para la parte superior como para la posicion izquierda.

#social a. RedSocialDos {left: #px;} – Reemplaza el hashtag con el valor del píxel de la posición en la que el segundo icono comienza en la imagen. Si tu primer icono es 50px de ancho, entonces este valor sería 51px.

#social a. RedSocialDos {background: url (‘tu-imagen.png’) – # px 0;} – Sustituir el hashtag con el número de píxeles en el segundo símbolo comienza a contar desde el extremo izquierdo de la imagen.

Si has incluido espacio entre los iconos de la imagen que has creado, los selectores de izquierda y fondo de posición serán los mismos. Si no agregas separación inicialmente, los selectores de izquierda deben ser más grandes que los selectores background-position desde que tendrás que tener en cuenta el espacio adicional que desees agregar en píxeles.

También puedes agregar las imágenes que se mostrarán cuando el ratón pase por encima. Puedes añadir el siguiente código:

#social a:hover. RedSocialUno {
background:url('URL-de-tu-imagen') 0 -#px;
}
#social a:hover. RedSocialDos {
background:url('URL-de-tu-imagen') -#px -#px;
}

Reemplaza los hashtags con el valor correcto al igual que hemos hecho en el ejemplo anterior. El primer valor es el número de píxeles desde la izquierda y el segundo número desde la parte superior.

Una vez que hayas terminado, guarda el archivo y verás los resultados.

css-sprites

Fuente: WPMudev

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *