#sprite

jkphl/gulp-svg-sprite : SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours
►https://github.com/jkphl/gulp-svg-sprite

Un script Gulp pour faire les sprites SVG. La doc est un peu éparpillée :
La doc générale de l’outil node.js qui fait les sprite : ►https://github.com/jkphl/svg-sprite
La doc spécifique Gulp : ►https://github.com/jkphl/gulp-svg-sprite

Utilise SVGO : SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files, cf ▻https://github.com/svg/svgo
La doc pour configurer les options de SVGO avec le script de sprite : ▻https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#svg-transformations

#SVG #gulp #sprite #SVGO #optimisation

twolfson/gulp.spritesmith : Convert a set of images into a spritesheet and CSS variables via gulp
▻https://github.com/twolfson/gulp.spritesmith

Module Gulp générateur de sprites pour des images bitmaps (png/jpg).
Crée le fichier de sprite + le fichier css avec les classes qui vont bien.

Installation basique :

#sprite #gulp #css

Révision 115264 – SPIP-ZONE
▻https://zone.spip.net/trac/spip-zone/changeset/115264/spip-zone

La doc de la balise #ICON du plugin z-core de SPIP : permet d’utiliser des sprites SVG inclus « inline » dans la page aussi bien qu’externes
merci cedric !

#SVG #SPIP ##ICON #sprite #z-core

Remix Icon - Open source icon library
▻https://remixicon.com

Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 1400+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in “Outlined” and “Filled” styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use.

Jeu d’icônes pour le développement web.
Présente le gros avantage de pouvoir être utilisé comme une webfont (à la fontawesome/glyphicon) ou en tant qu’images SVG individuelle mais aussi sous forme de sprite SVG.
La documentation : ▻https://github.com/Remix-Design/remixicon#usage

#icone #svg #sprite #fontawesome #glyphicon #web_dev #remixicon

GitHub - jkphl/svg-sprite: SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)
►https://github.com/jkphl/svg-sprite

Module node.js pour génération automatisée de sprites SVG.

#SVG #sprite #node #gulp

An Introduction to #Sprite #Animation
▻http://eighthdaydesign.com/journal/sprite-animation

http://eighthdaydesign.com/resources/images/1-10-2015/80-299.Paul_walk_2560_2.gif

The technique for sprite animation is not new, the Victorians taught us how to do it with their zoetrope’s, and 8-bit video game designers showed us how to do it in the digital age. At its heart, all we are doing is moving sequentially through a series of images.

#web_design

#SOUTH_AFRICAN_HIP_HOP_SERIES: Thoughts On The Late Rapper #Mizchif
▻http://africasacountry.com/south-african-hip-hop-series-thoughts-on-the-late-rapper-mizchif

I was home alone one Friday night around 2001 watching, as was tradition, one of the #MUSIC shows which came on at SABC 1 during that period. It could’ve been Studio Mix during its dying years, or Basiq with Azania, or Castle Loud with Unathi and Stoan. The first video played after a Telkom ad. […]

##SAHipHop2014 #Mavusana #Sprite_Rap_Activity_Jam #YFM #Zimbabwe

#SVG “symbol” a Good Choice for Icons
▻http://css-tricks.com/svg-symbol-good-choice-icons/#comment-1582036

Tags : SVG #symbol #icône #sprite #viewport

South African Hip Hop–An Outsider’s Perspective
▻http://africasacountry.com/south-african-hip-hop-an-outsiders-perspective

One evening while channel surfing at home, I stumbled upon what sounded like a rap cypher* on the #radio. Quickly, I got up to look for an empty cassette tape nearby. Once I found one (a see-through Sonotech C-60 if memory serves right), hurriedly inserted it into the tape deck, and pressed the record button. That moment marked my […]

#MUSIC ##SAHipHop2014 #Asylum_Trybe #Harambe #Lesotho #Prokid #Proverb #Skwatta_Kamp #South_African_hip-hop #Sprite_Rap_Activity_Jam #YFM

Spritemapper
►http://yostudios.github.com/Spritemapper

Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices. Run spritemapper /path/to/myfile.css and it does its magic.

Un script python à utiliser en ligne de commande pour générer automatiquement un sprite css + images à partir d’une simple css.

#css #sprites #shell

When to base64 encode images (and when not to) | David B. Calhoun – Developer Blog
►http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to

for image content, where there is nothing to be saved but #HTTP #requests, you should definitely think twice about #base64 encoding to save requests. Yes, you will save a few HTTP requests, you won’t really be saving bytes, and the user might actually think the experience is #slower because they can’t see the image content as it’s being downloaded. Even if you shave off a few milliseconds of wait time, the #perceived #performance is what matters most.

#webperf #sprites #css

#Sprite Cow - Generate #CSS for sprite sheets
►http://www.spritecow.com

Sprite Cow helps you get the #background-position, #width and #height of #sprites within a spritesheet as a nice bit of copyable css.

#image #webperf

Pseudo Spriting | CSS-Tricks
►http://css-tricks.com/13224-pseudo-spriting
#after #before #pseudo_elements #CSS #sprites

Pseudo Spriting | CSS-Tricks
►http://css-tricks.com/13224-pseudo-spriting/#comment-98926

I’m not advocating against #sprites. I’m just saying don’t go crazy with #diagonal ones ;)

#CSS #mémoire #optimisation

CSS Sprites generator
▻http://csssprites.com
#CSS #sprite #générateur #dev #web #performance #image

A Quick Examination of the Memory and Perfomance Ramifications of CSS Sprite Dimensions » HTML CSS JavaScript » Blog Archive
▻http://htmlcssjavascript.com/performance/a-quick-examination-of-the-memory-and-perfomance-ramifications-of
#image #sprite #mémoire #dev #web #performance #clevermarks

Are sprites accessible ?
▻http://www.arespritesaccessible.net

#sprite #dev #web #accessibilité #clevermarks #notabene #Stéphane_Deschamps

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | CSS | Smashing Magazine
►http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

#css #webdesign #sprites

Google Code Blog: How we improved performance on Google Code
▻http://google-code-updates.blogspot.com/2008/03/how-we-improved-performance-on-google.html

If you’re a frequent visitor to code.google.com for product updates and reference materials for Google APIs you’re working with, you might have noticed that the page loading time (or page rendering time depending on how you see it) has reduced in varying

#google #performance #webdev #css #javascript #http #sprite #groupe:clever-age #clevermarks #ajax #browser #cache #optimisation #patterns

Ajaxian » CSS Sprite Generator Released
▻http://ajaxian.com/archives/css-sprite-generator-released

CSS Sprite is a single image file which contains several graphics. Using CSS background positions it’s possible to display any one of the graphics. By using a sprite you save on multiple http requests which helps speed up the rendering of your page.

#css #sprite #outil #générateur #groupe:clever-age #web #dev #image #performance #http #optimisation