Autor Zpráva
Kanělála
Profil *
Hezký den,

potřeboval bych pomoci s převedením tohoto obrázku do CSS. Vůbec si nevím rady.

Děkuji


Nejsem si jistý, zda je odkaz zadán dobře. Když tak zde - http://www.imghosting.cz/images/42white_background_servi.bmp
Trejpa
Profil
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
Profil *
Paráda, přidal jsem tam tenhle řádek - background-image: linear-gradient(to top, #FFFFFF 0px, #c9eeff 0px, #FFFFFF 100%); a je to super
Bubák
Profil
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
Profil *
Oh jistě. A jak by jste doporučil to udělat? To pozadí obrázkem udělat nelze, protože by se neroztahovalo podle obsahu.


Snad z toho nevyzní ironie, opravdu stojím o radu.
Tomáš123
Profil
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:
background: url(cesta-ku-obryzku/obrazok.png) repeat-x 0 0 #fff;

Č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:
background: url(cesta-ku-obryzku/obrazok.png) repeat-x 0 0 #fff; 
/* /popis podľa poradia/ cesta ku obrázku, nastavenie opakovania v ose x, pozícia obrázka zhora a zľava a farba (tá farba je nastavená pre celý div, ale obrázok ju prekryje)*/

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).
Kcko
Profil
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.
Kubo2
Profil
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.
Chamurappi
Profil
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í.
Tomáš123
Profil
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á.
Kcko
Profil
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...
Relax
Profil *
http://jsfiddle.net/h8gv2/
Taurus
Profil
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.
Tomáš123
Profil
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.
Bubák
Profil
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í.
Taurus
Profil
Tomáš123:
Prečo?

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

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: