Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #s
RSS: #sprite

#sprite

  • #sprites
  • #sprite_rap_activity_jam
  • @martin
    Martin @martin PUBLIC DOMAIN 20/03/2022

    Mina the Hollower by Yacht Club Games » Update #13 - Exciting new surprises! — Kickstarter
    ▻https://www.kickstarter.com/projects/yachtclubgames/mina-the-hollower

    A Treasure Trove of Art

    […] The spark of the idea came way back in 2013 during the Shovel Knight kickstarter when someone shared with us a picture of an unknown game dev at a game jam using Shovel Knight sprites as reference. He was making art for HIS game referencing art from OUR game. We love the idea of enabling other game devs! So, to that end, we are finally realizing one or our dreams by publishing the Treasure Trove: a nearly 1 gigabyte .zip containing ALL of the art from the 7 years of production of Shovel Knight Treasure Trove. 1 gigabyte doesn’t sound like a lot in modern video game terms but it’s pixel art, these files are usually measured in Kilobytes. It’s huge and it’s YOURS!

    We’re publishing it all under the Creative Commons license [CC BY-NC 4.0].

    #jeu_vidéo #jeux_vidéo #yacht_club_games #jeu_vidéo_shovel_knight #licence_creative_commons #licence_cc_by_nc_4.0 #kickstarter #sprites #graphismes #réutilisation #prototypage #partage

    Martin @martin PUBLIC DOMAIN
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 23/05/2019

    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
    Voir aussi :
    – les plugins de SVGO : ▻https://github.com/svg/svgo#built-in-plugins
    – la version Gulp de SVGO : ▻https://github.com/ben-eb/gulp-svgmin
    – une interface graphique pour SVGO : ►https://jakearchibald.github.io/svgomg

    #SVG #gulp #sprite #SVGO #optimisation

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 9/05/2019
    1
    @tofulm
    1

    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 :

    npm i gulp gulp.spritesmith --save

    Exemple de fichier gulpfile.js minimum :
    var gulp = require('gulp'),
       spritesmith  = require('gulp.spritesmith')

    gulp.task('sprite', function () {
       var spriteData = gulp.src('img_entree/*.png')
           .pipe(spritesmith({
               /* this whole image path is used in css background declarations */
               imgName: 'img/sprite.png',
               cssName: 'css/sprite.css'
           }));
       return spriteData.pipe(gulp.dest('./'));
    });

    #sprite #gulp #css

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 7/05/2019
    1
    @spip
    1

    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

    • #ICON
    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 7/05/2019

      En lien avec ▻https://seenthis.net/messages/773610 ;)

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 15/04/2019
    5
    @b_b
    @tofulm
    @rastapopoulos
    @arno
    @jeanmarie
    5

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 7/08/2017
    2
    @tofulm
    @nicod_
    2

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @baroug
    baroug @baroug 12/10/2015

    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

    baroug @baroug
    Écrire un commentaire
  • @africasacountry
    Africa’s a Country [RSS] @africasacountry 22/10/2014

    #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

    • #rapper
    Africa’s a Country [RSS] @africasacountry
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 3/06/2014
    2
    @la_taupe
    2

    #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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @africasacountry
    Africa’s a Country [RSS] @africasacountry 23/05/2014

    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

    Africa’s a Country [RSS] @africasacountry
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 23/11/2011

    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

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 2/09/2011

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 9/08/2011

    #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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 11/07/2011

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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 11/07/2011

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 22/12/2010

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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 13/08/2010

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 22/04/2010

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

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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @0gust1
    0gust1 @0gust1 CC BY-NC 28/04/2009

    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

    0gust1 @0gust1 CC BY-NC
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 27/03/2008

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 28/09/2007

    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

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire

Thèmes liés

  • #css
  • #sprites
  • #performance
  • #dev
  • #image
  • #web
  • #optimisation
  • #http
  • #clevermarks
  • #svg
  • #générateur
  • #groupe
  • #mémoire
  • #webperf
  • #gulp
  • person: david b. calhoun
  • #background-position
  • #outil
  • #perceived
  • #slower
  • #base64
  • #requests
  • #music
  • #sahiphop2014
  • #shell
  • #sprite_rap_activity_jam
  • #yfm
  • #39
  • #width
  • #pseudo_elements
  • #height
  • #google
  • #patterns
  • #cache
  • #browser
  • #ajax
  • #javascript
  • #after
  • #webdev
  • publishedmedium: smashing magazine