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.

Dans le tutoriel d'aujourd'hui nous reparle HTML graphiques et Intégration CSS. Dans mon article Il ya quelques mois, j'ai parlé de la technique (également largement utilisé par les Google) de Sprites CSS. Dans la pratique, consiste à insérer la majorité des images répétées plusieurs fois à l'intérieur de la page en une seule grande image, qui sera appelée plusieurs fois avec notre CSS.

Comme une question de préférence personnelle, j'ai tendance à éviter d'utiliser Gimp chaque fois que je dois créer un menu différent navigation de l'article, Je préfère créer que les origines de boutons, puis réfléchir sur les styles en utilisant CSS. De cette façon, le premier menu est mieux indexé par les moteurs de recherche, d'autre part, j'évite “déchets” le temps de me créer à chaque bouton une nouvelle image.

Que de sprites CSS est une technique bien établie, qui non seulement accélère chargement de la page, mais augmente la compatibilité sur les différents navigateurs.

Aujourd'hui, nous voyons comment créer un simple, Aussi attrayante le menu de navigation avec cette technique. Ce qui suit est le résultat.

Nous commençons par créer l' “squelette” de notre menu dans une page HTML.

<html>
  <tête>
  <lien href ="style.css" rel ="stylesheet" type ="text / css" />
  </tête>
  <corps>
    <div>
    <a href ="#" class ="bouton">Infos</une>
    <a href ="#" class ="bouton">Qui sommes-nous</une>
    <a href ="#" class ="bouton">Contactez-nous ...</une>
    </div>
  </corps>
</html>

Comme vous pouvez le voir J'ai déjà appelé un fichier CSS appelé externe “style.css“.

Maintenant, nous pouvons créer l'arrière-plan pour notre touche. Ce qui suit (qui en lato) c'est ce que j'ai adopté, le plus grand 550%. Les dimensions réelles sont 2px di larghezza x 56px hauteur. Même s'il n'est pas facile de remarquer qu'il s'agit d'un fichier verticalement divisée en deux; le supérieur sera celui normalement visible, le plus bas sera chargé sur mouseover. Pour les deux demi j'ai utilisé un dégradé de couleurs différentes, mais nous voyons mieux maintenant.

Une fois créé notre “sprite” nous l'appellerons dans la CSS.

a.button {
	flotter: à gauche;
	hauteur:20px;
	rembourrage: 5px 10px;
	frontière: 1px solid # c96111;
	fond: #e2721b url(images / button_sprites.png) repeat-x 0 0;	
	text-decoration: aucun;
	font-size: 15px;
	font-weight: audacieux;
	font-family:«Hoefler Text ',Constantia,Cambria,Géorgie,serif;
	line-height: 20px;	
	couleur: #fff;	
}
a.button:planer {
	frontière: 1px solid # 2f4c13;
	fond: #4url a781d(images / button_sprites.png) repeat-x 0 -30px;
}

Les lignes que nous nous intéressons à l' #6 e la #16: le voci “fond”. Comme vous pouvez le voir le fichier image est appelée une seule: “button_sprites.png” avec des coordonnées différentes. J'ai mis la répétition dans le sens horizontal et un fond dans les deux cas.

Le reste de l'instruction ne fait rien, mais ajouter une bordure d'un pixel sombre selon que la souris est sur le bouton ou ailleurs. J'ai également définir la taille des caractères et spécifique.

Le résultat est simple mais attrayant, avec une touche de brillant.

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.

4 commentaires

Apache 72 · 13 Août 2012 à 10:11 UN M

Je voulais faire pour accélérer un peu’ le site, les photos ne sont pas si nombreux qu'il n'y paraît, le problème est que je n'ai pas de section avec id "container" les.
alors avant de vous croiserez vous vous demandez si vous pouvez le faire de toute façon
remerciements!

    TheJoe · 13 Août 2012 à 10:58 UN M

    Pour être en mesure de le faire vous pouvez faire, mais si vous ne savez pas ce qu'est un “Identifiant” c'est peut-être mieux qu'avant vous pratiquez un peu ". 😉

    Cependant, vous devriez garder un oeil sur ce blog, probablement dans le prochain article, je vais publier un court tutoriel qui va certainement affecter.

Apache 72 · 13 Août 2012 à 7:57 UN M

J'ai utilisé générateur css et a obtenu les codes pour une seule image CSS Spriter.
Comment puis-je maintenant mettre cela sur le site?
J'ai téléchargé la nouvelle image obtenue par Spriter en css …/miotema / images, où il existe également d'autres.
maintenant dans la feuille de style css générateur me dit d'entrer

#récipient li { fond: url(CSG-50289151dcb6a.png) no-repeat haut à gauche; }

et des règles CSS pour les images.

la question est:
dans ma feuille css, il ya plusieurs sections qui traitent de diverses images d'arrière-plan (J'ai assemblé), sur des lignes séparées et non pas dans une richicamo , alors comment dois-je faire?

    TheJoe · 13 Août 2012 à 8:44 UN M

    Je vois que le thème du site (si c'est le site que vous avez accédé) est très complexe, peut être long et frustrant d'improviser concepteur avec une question aussi compliquée. Ceci étant dit,, si vous voulez vraiment essayer votre main, nous allons mettre en pratique.

    Je n'aime pas les solutions telles que des générateurs automatiques, Toutefois, les règles de l'inclusion d'un sprite sont toujours les mêmes.

    0_ (optionnel) créer une copie de sauvegarde avant de commencer. Il pourrait vous sauver la vie,
    1_ Télécharger les images dans le répertoire de… précisément des images,
    2_ Téléchargez la nouvelle css dans le répertoire racine de l'… précisément le css,
    3_ Vérifiez que le CSS se référer aux images et non des chemins absolus,
    4_ Inclure la nouvelle section css “tête” Site,
    5_ Vérifiez qu'il n'y a pas d'instructions dans les différents css pas en conflit les uns avec les autres,
    6_ Charger tous en ligne.

    Dans votre cas, assurez-vous que vous avez une section avec id “conteneur” qui présente dans son intérieur une liste “li”. Seulement de cette manière peut travailler règle css. S'il ya des conflits, alors vous devez attribuer une “Identifiant” ou “classe” différent à chaque étiquette respective. Cela peut sembler facile, mais la plupart du temps, c'est un travail de longue haleine que les premières fois implique également une perte de temps considérable. Je vous suggère d'obtenir de l'aide de quelqu'un qui sait comment travailler avec css, ou de donner autant de temps que vous le pouvez, parce que le problème ne peut être résolu avec un commentaire sur l'article. 🙂

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é.