images-objets png. Créer des sprites CSS

Finissons avec la liste. Faisons maintenant les mêmes liens :

A( padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; ) a( padding:0 0 0 20px; background:url("sprites..png") 0 -21px pas de répétition ; )

Que signifient les sélecteurs a ? Évidemment, ce sélecteur provoque l'application du navigateur style donnéà tous les liens qui ont un attribut href dont la valeur commence par la chaîne http://website/. Le sprite lui-même est appliqué de la même manière que dans le cas de la liste. Je ne considérerai qu'un seul lien - un lien vers mon blog.

1. Nous déterminons le lien souhaité par href .. Vous pouvez simplement attribuer une classe au lien souhaité ou écrire des styles dans l'attribut style directement dans le code html. Ou identifiez le lien souhaité par toute autre méthode.
2. Nous faisons un retrait à partir du bord gauche d'un lien spécifique en 20 pixels
3. Spécifiez comme image de fond sprites.png image
4. L'image que j'ai choisie pour mon blog est à 21 pixels du haut, ce qui signifie que nous devons déplacer l'arrière-plan de 21 pixels vers le bas. En css, je l'ai écrit comme ça "0 -21px"

Devoirs

Sprites avec dégradés

Regardons maintenant le deuxième exemple.


Cette image montre une fenêtre. Une fenêtre a un titre, un corps et un pied de page. Chacun de ces éléments a un ensemble de dégradés d'arrière-plan. Regardez attentivement si cela n'est pas immédiatement visible, il y a une transition de couleur du pâle au saturé.

Je vais vous montrer comment les dégradés de cette fenêtre peuvent être transformés en sprites. Le titre et le pied de page de la fenêtre auront une hauteur fixe - 30 pixels. Le corps de la fenêtre s'étirera en fonction de la longueur du texte.

Écrivons maintenant le code html de la fenêtre :

Commençons à utiliser les sprites. Commençons par le titre de la fenêtre :

#window-header( hauteur:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; )

Dans le fichier gradients.png, le dégradé pour l'en-tête passe en premier, puis pour le corps, puis pour la ligne du bas. C'est-à-dire que le dégradé du titre commence tout en haut. Par conséquent, nous définissons simplement le fichier lui-même comme arrière-plan et indiquons la position comme "0 0", c'est-à-dire ne reculons nulle part. Pour que le dégradé s'étire horizontalement, écrivez "repeat-x".

Pour que le dégradé s'intègre complètement dans le titre, nous spécifions une hauteur de 30 pixels.

Tout comme pour l'en-tête, définissons le dégradé du pied de page :

#window-footer( hauteur:30px; fond: #C0FFC0 url("gradients.png") 0 -60px repeat-x; )

Seulement cette fois, nous allons déplacer l'image vers le bas de 60 pixels.

Avec le corps de la fenêtre, la situation est plus compliquée. Le corps sera étiré, contrairement à l'en-tête et au pied de page. Autrement dit, si nous ne faisons qu'un div pour le corps de la fenêtre et y mettons un dégradé, alors tous les dégradés apparaîtront dans ce div à la fois. Alternativement, nous pouvons mettre le dégradé du corps en dernier verticalement, mais que se passe-t-il si nous avons plusieurs dégradés pour les blocs qui s'étirent ? Vous ne pouvez pas tout faire à la fois. Nous allons faire un peu plus délicat.

Le code CSS sera le suivant :

#window-body( position:relative; ) #window-body-gradient( position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 - 30px repeat-x; ) #window-body-text( position:relative; )

Maintenant, laissez-moi vous en dire plus sur ce que nous avons fait ici. Voici le code html du corps de la fenêtre séparément :

Comme vous pouvez le voir, nous avons deux autres divas intégrées dans le corps. Le premier "window-body-gradient" sera responsable du gradient. Le deuxième "window-body-text" est pour le texte. De plus, comme il ressort clairement du code CSS, nous avons appliqué la position : relative ; pour tout le corps de la fenêtre.

