CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Technique des Sprites CSS pour Liens de Réseaux Sociaux

Technique des Sprites CSS pour Liens de Réseaux Sociaux

Les sprites
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Insertion de Liens de Réseaux Sociaux avec des Sprites CSS

Objectifs

Les objectifs de cette vidéo sont d'apprendre à utiliser les sprites CSS, à améliorer l'affichage des liens de réseaux sociaux et à optimiser le chargement des images pour une meilleure performance web.

Résumé

Apprenez à utiliser la technique des sprites CSS pour optimiser l'affichage des icônes de réseaux sociaux sur vos sites web.

Description

Dans cette leçon, nous explorons une méthode de création et de gestion de liens de réseaux sociaux à l'aide de sprites CSS. Bien que cette technique ne soit plus très couramment utilisée, elle peut s'avérer extrêmement utile dans certaines situations, notamment lorsque les icônes stylisées dont vous avez besoin ne sont pas disponibles en police d'icônes. Nous allons voir comment créer une seule image regroupant toutes les icônes à différents états (normal et survol), et comment utiliser les background-position pour afficher les différentes icônes de manière efficace. Nous aborderons également des astuces pour améliorer l'accessibilité et optimiser les performances de votre site web.

Ce tutoriel inclut des exemples pratiques de code CSS, des conseils pour préparer correctement vos images dans Photoshop, et des techniques pour supprimer le texte des liens sans nuire à l'indexation par les moteurs de recherche.

Voir plus

Questions - réponses

Pourquoi utiliser des sprites CSS au lieu d'images séparées pour chaque lien de réseau social?
Les sprites CSS permettent de réduire le nombre de requêtes HTTP, améliorant ainsi les performances de chargement de la page.
Qu'est-ce que la propriété 'background-position' en CSS?
La propriété 'background-position' en CSS permet de positionner une image en arrière-plan, idéale pour afficher différentes parties d'une image sprite.
Comment cacher le texte des liens sans nuire à l'indexation par Google?
Utiliser la propriété 'overflow: hidden' sur le parent du lien pour cacher le texte tout en le rendant toujours accessible pour l'indexation.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 4 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !