Cookie

Attention


Cet article a été publié il y a plus d'un an, il peut y avoir des développements été.
S'il vous plaît prendre en compte.

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 est d'inclure la plupart des éléments de navigation sur la page dans 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 plus 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 constamment appelé dans la page de recherche, 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 nous laisser JavaScript maintenant 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 aidera à créer la’effet de survol Passez avec une image. La taille de l'image totale 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.

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

Ce sera la ligne HTML qui affichera le bouton dans la page. Notez la’attribuer ID” dont le style sera alors modifié en utilisant l' CSS. Et’ facile à remarquer 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;
}

Eye pour dessiner l'image de droite. Je l'ai mis dans le répertoire “img“. Le bouton est très grand, comment il est facile de noter 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 obtenir un aperçu de l'opération Qui clicca.

Pas assez?


TheJoe

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.

2 commentaires

TheJoe · 26 Décembre 2010 à 4:18 PM

Wow, merci pour le commentaire Luke technique. J'ai déjà pris des mesures pour changer le titre. 😉

Luke Canducci · 26 Décembre 2010 à 1:26 PM

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

Votre adresse email ne sera pas publiée. les champs requis sont indiqués *

Ce site utilise Akismet pour réduire le spam. Découvrez comment vos données de commentaire est traité.