Převedení obrázku do CSS

Kanělála:
Jestli to má vypadat přesně podle obrázku, tak ten obrázek ořízni a použij na pozadí bloku, kterému nastavíš stejné rozměry.

Pokud dostačuje přibližná podoba, stačí na to rámečky a barevné pozadí nastavené ve stylech.

Kanělála:
„Paráda“
Pro 73 % návštěvníků, 17 % návštěvníků má smůlu, a to i když přidáš řádky s vendor prefixy.
http://caniuse.com/#search=linear-gradient doporučuji rozkliknout Show all versions

Kanělála:
Ak hovoríš o horizontálnom opakovaní, môžeš si vytvoriť obrázok široký jeden, dva pixely a ten nechať opakovať v ose x. Zápis do CSS by vyzeral takto:

Čo sa týka zvislého opakovania, môžeš si urobiť obrázok tak dlhý, ako dlhý chceš mať prechod a potom nastaviť farbu. Zápis do CSS by vyzeral takto:

V prípade, že bude objekt kratší ako prechod, prechod sa nezobrazí celý. Ale ak vytvoríš prechod podobný tomu na obrázku, nemala by nastať takáto situácia.

Takto nejako by mohol obrázok vyzerať (mohol byť aj užší, ale chcel som aby bolo vidieť farby) /75 x 20/:


Keby si chcel presne tento obrázok, tak tu je odkaz: http://postimg.org/image/i2mp7fyoj/ (pre tento obrázok platí zápis uvedený na 3. riadku).

Bubák:
Pokud bude chytrý, tak použije jako fallback barvu podobnou tomu gradientu. Holt někdo se starším prohlížečem neuvidí gradient.

... řešit to obrázkem .. ehm.

Dodělej si prefixy , nastav jako první barvu pro fallback, případně se podívej na komplexní zápis http://www.colorzilla.com/gradient-editor/ a neřeš to proboha obrázkem.

Tomáš123:
„Čo sa týka zvislého opakovania, “
mám taký pocit, že sa týka osi y, nie x — t.j. repeat-y.

Reaguji na Kcka:
„neřeš to proboha obrázkem“
Proč ne? Řešení obrázkem nejen, že funguje napříč větším množstvím prohlížečů, ale je většinou i datově menší než oprefixovaná CSS příšera (díky struktuře PNG formátu se totiž barevné přechody skvěle komprimují).


Reaguji na Kanělálu:
Já bych to řešil takhle. V Exploreru 8 (a jiných starších prohlížečích neznajících background-size) se gradient nebude roztahovat, pokud bude blok vyšší — to je jediná vada na kráse obrázkového řešení.

Kubo2:
„mám taký pocit, že sa týka osi y, nie x“
Nie, týka sa to osi x. Ešte raz si to prečítaj. Ja som tam písal o tom, že keď skončí obrázok, ostane farba. Keby mal obrázok repeat-y, tak by nikdy neskončil a vyzeral ohavne lebo jeho začiatok je úplne iný ako koniec. Ale je pravda, že ja som to napísal trochu na dvakrát...Snáď z toho Kanělála vyšiel.

Kcko:
S tvojim riešením nikdy nedosiahneš takú podporu v prehliadačoch ako v prípade obrázku. A zas až toľko nevýhod obrázok nemá.

Chamurappi:
Protože je to otravné, zdržující a v mnoha případech zbytečné.

Tomáš123:
Obrázek mu nevýhodu, že jej neustále musíš připravovat (vytvářet, řezat..)
Co je mi do starších IE? Tak holt nebude gradient, ale barva...

http://jsfiddle.net/h8gv2/

Kcko:
„Obrázek mu nevýhodu, že jej neustále musíš připravovat (vytvářet, řezat..)“

Otázka chvilky, navíc kromě gradientu můžu kreslit cokoli, což v CSS nejde. Nemusím ani studovat co se kde jak (ne)zobrazuje.

Tomáš123:
„môžeš si vytvoriť obrázok široký jeden, dva pixely“

Určitě víc.

Taurus:
„Určitě víc.“
Prečo? Vo výsledku nebude rozdiel, či už bude obrázok široký 2 kilometre alebo iba 1 pixel. Samozrejme hovoríme o situácii, keď má obrázok iba vertikálny prechod.

Kcko:
„neřeš to proboha obrázkem“
Mi se obrázek líbí:
http://kod.djpw.cz/dtdb
http://kod.djpw.cz/dtdb-

Kubo2:
„mám taký pocit, že sa týka osi y, nie x — t.j. repeat-y.“
Použil jsem repeat-x.

Tomáš123:
> „Určitě víc.“
> Prečo?
Nemám to na čem vyzkoušet, ale už se tady probíralo vícekrát, že na pomalých zařízeních se použití širšího obrázku pozná v rychlejším zobrazení.

Tomáš123:
„Prečo?“

Už se to tu párkrát řešilo...