Pour le gradient div, nous spécifions position:absolute. Ainsi, nous avons éliminé le gradient div du flux général. Maintenant, cette div n'affecte rien. Puisque nous avons position: relative pour tout le corps, le gradient div ne flotte pas plus loin que le parent. Attachez-le aux bords gauche et supérieur du corps de la fenêtre avec "left:0 ; haut : 0 ;". Définissez la hauteur du dégradé div à 30px. Autrement dit, nous indiquons ici la hauteur du dégradé que nous allons attacher, si la hauteur du div est supérieure à la hauteur du dégradé, alors d'autres sprites ressortiront dans le div. Enfin, attachez notre fichier gradients.png au gradient div. Comme d'habitude, nous déplaçons l'arrière-plan de la distance souhaitée, dans ce cas nous déplaçons l'arrière-plan de 30 pixels vers le haut.

Nous avons maintenant un dégradé dans le corps de la fenêtre. Mais cela obscurcit le texte. Pour que le texte ne soit pas obscurci, nous enveloppons le texte entier dans un div et attribuons une position : relative à celui-ci. Une fois attribué, le texte sera au-dessus du dégradé.

En général, c'est tout. Nous avons maintenant placé tous les dégradés dans notre fenêtre. Et dans l'en-tête, et dans le corps, et au sous-sol.

Je fais de si longues explications pour que tout soit complètement clair. Mais en fait, si vous êtes un peu versé dans la mise en page, alors il vous suffira probablement de regarder les exemples eux-mêmes :

J'ai de nouveau dupliqué le lien.

En fait, vous pouvez trouver de nombreux exemples d'utilisation de sprites. Je n'ai montré que deux exemples, mais ces exemples devraient être suffisants pour comprendre le fonctionnement des sprites. Si vous avez des questions, posez-les dans les commentaires.

Annonces

Sprite est une boisson gazeuse incolore, citron et citron vert avec goût, sans caféine, créée par Coca-Cola. Il a été développé en Allemagne de l'Ouest en 1959 sous le nom de Fanta Klare Zitrone et introduit aux États-Unis sous le nom de Sprite en 1961.

(Coca), Fanta, 7 Up, Mist Twst. Les boissons Sprite et Pepsi sont des exemples d'une classe appelée soda/boissons gazeuses. Les gens boivent du soda, pour diverses raisons, notamment; goût sucré, emballage pratique, disponibilité et autres pour étancher leur soif.

Une canette de soda contient l'équivalent de 10 cuillères à café de sucre. Cette quantité de sucre, en particulier sous forme liquide, une forte augmentation de la glycémie et de l'insuline provoque une réaction dans le corps. Au fil du temps, cela peut entraîner du diabète ou une résistance à l'insuline, sans parler du poids et d'autres problèmes de santé.

Annonces

Quels sont les ingrédients du sprite ?

Eau gazéifiée, sirop de maïs à haute teneur en fructose, acide citrique, arômes naturels, citrate de sodium, benzoate de sodium (pour protéger le goût).

Télécharger Sprite PNG images galerie transparente.

Résolution : 800×2352
Taille : 1645 Ko
Format d'image : .png

Résolution : 409×1350
Taille : 127 Ko
Format d'image : .png


Résolution : 825×825
Taille : 283 Ko
Format d'image : .png


Résolution : 444×853
Taille : 97 Ko
Format d'image : .png


Résolution : 512×512
Taille : 186 Ko
Format d'image : .png

Résolution : 256×256
Taille : 41 Ko
Format d'image : .png



Résolution : 1600×1200
Taille : 625 Ko
Format d'image : .png

Résolution : 985×3524
Taille : 1072 Ko
Format d'image : .png


Résolution : 901×810
Taille : 711 Ko
Format d'image : .png

Sur les sites modernes, vous pouvez trouver un grand nombre de types de graphiques très différents : images de produits, avatars d'utilisateurs, images qui forment la conception de pages, boutons, icônes, logos, etc. Et plus le projet est grand, plus les fichiers graphiques y sont utilisés. Lorsque vous ouvrez une page distincte du site dans le navigateur, tous ses éléments sont chargés. Par conséquent, lorsque trop de graphiques sont placés dessus, la vitesse de téléchargement a tendance à être considérablement réduite. Ce qui, à son tour, est lourd d'inconvénients pour les visiteurs de votre projet.

Sprites CSS

Au page d'accueil il y a un formulaire pour télécharger des fichiers graphiques (pour chaque fichier il y a un bouton séparé). Au départ, seuls trois boutons de téléchargement sont visibles. Si vous avez besoin de plus, cliquez sur "Besoin de plus".

