To jsem jednou potÅ™eboval udÄ›lat barevný pÅ™echod. Ale ne GIMPárnu na jedno použitÃ, nóbrž pÅ™echod dynamický, nÄ›co jako že by se zavolal soubor a vono se to vygenerovalo a tvářilo jako obrázek. S PHP a knihovnou GD je vÄ›c snadná a pÅ™idá-li se i mod_rewrite, pak i velmi sluÅ¡ivá. LaÅ¥ku jsem si nastavil zhruba do téhle výše:
Co se týÄe bodu 1, skript dostane seznam klÃÄových barev a velikosti mezer které má mezi nimi proložit pÅ™echodem. Jako oddÄ›lovaÄ takového seznamu jsem zvolil znak VaÅ¡e komentáře mÄ› pÅ™imÄ›ly zmÄ›nit oddÄ›lovaÄ na spojovnÃk "-" KlÃÄové barvy se zapisujà šesti velkými hexadecimálnÃmi ÄÃslicemi, mezery desÃtkovÄ›. Aby se mezera odliÅ¡ila od barvy, může mÃt maximálnÄ› pÄ›t cifer – v praxi se použijà nanejvýš ÄtyÅ™i. Zbývá jeÅ¡tÄ› rozliÅ¡it orientaci (bod 2). Tak co tÅ™eba jednÃm malým pÃsmenem na zaÄátku? A bude to buÄ + který asi nejlépe znázorňuje spojovánÃ.x pro horizontálnÄ› se opakujÃcà pÅ™echod nebo y pro pÅ™echod s opakovánÃm vertikálnÃm.
Bod 3: Skript na konci, pokud je to možné, uložà výsledek do souboru. Název souboru má stejný tvar s jakým pracuje mod_rewrite, takže pÅ™i pÅ™ÃÅ¡tÃm požadavku už soubor fyzicky existuje a má pÅ™ednost. Když vÃm, že obrázek potÅ™ebuju jenom jednou a je zbyteÄné ho cachovat (tÅ™eba jako v testovacÃm rámeÄku nÞ), pÅ™idám na konec parametr ?tmp. Jelikož parametry nejsou souÄástà názvu souboru, majà cachované soubory opÄ›t pÅ™ednost. A proÄ je to cachovánà tak nechutnÄ› důmyslné? Protože pÅ™episovánà URL je nastaveno case-sensitive, takže v cache nevzniknou duplicity – každý pÅ™echod je jednoznaÄnÄ› identifikován. Nuže a bod 4 vyÅ™eÅ¡Ãme omezenÃm délky celého pÅ™echodu – dejme tomu na 5000px?
Jak je popsáno výše, na zaÄátku musà být malé pÃsmeno x/y, za nÃmž následujà klÃÄové barvy a ÄÃselnÄ› vyjádÅ™ené mezery mezi nimi. Pokud mezi barvami prolnutà být nemá (tedy nulová mezera), pak se zapÃÅ¡e ihned dalšà barva, napÅ™. yFF00FF-00FF00 jsou fialový a zelený pixel vedle sebe. Jednoduchý gradient pro svislé opakovánà (y) zÃskáme tÅ™eba pod tÃmhle názvem:

Délku celého pruhu spoÄÃtáme souÄtem klÃÄových barev (3) a mezer mezi nimi (5+2). Pruh je tedy dlouhý 10px.
gradient/ si zkopÃrujete kam je pohodlnogradient/y00FF00-300-0000FF.png je 302px dlouhý pÅ™echod od zelené k modréKdo náhodou nemá k dispozici mod_rewrite, může skript volat pÅ™Ãmo: gradient/gradient.php?repeat=y&grad=00FF00-300-0000FF
… když by staÄil 1px? TuÄňákům nestaÄÃ. A možná i tygrům, pÅ™iznám se, že jsem po tom pÅ™ÃliÅ¡ nepátral. Problém je v hladkosti pÅ™echodu. ZatÃmco pod Windows je opakovaný pÅ™echod stejný pÅ™i jakékoli Å¡ÃÅ™ce pruhu, FF/Linux ukáže 1px proužek pÅ™i nižšà barevné hloubce jako nekoukatelnÄ› ohyzdné Äáry. ZjevnÄ› nejprve obrázek proložà a teprve potom ho opakuje. Je tedy jasné, že jednorozmÄ›rný pÅ™echod nemůže proložit nikterak rozmanitÄ›, ovÅ¡em dostane-li vÄ›tšà plochu, stane se s nÃm pÅ™ibližnÄ› tohle:

Opakovaný ÄernobÃlý pÅ™echod pÅ™i 8-bitové hloubce (FF/Linux)
K pÄ›ti pixelům jsem doÅ¡el po sáhodlouhém zkouÅ¡enÃ. VÅ¡e do 3px je bÃda, 4px zaÄÃnajà být pÅ™ijatelné a pÄ›t – bingo! Vyššà hodnoty samosebou pÅ™inášejà výsledek o Å¡petku lepÅ¡Ã, ale to už je pÅ™ÃliÅ¡ na úkor velikosti souboru (aÄkoli nijak drasticky, PNG komprese se celkem vytáhla). A protože tÄ›ch 5px je krásná a vždy použitelná hodnota, dal jsem ji na pevno do hlaviÄky skriptu namÃsto do URL, které je tÃm jednoduššÃ. PÅ™ipomÃnám, že fujtajblproužkový problém se týká jen nÞšÃch barevných hloubek (do 16 bitů).
body {
background:url('gradient/x664477-600-CC99FF.png') left top repeat-x fixed #CC99FF;
}
Znak "+" v názvu souboru je nehorázná prasárna.
To plus mi tam vadi take, ale jinak je to velmi pekny napad. Dik!
No, tÅ™eba pomlÄka by byla rozhodnÄ› lepÅ¡Ã, ne že by plus byl proti nÄ›Äemu (tipuju až na dos...a nÄ›jakou jinou dnes už exotiku), ale proÄ se nedržet takÅ™ka standardnÃho [a-z] -_. že...
DobÅ™e, plus půjde pryÄ, zvažuju mezi spojovnÃkem a podtržÃtkem:
yFF0000-250-00FF00-250-0000FF.png
yFF0000_250_00FF00_250_0000FF.png
---------
DoplnÄ›no: VÃtÄ›zem se stává spojovnÃk.
PÄ›kný Å™eÅ¡enÃ, kámen úrazu ale nastane když mám element který se natahuje podle obsahu a potÅ™ebuju tam gradient, tzn. že neznám jeho velikost.
[7] Na tohle je tÅ™eba vzÃt JavaScript a generovat pruh dlouhý offsetHeight Äi offsetWidth daného elementu. Bez použità JS můžeme prvku dát gradient vhodné univerzálnà délky, ten lze ostatnÄ› poskytnout i jako non-JS alternativu.
Tak tohle je fakt nářez...
na googlu sem zadal:
php gd přechod
a bingo...hned na prvnÃm mÃstÄ› sem naÅ¡el tenhle script...
Super Práce Honzo ;-)
A tohle je pÄ›kné pane, to se mi lÃbÃ, to já si pÅ™ebuÅ¡Ãm do Pythonu + PIL, to je Å¡ikovné, dÃky za inspiraci.