Cookie

TheJoe.it Dans le (ouvrir) Source

24Dec/102

Sprites CSS: le roulement avec une seule image en utilisant le CSS

contattaci_shoot

Parlons CSS. Aujourd'hui, nous voyons une technique a toujours été recommandée pour alléger pages et des temps de chargement plus rapides (pas pour rien a pendant des années été utilisé sur la page d'accueil Google).

En bref, il consiste à inclure la plupart des éléments de la navigation de la page à l'intérieur un fichier image unique, puis rappeler plusieurs fois combien cela va inciter la page évitant ainsi télécharger des images multiples différent.

Bien que techniquement l'intervalle de temps est très faible (nous sommes dans le domaine de la cents, est le nom millièmes deuxième) la différence est considérée, et aussi du point de vue esthétique comme images chargées tout à coup une impression de grande vitesse.

On voit par exemple l'image que Google utilise dans ses recherches:

L'immagine usata da Google

L'image utilisée par Google

Quelqu'un a déjà reconnu certaines éléments rappelle constamment de la recherche dans la page, comme le logo, le "Le" répété en bas de page, flèches de direction indiquant la page précédente et suivante, le favicon, le fixe pour l'évaluation des résultats, et je vais m'arrêter là.

Pour inclure l'image dans la page Google utilise en partie Javascript et d'autre part i CSS. Je ne m'étendrai pas sur les principes de ce choix, Autant dire que le nombre de demandes chaque jour, Google doit faire face à est tellement large que même une légère optimisation de la page correspond à des économies substantielles (économiquement et écologique) Google lui-même et pour nous tous.

Laissant de côté pour aujourd'hui Javascript pour analyser les étapes parce que l'effet est retourné utilisant uniquement HTML et CSS. Commençons par quelque chose de simple: le bouton à côté est formé à partir de deux images. Les étapes que nous verrons seront utilisés pour créer le 'effet de survol Passez avec une image. La taille totale de l'image 343 pixel di larghezza x 212 pixel hauteur: est très grand pour un bouton, mais ce n'est qu'un exemple.

Nous commençons à voir comment Format HTML lance l '.

<un id ="contactez-nous" href ="#" title ="contactez-nous"><durée>Contactez</durée></une>

Ce sera la ligne qui va afficher le bouton HTML dans la page. Notez le 'attribuer "ID" dont le style sera alors modifié en utilisant l' CSS. E est facile de constater que la ligne ci-dessus fait ne contient pas de liens à l'image, est tout simplement ONU lien testuale: "Contactez".

Et maintenant, nous allons voir comment définir le CSS de transformer notre lien dans une Bouton avec effet de survol Souris:

#contactez-nous{
  afficher: bloquer;
  largeur: 343px;
  hauteur: 106px;
  fond: url("img / bottone.png") no-repeat 0 0;
}

#contactez-nous:planer{
  background-position: 0 -106px;
}

#Contactez durée{
  afficher: aucun;
}

Oeil pour dessiner l'image correcte. J'ai mis dans le répertoire "img". Le bouton est très grand, il est facile de voir la largeur est la première Image (width: 343px;), pendant que la hauteur est exactement la moitié (height: 106px;). Dans le cas où la souris ne passe pas sur le bouton sera affiché la moitié supérieure Bouton (et reçoit 106 pixel), tandis que si nous voyons la seconde règle la voix "background-position" nous pouvons voir une valeur négative "-106px". Cette règle de placer le bouton en haut 106px, en fait nous faire voir seulement la seconde moitié de l'image dans la même position où il était avant l'.

La troisième règle est simplement masquer le texte "Contactez".

Pour avoir un aperçu de l'opération Qui clicca.

Content de cet article?

Inscrivez vous à notre fil rss!

Sur

Je garde ce blog comme un hobby par 2009. Je suis passionné de graphisme, la technologie, logiciel Open Source. Parmi mes articles ne sera pas difficile de trouver de la musique, et quelques réflexions personnelles, mais je préfère la ligne directe du blog principalement à la technologie. Pour plus d'informations me contacter.

Commentaires (2) Trackbacks (0)
  1. Wow, merci pour le commentaire Luke technique. J'ai déjà pris des mesures pour changer le titre. 😉

  2. Pour être complet, quand il s'agit de cette technique est parlé plus fréquemment que “Sprites CSS”, le roulement est le résultat pratique que l'on obtient (Cela étant complètement CSS ne génère pas de problèmes de compatibilité sur les différents navigateurs ou avec ceux qui ont javascript qui est désactivé).

    BTW, nice one 😉


Laisser un commentaire

Aucun trackbacks pour l'instant