Une fois tous les fichiers du futur sprite CSS sélectionnés, cliquez sur le bouton "Options". Un petit panneau avec des paramètres s'ouvrira devant vous. Ici, vous pouvez définir les retraits entre les éléments en pixels, ajouter un cadre pour les images, aligner toutes les images du sprite fini à gauche ou en haut, définir la couleur d'arrière-plan au format RVB.

Après avoir cliqué sur le bouton "Générer", le sprite CSS sera directement créé. Vous verrez également une petite instruction pour son utilisation, à savoir le code CSS que vous devrez placer sur votre site. Il y a même un exemple en HTML. Pour comprendre, je pense, pas de problème.

Visuellement, Dan's Tools CSS Sprite Generator est un générateur de sprites CSS assez agréable avec de nombreuses options. Vous pouvez, par exemple, choisir un type d'insertion vertical ou horizontal des icônes dans l'image globale.

Sprites CSS

Dans le service CSS Sprites, tout est extrêmement simple tant dans le design que dans les réglages. Il y a un choix de format de l'image résultante : PNG, JPEG, GIF. La page contient un lien vers une version réactive de la génération de sprites - Responsive CSS Sprites (bien que je ne l'aie pas essayé).

Le total. En principe, nous avons examiné toutes les nuances de la façon de créer des sprites CSS et de les utiliser. Les générateurs aideront à accélérer le processus de création d'éléments, mais vous pouvez vous débrouiller avec Photoshop. S'il y a des questions, écrivez dans les commentaires.

Aimé:
27

N'a pas aimé : 4

Pas de traduction disponible.

lutin

avant ou alors après"avant""après""après"

oiseau en colère en colère.png. index.html

UTF-8 index.html fenêtres-1251 style.css oiseau en colère

http://spritecow.com

colère.png,

oiseau en colère fichier de style style.css imgs/. je l'ai eu comme ça:

Pas de traduction disponible.

Les sprites CSS sont des graphiques pour votre site Web combinés en un seul fichier graphique. « Pourquoi un seul dossier ? » - tu demandes. Le fait est que cette approche du stockage des images vous permet d'augmenter les performances des pages Web, ainsi que de stocker des images graphiques de manière plus organisée. Jetons un coup d'oeil à certains de les meilleures pratiques utilisation des sprites. Le nom même de sprites peut vous rappeler les sprites de jeu, les consoles de jeu rétro et même les jeux par navigateur qui sont si populaires aujourd'hui :

Donc, applicable à la conception de sites Web, lutin- c'est juste un gros fichier contenant plusieurs images pour votre site, ce qui vous fait gagner du temps lors du téléchargement et du transfert du fichier sur le réseau. Lorsqu'un sprite, par exemple, contient 20 à 30 images, cela peut considérablement alléger la charge sur le serveur, car si ces images étaient stockées séparément, le serveur devrait faire respectivement 20 à 30 requêtes distinctes pour obtenir chacune de ces images. . Grâce au sprite, une seule requête HTTP est envoyée au serveur - pour obtenir une seule image. Le sprite peut ne pas sembler visuellement "lisible" à l'œil nu, car sa tâche principale consiste uniquement à rassembler différentes "pièces" de votre conception. Par exemple, un sprite pourrait ressembler à ceci :

Les sprites sont utilisés par la plupart des sites modernes, et le célèbre VKontakte ne fait pas exception. Par exemple, voici comment il stocke des "morceaux" de l'interface dans un seul fichier - à savoir, des icônes familières à tout le monde :

Le point essentiel de l'utilisation des sprites CSS est que vous n'avez besoin d'envoyer qu'un seul fichier graphique au serveur contenant toutes vos images, pas beaucoup d'images individuelles - et grâce au CSS, vous pouvez afficher n'importe quel petit segment de ce fichier graphique comme arrière-plan d'un élément. Certaines personnes pensent que les images individuelles se chargent plus rapidement, mais ce n'est pas le cas. Lors du chargement d'un fichier graphique avec de nombreuses images, nous envoyons une seule requête au serveur, et lors du chargement un grand nombre images - nous envoyons plus de requêtes au serveur. Combiner des images dans un seul fichier permet non seulement de réduire considérablement le nombre de requêtes HTTP, maiset réduire la taille globale du fichier image.

Permettez-moi de vous donner un autre exemple de sprite. C'est ainsi qu'un site occidental bien connu dédié au design stocke des éléments graphiques :

