ygto / php-css-sprite-atlas

generate css and sprite atlas

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

it concatenate the sprites and create sprite atlas per director

example

$path = './sprites';

$atlas = new \CssAtlas\SpriteAtlas\SpriteAtlas();

$atlas->loadFromDir($path);

$atlas->generateImageAndCss('./dist');

output

dist/sprites.png dist/sprites_brands_music.png dist/sprites_brands_social.png
dist/sprites.png dist/sprites_brands_music.png dist/sprites_brands_social.png

sprites_brands.css

 .sprites_box:after {
                    background-image: url('sprites.png');
                    display: inline-block;
                    width: 128px; 
                    height: 128px;
                    content:"";
                    background-position: left 0 top -0px;
                    
                }
                
                .sprites_circle_dot:after {
                    background-image: url('sprites.png');
                    display: inline-block;
                    width: 256px; 
                    height: 256px;
                    content:"";
                    background-position: left 0 top -128px;
                    
                }

About

generate css and sprite atlas


Languages

Language:PHP 96.5%Language:HTML 3.5%