Diskusijų forumai
Diskusijų forumai     Kompiuterinė grafika, dizainas     Tinklalapių dizainas     Kaip padaryti web'o turinio srities gradient foną?


Kaip padaryti web'o turinio srities gradient foną?

WipeR
Bendruomenės narys

 
Tema paskelbta: 2010-07-20 22:21:02
Sveiki, iškilo dar vienas toks klausimėlis. Šiuo momentu koduoju turinio(content) bloko foną. Mąstau kaip padaryti besitęsiantį turinio(content) foną jei per Photoshop'ą jį padariau su gradient(iš šviesiai pilkos į tamsiai pilką).

(Jei turinys(content) būtų vientisos spalvos(solid color) tai viskas aišku: nukerpi viršų(#content_top), juostelę vidurio, kurią su css repeat'insiu(#content), ir apačią(#content_bottom).)

Tačiau kaip su gradient fonu? 
 


Atsakymai į temą

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-07-22 15:32:28 [#1030] Atsakymo ID: 1030 Ilgalaikė nuoroda į atsakymą #1
Gali tiesiog iškirpti visą „gradientą“ vertikaliai ir kažkiek pikselių horizontaliai:



O tada kartoji fono paveikslėlį x ašyje (repeat-x). Ar teisingai supratau?
WipeR
Bendruomenės narys

 
Atsakymas parašytas: 2010-07-22 15:37:41 [#1031] Atsakymo ID: 1031 Ilgalaikė nuoroda į atsakymą #2
Bet man taip netinka, supranti, man vidurinė bloko dalis turi plėsti kartu su tekstu, o šiuo atveju height bus fiksuotas dydis.
Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-07-22 15:40:34 [#1033] Atsakymo ID: 1033 Ilgalaikė nuoroda į atsakymą #3
Tada nelabai suprantu, ko tau tiksliai reikia. Jeigu gali, pabandyk tai pavaizduoti grafiškai.
WipeR
Bendruomenės narys

 
Atsakymas parašytas: 2010-07-22 15:58:02 [#1035] Atsakymo ID: 1035 Ilgalaikė nuoroda į atsakymą #4
Aiškiau suformuluosiu klausimą, Tu man parodei kaip reikia gradient repaet'int x ašimi(horizontaliai) , o man reikia, kad gradient kartotusi y ašimi(vertikaliai).

Pask. redagavo WipeR (2010-07-22 16:10:44), redaguota kartų: 1

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-07-22 16:37:33 [#1036] Atsakymo ID: 1036 Ilgalaikė nuoroda į atsakymą #5
Na, tokiu atveju labai daug išeičių neturi.

Vienas variantas — naudoti CSS3 gradients, bet to, žinoma, senesnės naršyklės nepalaiko.

Taip pat gali daryti labai didelį paveikslėlį vertikalios ašies atžvilgiu (tarkime, kokius 2000px), kad nereiktų kartoti fono paveikslėlio, tačiau visas „gradientas“ matysis tik tada, jeigu bloko aukštis pasieks tuos 2000px.

Gali dar bandyti užfiksuoti fono paveikslėlį su parametru fixed

#blokas { background: url(../immages/gradient.png) no-repeat top fixed;


Dabar nelabai turiu laiko aiškinti, kaip šis parametras veikia, tačiau gali pats išbandyti ir pasižiūrėti.

Paskutinis variantas, kurį būtų galima taikyti — nurodyti fono spalvą. Tarkime, kad pačioje „gradiento“ apačioje yra spalva #666666, taigi:

#blokas { background: #666 url(../images/gradient.png) no-repeat;


Kai baigsis fono paveikslėlis, toliau matysi tik tą spalvą (#666), tad bus gražus perėjimas, tačiau spėju, kad toks variantas netinka, kadangi tu nori „gradiento“ per visą bloko aukštį.
WipeR
Bendruomenės narys

 
Atsakymas parašytas: 2010-07-22 18:14:09 [#1039] Atsakymo ID: 1039 Ilgalaikė nuoroda į atsakymą #6
OOOOOO dėkui dėkui, visus variantus supratau, labai padėjai! Tą pirmą žinojau, trečia buvau primiršęs, o antras būdas labai geras! Dėkui dar kartelį! Tikiuosi pravers tai ir kitiems forumo skaitytojams.
Pask. redagavo WipeR (2010-07-22 18:16:30), redaguota kartų: 1