Vous vous demandez peut-être - quel est le meilleur moment pour préparer un sprite ? Il existe deux approches différentes pour cela.

Différentes approches - créer un sprite avant et après la création d'un site

Il existe deux approches courantes lors de la création d'une feuille de sprite -avant ou alors aprèscréation de votre site. Vous pouvez mettre toutes les images dans la feuille de sprite avant de créer le site. C'est ce que nous appelons l'approche"avant". De plus, vous pouvez créer toutes les images sous la forme fichiers individuels, ce qui facilite leur modification. Une fois que le site est construit et que toutes les images sont prêtes, vous pouvez créer rapidement et facilement une feuille de sprite, soit à la main, soit à l'aide de l'un des nombreux outils. C'est ce que nous appellerons l'approche"après". Si les feuilles de sprites sont nouvelles pour vous ou si vous débutez dans la conception Web, l'approche vous convient mieux."après". Il existe de nombreux utilitaires, services et programmes pour vous aider à créer des sprites, dont la plupart sont distribués et disponibles gratuitement.

Organiser des images dans un sprite de manière organisée

Lors de la création d'un sprite dans Photoshop, il est conseillé de placer immédiatement toutes les images de manière organisée et dans une séquence spécifique choisie par vous, afin que plus tard, il soit facile et simple de travailler avec elles. Essayez de toujours arrondir l'espace pour chaque image de sprite aux 10 pixels les plus proches, ou laissez plus d'espace autour d'eux s'ils ont tous la même taille. Lorsqu'il s'agit d'écrire un style CSS, vous n'aurez pas à noter les mesures de coordonnées et vous serez moins susceptible d'oublier les nombres avec les coordonnées des images souhaitées. Voici un exemple de placement réussi de différentes images dans un sprite :

De la théorie à la pratique ! Comment créer un oiseau Angry Birds animé à l'aide d'un sprite

Nous nous sommes donc familiarisés avec le concept de sprite dans la conception Web, mais la théorie sans la pratique n'est rien. Par conséquent, nous allons maintenant créer notre premier sprite et apprendre à créer animation simple sur la page HTML. Notre exemple sera basé sur un personnage du jeu Angry Birds- C'est un drôle d'oiseau rouge. Préparons d'abord une image sprite au format .PNG contenant 4 phases d'animation d'oiseau :

Créons un répertoire quelque part sur le disque oiseau en colère- nous y placerons les fichiers de notre exemple. Nous sauvegardons le sprite avec des oiseaux dans ce répertoire et nommons le fichier en colère.png. L'étape suivante consiste à créer un fichier dans le même répertoire avec le nom index.html- ce sera notre page de test avec animation. Ensuite, ouvrez ce fichier dans l'éditeur et mettez-y le code suivant :

