Share
Les sprites CSS peuvent augmenter considérablement les performances d'un site Web et avec jQuery, nous pouvons facilement implémenter des effets de transition impressionnants. Commençons.
Les sprites remontent aux débuts des jeux vidéo, où ils étaient utilisés comme technique d'optimisation pour l'affichage de graphiques 2D. Un sprite CSS est une technique qui consiste à grouper des images pour ne former qu'une seule image maître, puis à n'afficher que les sections requises à l'aide d'attributs CSS (largeur, hauteur, position de l'arrière-plan, etc.)..
Dans ce tutoriel, nous allons créer un menu de navigation inspiré de Dragon Interactive. Ils ont un excellent concept de design, avec une utilisation parfaite des reflets et des couleurs.
Commencez par créer un nouveau document Photoshop d'une largeur de 800 x 500 x 500.
Ensuite, nous allons créer une règle horizontale à la marque 70px en allant voir -> nouveau guide; ce sera notre hauteur de menu.
Nous allons maintenant créer un menu de dossiers et, à l'intérieur, un sous-dossier appelé "Texte du menu".
Sélectionnez l'outil de texte (raccourci: t) et définissez les propriétés suivantes dans la boîte à outils.
D'autres polices peuvent également être utilisées, mais cette famille de polices convient mieux aux effets de texte incorporés que nous donnerons plus tard. Si vous ne possédez pas cette police, vous pouvez l'obtenir sur le site Web..
Créez une autre règle horizontale à 40 pixels, cela aidera à garder le texte de notre menu aligné horizontalement.
Maintenant, sélectionnez le dossier de texte du menu et tapez les mots de menu HOME, SERVICES, PORTFOLIO, ABOUT et CONTACT, en maintenant des espaces égaux entre eux. Il devrait maintenant ressembler à l'image ci-dessous.
Créez maintenant un autre dossier sous le dossier de texte du menu et nommez-le "Arrière-plan du menu".
Créons ensuite un nouveau calque dans le dossier Arrière-plan du menu, puis à l'aide d'un outil de sélection rectangulaire, créons une sélection de 100 pixels de large et de 70 pixels de haut..
Sélectionnez l'outil de dégradé (raccourci: g) et définissez les couleurs du dégradé de # 555555 à #adadae. .
Dessinez maintenant un dégradé en partant du bas de la sélection vers le haut de la sélection. puis donnez-lui un trait avec les propriétés suivantes:
Le trait a été ajouté pour donner de la profondeur à nos divisions de menu.
Maintenant Pour atteindre les extrémités très polies et pour créer le bon effet lorsque le survol de la souris se produit, nous lui donnerons un surlignage adjacent..
Allez à select> modify> contract et entrez 1px.
Sélectionnez l'outil de gravure et définissez les propriétés suivantes:
Nous allons maintenant déplacer la division de menu vers la droite 1px, en utilisant l'outil de déplacement (raccourci: v) afin d'afficher le côté gauche du trait, ce qui était invisible en raison de sa position..
Créez des copies du calque ci-dessus et ajustez-les en fonction du texte du menu..
Voici à quoi ressemble le menu lorsque nous ajustons le positionnement des calques et le texte du menu en conséquence.
Afin d'intégrer l'effet typographique, nous ajoutons à notre texte l'effet "Ombre portée" avec les paramètres suivants:
Il est maintenant temps de créer l'apparence du menu pendant le survol de la souris. Créez une copie du dossier "Arrière-plan du menu" et renommez-le en "Survol du menu". Ensuite, à l'aide de l'outil de déplacement, déplacez le dossier de 70 px vers le bas de sorte que la partie supérieure du menu nouvellement créé touche le guide horizontal..
La raison pour laquelle nous avons créé la copie du dossier de menu est que nous nous intéressons au positionnement du texte du menu. Si nous l'avions créé manuellement, nous devrions alors nous préoccuper de l'alignement exact du texte du menu, ce qui serait beaucoup plus fastidieux..
Maintenant, nous allons sélectionner la couche d’arrière-plan du menu de service dans le dossier "Menu Hover" et lui donner un bel effet élégant sur l’état de survol. Pour ce faire, commencez par créer une sélection en appuyant sur ctrl et cliquez sur le calque. puis appuyez sur supprimer, ce qui supprimera la teinte actuelle. Suivant…
Sélectionnez le dégradé radial et tracez une ligne du bas de la sélection jusqu'à 30px au-dessus du haut de la sélection..
Notre travail n'est pas encore terminé. Pour lui donner un toucher lisse, nous devons le polir un peu plus. Pour créer une division de menu plus révélatrice, nous allons assombrir les bords. Pour ce faire, nous devons ajouter les effets suivants:
Appliquez un effet similaire au portefeuille et aux menus. Pour le menu de contact, modifiez les couleurs du dégradé en:
Voici à quoi ressemble notre menu:
La division du menu d'accueil doit faire l'objet d'un traitement spécial; sélectionnez le calque en appuyant sur ctrl et en cliquant sur le calque. Appuyez sur Supprimer pour supprimer la teinte actuelle et sélectionnez l'outil de dégradé avec les couleurs suivantes:
Cette fois, sélectionnez un dégradé linéaire et tracez un dégradé du haut au bas de la sélection..
Sélectionnez l'outil de gravure en conservant les mêmes propriétés à l'exception de la plage, réglez-le sur les demi-tons et appliquez des traits sur les bords, à l'exception du haut..
Maintenant, pour créer l’effet vitreux: sélectionnez l’outil Plume, assurez-vous que «Remplir la forme» est sélectionné, dessinez la forme comme celle de l’image et réglez son mode de fusion sur une lumière douce avec une opacité d’environ 40%..
Encore deux choses avant que nous ayons fini avec la partie Photoshop.
Enfin, notre image de sprite a l'air si:
Vient maintenant la section de codage, qui est assez facile. Créez un fichier html et ajoutez le code suivant:
Menu génial
Ici, nous avons créé un fichier HTML simple, qui consiste en une liste non ordonnée - notre barre de navigation. Avant de poursuivre, examinons quelques fichiers que nous allons maintenant importer:
Créez un fichier .js externe, appelé sprite.js, et collez-le dans le code suivant..
Accentsconagua
$ (function () $ ('# navigation li a'). append (''); // span dont l'opacité s'anime lorsque la souris survole. $ ('# navigation li a'). hover (function () $ ('. hover', this) .stop (). animate ('opacity': 1, 700, 'aisanceSoutSine'), fonction ( ) $ ('. survol', ceci) .stop (). animate ('opacity': 0, 700, 'aisanceSautQuad'))); Lorsque le DOM est chargé, nous injectons une étendue dans notre balise d'ancrage. cette durée sera réellement animée. Ensuite, en utilisant la fonction hover pour la balise anchor, nous animons l'opacité de la plage. Pour créer une animation plus fluide, nous allons utiliser l'équation d'accélération. J'utilise 'aisoutsine' et 'aisoutquad'; n'hésitez pas à essayer d'autres combinaisons si vous le souhaitez.
Maintenant vient la partie CSS. Créez le fichier style.css. Vous trouverez ci-dessous l'image initiale de ce à quoi le menu ressemble. Pour l'instant, il n'y a que quatre points, car nous ne l'avons pas encore appelé.
Tout d'abord, nous alignons la liste.
corps background: # 000000; #navigation margin-left: 250px; #navigation li float: left;
Nous avons seulement déplacé un peu le menu au centre.
Style de la balise d'ancrage; son fond sera notre image de sprite.
#navigation li a image de fond: url (images / sprite.jpg); bloc de visualisation;
Le style d'affichage doit être défini pour bloquer; sinon rien ne sera affiché.
Dans la prochaine étape, nous donnerons à chacun le bon positionnement.
.home background-position: 0px 0px; largeur: 102px; hauteur: 70px; .services background-position: -102px 0px; largeur: 110px; height: 70px .portfolio background-position: -212px 0px; largeur: 108px; height: 70px .about background-position: -320px 0px; largeur: 102px; height: 70px .contact background-position: -422px 0px; largeur: 103px; hauteur: 70px
Ici, nous avons défini le positionnement de l'arrière-plan et la largeur de chaque balise d'ancrage. Les valeurs peuvent varier et il faut un peu de temps pour arriver à la perfection.
#navigation a .hover background: url (images / sprite.jpg) no-repeat; bloc de visualisation; opacité: 0; position: relative; en haut: 0; gauche: 0; hauteur: 100%; largeur: 100%; #navigation a.home .hover background-position: -0px -72px; #navigation a.services .hover background-position: -102px -72px; #navigation a.portfolio .hover background-position: -212px -72px; #navigation a.about .hover background-position: -320px -72px; #navigation a.contact .hover background-position: -422px -72px;
Nous allons maintenant définir le CSS pour le span; c'est la même image de sprite qui est utilisée ci-dessus. La hauteur et la largeur sont faites à 100% de sorte qu'il occupe tout le bloc d'ancrage. Le fond de chaque balise span est ajusté, et finalement notre travail est terminé.
Notez qu'il faut du temps pour régler correctement la position et la largeur; vous pouvez vous retrouver avec des valeurs légèrement différentes pour ces attributs - et c'est parfaitement d'accord!
Ouf semble être beaucoup de travail, mais de grandes choses prennent du temps à construire. Voici quelques ressources supplémentaires que vous pourriez trouver utiles.
