Gradient Content Box

[Verwijderd]

Ik heb gegoogled & vele forums afgezocht in de hoop om een antwoord te vinden op mijn vraag maar helaas, geen volledig succes. Ik wil dus een content box op mijn website maken met daarin een gradient. Wanneer ik er een lang verhaal in ga typen wil ik dat deze mooi & netjes uitrekt net als een normale content box zonder gradient. Mijn vraag is; hoe realiseer ik dit? Valt dit alleen te realiseren door middel van een SVG Gradient, of zijn er nog alternatieven? Zo niet; kan ik deze SVG gradient netjes wegwerken in een DIV?

[VincentG]

Een gradient image als achtergrond plaatje en tevens een egale achtergrond kleur instellen, dezelfde kleur als onderste tint/kleur van gradient. Als je dan een grote lap tekst hebt, loopt de gradient mooi over in die egale kleur. Je krijgt dan iets als:
.gradientBox { background: #fff url(gradient.gif) top repeat-x; }

[Verwijderd]

Dat ziet er vrij simpel uit. Ik ga er niet van uit dat mijn content box meters gaat stretchen, maar mocht dit wel gebeuren ziet het er dan nog een beetje redelijk uit?

[qanar]

Dat is net het probleem, als je de gradient zelf gaat strekken ziet het er uiteindelijk lelijk uit. Als je het doet zoals vincentG zegt krijg je een uiteindelijk toch nog een egale achtergrond maar dan wel een die uit een gradient komt.

[Verwijderd]

Ok ik snap het. Wel jammer dat je dan in principe altijd dezelfde gradient grootte hebt, dit kan in sommige layouts het effect wegnemen wat je uiteindelijk wilt bereiken. Nu heb ik er zelf nog nooit mee gewerkt dus ik weet niet hoe het in de werkelijkheid eruit komt te zien, maar ik ga er vanuit dat dit de enige simpele manier is om te bereiken wat ik wil realiseren? Het SVG gebeuren is dus het enige alternatief met betrekking tot gradients? En deze SVG gradient stretched dan zover uit als je wilt (http://www.w3schools.com/svg/svg_grad_linear.asp) ?

[moozzuzz]

Uit je reactie lijkt het alsof je toch nog niet helemaal mee bent:

je hebt eigenlijk een box met een gradient-background-image (vb van 200pix hoog ; van blauw tot wit). Als je box groter wordt dan de 200pix in dit voorbeeld dan wordt die "aangevuld"/"uitgerekt" met wit. Dit wit komt natuurlijk niet uit de image maar uit de definitie van je background-color (i/h vb: wit).

code:

000px - blauw
100px - lichtblauw
200px - wit
300px - ook wit
400px - ook wit
500px - ook wit

Je kan die gradient maken met eender welk bestandsformaat (theoretisch zelfs een bmp; maar dat is nu niet meteen een tip ;-). PNG wordt ook vaak gebruikt!

[demichiel]

Ik denk dat jij zijn vraag niet helemaal begrijpt, hij wil de gradient niet aanvullen, maar stretchen.

Ideaal is de background-size property van CSS3 die je dan op 100% kon zetten.

Deze is er echter nog niet in de huidige standaard, CSS2.

Wat je misschien wel zou kunnen doen is met z-index werken. Dan zou je een image kunnen stretchen naar 100% (wel een hoge resolutie afbeelding gebruiken dan) en de content-div 'erboven' plaatsen.

Of dit ook echt werkt zul jij even moeten testen, misschien zie ik iets grandioos over het hoofd.

[moozzuzz]

demichiel schreef op donderdag 02 april 2009 @ 12:05:
Ik denk dat jij zijn vraag niet helemaal begrijpt, hij wil de gradient niet aanvullen, maar stretchen.

my bad, je hebt gelijk

[Gersomvg]

Je kan natuurlijk wel met javascript kijken wat de hoogte is; met php gd een gradient van die hoogte maken en die als achtergrond instellen.

Is alleen niet zo netjes xD

[Chillosophy]

gersompie schreef op donderdag 02 april 2009 @ 13:40:
Je kan natuurlijk wel met javascript kijken wat de hoogte is; met php gd een gradient van die hoogte maken en die als achtergrond instellen.

Is alleen niet zo netjes xD

Plus, als een gebruiker de resolutie van het schermpje aanpast zit je met hetzelfde probleem

[Bosmonster]

demichiel schreef op donderdag 02 april 2009 @ 12:05:
Ik denk dat jij zijn vraag niet helemaal begrijpt, hij wil de gradient niet aanvullen, maar stretchen.

Ideaal is de background-size property van CSS3 die je dan op 100% kon zetten.

Deze is er echter nog niet in de huidige standaard, CSS2.

Als je dan toch met CSS aan de slag gaat, pak dan gelijk de CSS gradient

Magoed.. heb je eigenlijk nog niks aan momenteel dus.

Ik zou eerlijk gezegd het idee laten varen en gaan voor de standaard oplossing van een gradient die uitloopt naar de achtergrondkleur. Daar merk je in de praktijk zo goed als niks van.

[Verwijderd]

Ik moet eerlijk bekennen dat ik in de basis zit kwa kennis in het coding gebied dus ik zal eerst even goed moeten googlen om te kunnen proberen wat jij me verteld. Verder denk ik ook dat mocht er een mogelijkheid bestaan om het wel te kunnen verwezenlijken dat negen van die tien browsers het toch niet ondersteunt. Ik denk dus dan maar dat ik het bij VincentG zijn manier houd en in de toekomst zal zien of het wel mogelijk is. Bedankt in ieder geval :)!