Laissez-moi vous expliquer un peu ce que nous venons de faire. Tout d'abord, nous avons donné à notre document HTML un encodage UTF-8, ce qui signifie que nous devons garder notre index.html dans cet encodage. Vous pouvez également en définir un autre, par exemple, fenêtres-1251, n'est pas indispensable à notre tâche. Ensuite, nous avons connecté le fichier de style au document style.css(ce n'est pas encore dans notre catalogue) oiseau en colère, nous le créerons plus tard). Nous avons également défini un lien vers un script externe et connecté la bibliothèque jQuery - avec l'aide de jQuery, nous modifierons dynamiquement les images de notre oiseau et modifierons ses "phases" à partir du sprite. Nous avons également préparé un bloc JavaScript interne, où nous placerons le code qui fait l'animation de l'oiseau. Eh bien, et enfin, le corps principal du document contient un seul lien hypertexte, à l'intérieur duquel se trouve un bloc DIV, et son ID est défini sur birdImage , et la classe par défaut est bird-sleeping . Cela signifie que notre oiseau "dormira" à l'ouverture de la page - cela correspond à l'image en bas à gauche à l'intérieur du sprite - là où ses yeux sont fermés. Il est maintenant temps de "couper" notre sprite, c'est-à-dire en extraire des images individuelles.

Couper un sprite en utilisant le service SpriteCow.Com

La tâche de "découper" un sprite est assez laborieuse - elle nécessite de veiller à ne pas se tromper avec les coordonnées qui définissent chaque image dans le sprite. Heureusement, il existe aujourd'hui des services qui suppriment complètement ce casse-tête du concepteur et du maquettiste. J'utilise et recommande http://spritecow.com pour le tranchage. L'essence du service est simple et très pratique - nous sélectionnons chaque image d'oiseau avec la souris, et SpriteCow nous donne un code CSS prêt à l'emploi avec des coordonnées. Tout ce que nous avons à faire est de définir 4 styles pour chaque phase de l'oiseau ! Après être entré sur le site, nous voyons 2 boutons - "Ouvrir l'image" et "Afficher l'exemple". Nous avons besoin du premier bouton, cliquez dessus:

Dans la boîte de dialogue qui s'ouvre, sélectionnez notre fichier sprite colère.png, après quoi nous voyons comment notre sprite s'est chargé sur le site. Ensuite, nous devons définir la couleur d'arrière-plan, pour cela nous cliquons sur la barre d'outils "Choisir l'arrière-plan" et pointons sur la zone blanche de notre sprite - cela découpera correctement chaque phase de l'oiseau :

Sélectionnez la première image et obtenez automatiquement le code CSS correspondant :

Maintenant, il est temps de créer dans notre catalogue oiseau en colère fichier de style style.css. Nous y insérons séquentiellement 4 morceaux de code CSS générés, mais au lieu de la classe standard .sprite qui nous est offerte par SpriteCow, appelons nos styles plus compréhensibles. De plus, puisque l'image du sprite est stockée directement à la racine du répertoire, nous supprimerons l'élément de chemin inutile de la propriété background - imgs/. je l'ai eu comme ça:

/* oiseau "régulier". Image en haut à gauche dans le sprite */ .bird-normal ( background: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; ) /* "Happy" bird. Image en haut à droite dans le sprite */ .bird-happy ( background: url("angry.png") no-repeat -118px -17px; width: 97px; height: 94px; ) /* "Sleeping" bird. Image en bas à gauche dans le sprite */ .bird-sleeping ( background: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; ) /* Oiseau "en colère". Image en bas à droite dans le sprite */ .bird-angry ( fond : url("angry.png") no-repeat -118px -120px ; largeur : 97px ; hauteur : 94px ; )

La dernière étape consiste à écrire le code jQuery qui crée l'animation.

Maintenant que nous avons découpé avec succès le sprite et placé 4 styles pour chaque image dans notre fichier style.css, nous avons juste besoin d'écrire le code jQuery qui ajoutera une animation lors du survol de notre lien hypertexte et lorsque le lien est cliqué. Comme nous nous en souvenons, par défaut, nous avons l'ensemble de classes de sommeil des oiseaux, c'est-à-dire notre oiseau rouge "dormira" à l'ouverture d'un document :)

Toutes les animations seront basées sur 3 méthodes jQuery :

• hover - gestionnaire pour survoler le lien et "quitter" le curseur du lien. Lorsque nous déplaçons le curseur, l'oiseau se "réveillera" - c'est-à-dire la classe deviendra oiseau-normal
• mousedown - gestionnaire pour cliquer avec le bouton gauche de la souris sur un lien. Dans ce cas, l'oiseau deviendra "heureux" - c'est-à-dire Le bloc DIV recevra le classbird-happy
• mouseup - gestionnaire pour relâcher le bouton gauche de la souris. Une fois relâché, l'oiseau deviendra "en colère" - c'est-à-dire Le bloc DIV reçoit la classe bird-angry

Alors, collez le code suivant à l'endroit que nous avons préparé dans unité intérieure JavaScript placé sur la page :

$(document).ready(function() ( // voici le code jQuery qui crée l'animation $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-normal"); ), function() ( $( this ).removeClass("oiseau-normal"); $(this).removeClass("oiseau-en colère"); $(this).removeClass("oiseau-heureux"); $(this).addClass("oiseau- sleep" "); )); $("#birdImage").mousedown(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $( this).removeClass("oiseau-en-colère"); $(this).addClass("oiseau-heureux"); )).mouseup(function() ( $(this).removeClass("oiseau-endormi") ; $ (this).removeClass("oiseau-normal"); $(this).removeClass("oiseau-heureux"); $(this).addClass("oiseau-en-colère"); )); ));

Prêt! Animation de test

C'est ça! Notre oiseau est prêt et a donné vie à la page avec son animation ! :) Vous pouvez voir la démo. Téléchargez l'archive avec un exemple - au bas de l'article.