CSS Sprites: What They Are, Why They're Cool, and How To Use Them. By Chris Coyier On This article has been revised and re-written several times since its very first publication in 2007, to keep the information current.
The most recent revision was done by Flip Stewart in January 2015. #What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. I wish. To summarize: the term "sprites" comes from a technique in computer graphics, most often used in video games. CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. #Why use CSS Sprites? It may seem counterintuitive to cram smaller images into a larger image. Let's look at some numbers on an actual example: That adds up to a total of 14.38KB to load the three images. While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request. Thus, sprites are important for the same reasons that minifying and concatinating CSS and JavaScript are important. $ sprity . #SVGs. Sprite Creator 2.0. Image de fond en CSS (background-image) dans une page html - CSS Debutant.
Mettre une image de fond dans une page html est un exercice très répandu.
Et il est loin et révolu le temps où on utilisait le code du type : <body background="images/image_de_fond.png"> si peu adaptable aux besoins. Avec les feuilles de style on peut obtenir beaucoup plus, surtout depuis l'arrivée des CSS3 qui permettent de mettre plusieurs images de fond d'un seul coup. Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : background-image background-repeat background-position. Gradient Generator.
CSS Type Set. Call-to-Action Button Generator. CSS list-style-image property. Css opacity - définition opacity css (feuille de style css) et compatiblité navigateurs. Pour faire le même effet de transparence sous Internet Explorer < 9 vous devez utiliser la propriété de feuille de style css filter qui est propre à Internet Explorer.Voici le code : Exemple de code : Le résultat du code : opacity opacity opacity opacity opacity opacity opacity opacity opacity opacity Le résultat en image : La valeur opacity de la propriété de feuille de style css filter accepte comme valeur :- nombre : compris entre 0 et 100, 0 étant totalement transparent et 100 totalement opaque.
A priori le top serait cela : Cependant après plusieurs tests, il semble que pour Internet Explorer, la css '-ms-filter' et 'filter: progid:' ne sont pas obligatoires car Internet Explorer 7,8,9 (pas vérifié sur le 10) comprennent filter : alpha Le générateur de code CSS pour la propriété opacity.