background preloader

LES SPRITES

Facebook Twitter

CSS Sprites: Image Slicing’s Kiss of Death · An A List Apart Article. Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity.

CSS Sprites: Image Slicing’s Kiss of Death · An A List Apart Article

Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game. Article Continues Below As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. One variation saw sprites being plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively painted them on the screen.

CSS Sprite Sheet Animations with steps() There’s a little-known timing function in CSS animations that lets us break an animation into segments––or steps––instead of running it as one continuous animation from start to finish.

CSS Sprite Sheet Animations with steps()

This function is useful for creating sprite sheet animations because we’re able to precisely display each sprite image as a frame without any easing effects inbetween. Animating with the steps() function. Animer avec les sprites SVG. Sarah Drasner montre ici comment utiliser les sprites SVG pour créer des animations complexes et responsives.

Animer avec les sprites SVG

De superbes exemples illustrent d'étonnantes possibilités d'animation, avec un code qui reste relativement simple. Par Sarah Drasner Nous savons déjà pas mal de choses sur SVG, par exemple que leur rendu est impeccable quelle que soit leur dimension, ce qui permet de réduire le nombre de requêtes HTTP pour remplacer les images, et qu’on peut les rendre facilement responsifs. Dans cet article, nous allons voir quelques façons d’utiliser les sprites SVG pour créer des animations complexes qui tirent avantage de ces caractéristiques. Tous les exemples qui suivent supposent l’utilisation d’un autoprefixer et quelques connaissances basiques des animations CSS.

CSS Sprites with Background Positioning. There’s nothing more common than hover states to give your website some life.

CSS Sprites with Background Positioning

The user comes to your site, scrolls over an image with their mouse cursor, and the image changes. That’s it. While I spent most of 2012 learning backend programming with Ruby on Rails, I’m only recently spending more time improving my frontend development skills. Earlier this week, I needed to implement the hover state effect so I researched what the best practice was. All of the tutorials and tips I could find were unclear, outdated, or plain confusing so I decided I’d write my own. We’re currently in development on some new things for Uncover and on one page we have an image that we want to change when a user rolls their mouse cursor over it. Webdesign.tutsplus. Spriting with <img> Les sprites en CSS. Définition des sprites et utilisation Un sprite d’images correspond à une collection d’images rassemblées en une seule grande image.

Les sprites en CSS

L’idée derrière l’utilisation de sprites est de réduire le nombre de requêtes serveur. En effet, en cas d’images séparées, une requête va être envoyée au serveur pour récupérer chaque image présente dans une page web pour les afficher. Dans le cas d’une page contenant de nombreuses images, cela peut diminuer sensiblement la vitesse d’affichage de la page. En utilisant des sprites, une seule requête sera envoyée au serveur et cela optimisera les performances de votre site. Tutoriel Vidéo HTML-CSS Les Sprites CSS. Les sprites CSS. Les sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées.

Les sprites CSS

Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requête HTTP diminue. Implémentation Supposons qu'une image est affichée pour chaque élement de la classe toolbtn : Une position peut être ajoutée avec les valeurs x et y après url() pour décaler l'image de fond (background). Cela fonctionne aussi avec background-position. L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe toolbtn). De la même manière, vous pouvez faire un effet de transition au survol : Voir aussi Une démonstration sur CSS Tricks Étiquettes et contributeurs liés au document Dernière mise à jour par :Horsell,

Les sprites CSS. Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS.

Les sprites CSS

La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position.

Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Tout sur les sprites CSS. Les sprites combinent plusieurs images dans un fichier unique, permettant d’améliorer la performance de votre site.

Tout sur les sprites CSS