6
votes

CSS Navigation Sprite - Formes impaires (non carrées)

Je n'ai généralement aucun problème avec la fabrication de sprites CSS, mais celui-ci m'a goûté ... et je ne suis pas sûr de la façon de le résoudre. Fondamentalement, j'ai un sprite de navigation qui ressemble à ceci:

J'utilise la convention standard de les poser dans

  code> Tags tels que:  p>  xxx  pré>  et Ensuite, appliquez des CSS pour régler la position de l'arrière-plan:  P> 
#navigation li.welcome a {
  width:155px;
  background-position:-0px -46.5px; }

html css xhtml css-sprites

0 commentaires

4 Réponses :

2
votes

au lieu d'une rangée de sprites "actifs", créez-les deux et activez-les alternativement, c'est-à-dire I.E.:

  active > inactive > active > inactive ...
  inactive > active > inactive > active ...

p>Ce chemin, vous pouvez toujours couper un sprite; Il vous suffit d'ajouter à la valeur Y si l'index de votre élément est "impair" ( index et 1 == 1 code>). p> p>

0 commentaires

0
votes

Vous pouvez étendre votre sprite et remplacer l'état de survol avec 5 lignes distinctes d'état de survol, chacune ayant seulement un seul bouton bleu avec une position séparée sur l'état de survol pour chaque élément. La taille des fichiers ne devrait pas être trop grande.

0 commentaires

5
votes

Je pense que vous avez raison d'avoir à cuisiner une image "intelligente" qui couvre toutes vos exigences.

Il est difficile d'expliquer en mots, voici un lien vers un exemple: http: //www.alistapart.com/d/sprion/ala-blobs2.html

Voici le lien avec la façon dont il est fait (faites défiler les formes irrégulières '): http: // www .alistaPart.com / Articles / Sprites

1 commentaires

J'ai utilisé cette technique pour faire des diagrammes éclatés de pièces de surveillance, où chacun a été mis en surbrillance sur Rollover, et l'utilisateur pourrait cliquer pour voir les info / les commander ...

2
votes

Pourriez-vous recréer le sprite afin que les boutons de navigation soient empilés verticalement? Ensuite, il semble que vous puissiez utiliser des marges gauche négatives pour s'adapter aux boutons. De cette façon, l'espace négatif sur le côté gauche du bouton serait vide, plutôt que d'avoir une pointe de flèche dessus, ainsi de survol, la cavité resterait transparente.

0 commentaires