Css sprites filter

[janmarek]

Bylo by hezké mít filtr na css sprity. Představoval bych si to asi tak, že

sprite('../image/logo.png')

v css se převede cca na

url('sprite-neco.png') 50px 0px

a vygeneruje se ten obrázek. Ale je to moc práce, takže očekávám, že mi někdo šikovný pošle pull request ;)

[chemix]

jestli mohu pridat dopozadavek :-) tak je to spriteVertical() & spriteHorizontal()

[chemix]

No jde o to ze pokud delas sprite tak beru 3 druhy sprite souboru, prvni klasicky je ikonkovy ( titulky, no proste obdelniky co se neopakuji) a muzes je hazet vedle sebe do radku a jakmile uz jich tam je dost zacnes novej radek http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png )

Dalsi dva jsou pro opakovaci textury a to samostatne pro vertikalni a horizontalni aby se mohlo nastavit background-repeat.

• jako parametr bych pridal i nepovinny parametr sprite('../image/logo.png', 'spriteName') pro pripadnou moznost optimalizace ( index, settings, ... )

[norbe]

Pokud by se do toho chtěl v budoucnu někdo pustit, dávám odkaz na algoritmus v c# - http://www.codeproject.com/Articles/210979/Fast-optimizing-rectangle-packing-algorithm-for-bu (původně jsem se do toho chtěl pustit sám, ale zabralo by to více času, než kolik mám k dispozici)

[ghost]

Někdy v průběhu tohoto nebo příštího týdne se tomuto budu věnovat.

[fprochazka]

:+1:

[janmarek]

cool

[ghost]

Trošku jsem se seknul, chtěl bych to dát k diskusi. Syntax sprite navrhuji změnit na něco jako je toto:

sprite: url(../images/icon.png);

Opakování kvůli lištám a podobně:

sprite-repeat: repeat-x | repeat-y | repeat;

Případně:

sprite: url(...) repeat-x;
sprite: url(...) repeat-y;
sprite: url(...) repeat;

Konstrukce sprite(...) vyvolá v editorech nejspíše dost často syntax error, zatímco díky miliardám vlastností projdou ty navrhované pouze s warningem.

Dále, ne vždy se hodí mít element veliký přesně jako obrázek s ikonou. Řeší to vlastnost clip. Ta je podporována všude a v IE8+. Otázka, jestli to teda využívat a případně jak na to připravit syntax.

[janmarek]

nešlo by to nějak přes background-image a komentář (aby to bylo kompatibilní s normálním css)

[ghost]

Možná by šlo něco jako url(sprite:...).