Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LES SPRITES D’IMAGES EN CSS

Définition des sprites et utilisation

Un sprite d’images correspond à une collection d’images rassemblées en une seule grande image.

L’idée derrière l’utilisation de sprites est de réduire le nombre de requêtes serveur.

En effet, en cas d’images séparées, une requête va être envoyée au serveur pour récupérer chaque image présente dans une page web pour les afficher. Dans le cas d’une page contenant de nombreuses images, cela peut diminuer sensiblement la vitesse d’affichage de la page.

En utilisant des sprites, une seule requête sera envoyée au serveur et cela optimisera les performances de votre site.

Exemple d’utilisation de sprites CSS

Imaginions que nous voulions afficher des liens ramenant vers nos pages sociales sur notre site. Pour cela, nous allons utiliser les logos des différents réseaux sociaux en tant que liens.

Plutôt que d’enregistrer les logos des réseaux sociaux qui nous intéressent séparément, on va tous les enregistrer côte-à-côte, sur la même image, comme ceci :

Les sprites CSS

On place ensuite notre image dans le même dossier que nos fichiers HTML et CSS.

Ensuite, nous allons simplement créer nos liens en HTML et leur appliquer la propriété background afin d’y ajouter notre image cliquable.

L’idée va alors être de ne récupérer que le logo qui nous intéresse dans notre sprite d’image pour chaque lien et nous allons évidemment faire cela en CSS.

Commencez donc par vous munir d’une image contenant différents logos de réseaux sociaux, puis renommez la « logos-sociaux.png » par exemple afin que nous travaillions tous avec les mêmes bases.

Ensuite, nous allons créer nos liens en HTML en donnant un id à chaque lien afin de pouvoir ensuite le cibler précisément en CSS.

Pour notre exemple, nous n’allons créer des liens que vers les réseaux sociaux Facebook, Twitter et LinkedIn.

Création de liens en HTML pour utilisation de sprites CSS

Finalement, nous allons utiliser le CSS pour mettre seulement le bon « bout » d’image en fond de chaque lien.

Pour cela, la solution la plus simple va être de déclarer nos liens comme des éléments block afin de pouvoir leur donner une taille en pixels puis de positionner l’image de fond.

Utilisation des sprites CSS

Ici, je sais que mes petits logos ont une taille d’environ 50*50 pixels. Je donne donc la même taille à tous mes liens afin de ne récupérer qu’un bout de 50*50 pixels de notre sprite CSS à chaque fois.

J’utilise également un positionnement absolu pour pouvoir par la suite séparer les images de fond les unes des autres.

Ensuite, nous utilisons la propriété background pour insérer notre image de fond et précisons deux coordonnées qui vont correspondre au déplacement de l’image, c’est-à-dire à partir d’où elle va commencer à s'afficher.

Par exemple, pour afficher le logo de Twitter, je sais qu’il faut se déplacer de 50px vers la droite sur notre image, ou encore faire bouger notre image de 50px vers la gauche pour la faire « démarrer » à 50px de son bord gauche. J’utilise donc la valeur -50px qui va me faire commencer à 50px du début « théorique » de mon image.

La deuxième valeur correspond au déplacement vertical. Notre logo Twitter est sur la première ligne, donc à 0px du haut de notre image. Je précise donc 0px. Pour le logo LinkedIn, en revanche, je précise -50px pour décaler mon image de 50px vers le haut et donc commencer 50px plus bas.

Au final, voici le résultat :

Liens images créés avec un sprite CSS

Chapitre précédent

Chapitre suivant