Beste aanpak design website

[lesleyudw]

Het verhaal is alsvolgt. Mij is gevraagd om een website te maken voor een visagiste. Nou heeft de betreffende persoon reeds een visite kaartje en eigenlijk wil ze dat haar website hier veel op gaat lijken. Het visitekaartje is hieronder te zien.



Op de plaats waar nu de tekst staat, wil ik de content hebben. Ook wil ik de kleuroverloop op de een of andere manier krijgen. Maar nu is de vraag hoe zal ik dit aanpakken? Het liefst wil ik het geheel beeldvullend.

Zelf dacht ik eraan om de content in via een div op zijn plaats te krijgen. Maar hoe hou ik die kleuroverloop ook zo mooi. Zeker rekening houdend met verschillende resoluties.

Alvast bedankt voor advies!!

Les

[Verwijderd]

Die gradientkleur kun je met een javascript maken, dit werkt echter vaak alleen onder
IE. Even op javascript gradient googlen vind je zo.

[TwoR]

kan je niet in het midden van de pagina een divje maken waarin je de overloop inzet en de content. Dan kan je aan de linkerkant de pagina laten uitvullen met de lichte kleur en aan de rechterkant met die donkere kleur.

Verwijderd schreef op donderdag 10 augustus 2006 @ 10:07:
Die gradientkleur kun je met een javascript maken, dit werkt echter vaak alleen onder
IE. Even op javascript gradient googlen vind je zo.

Ik zou dit niet met JS doen maar gewoon een mooi plaatje knippen en deze als achtergrond zetten.

[ Voor 44% gewijzigd door TwoR op 10-08-2006 10:09 ]

[posttoast]

Waarom javascript gebruiken voor iets eenvoudigs als een achtergrondkleur?

Je zou je site in een container kunnen zetten met een randje eromheen. Dan maak je gewoon een achtergrondplaatje met dat gradiëntje. Ook kun je in het midden een gradiënt hebben en dan de buitenste linker en de buitenste rechterkleur door laten lopen. _{Wat TwoR zegt dus}

[ Voor 4% gewijzigd door posttoast op 10-08-2006 10:10 ]

[lesleyudw]

posttoast schreef op donderdag 10 augustus 2006 @ 10:09:
Waarom javascript gebruiken voor iets eenvoudigs als een achtergrondkleur?

Je zou je site in een container kunnen zetten met een randje eromheen. Dan maak je gewoon een achtergrondplaatje met dat gradiëntje. Ook kun je in het midden een gradiënt hebben en dan de buitenste linker en de buitenste rechterkleur door laten lopen. _{Wat TwoR zegt dus}

Die oplossing met dat randje, die wil ik eigenlijk zoveel mogelijk vermijden. Ik zou het liever beeldvullend hebben.

En de oplossing met de container in het midden is opzich wel een goed idee, maar dan krijg ik natuurlijk niet dat "halve gezicht" geheel tegen de linkerkant. Maar kan natuurlijk ook alleen de rechterkant alleen eventueel de rechterkant opvullen... hmm das denk ik wel te doen!!

[André]

Zet je achtergrond tegen de linkerkant aan met een gradient van pakembeet 1000px, en daarna een achtergrond kleur instellen die hetzelfde is als de meest rechter pixel van de gradient.

[Not Pingu]

De gradient knip je uit en zet je als background op de body:

Cascading Stylesheet:

body
{
    background: #roze url(gradient.jpg) repeat-y 200px top;
}

content in een divje dat het halve gezicht als achtergrond krijgt:

Cascading Stylesheet:

div.content
{
    background: transparent url(halve-gezicht.jpg) no-repeat top left;
    padding-left: 200px;
}

Zoiets?

[ Voor 0% gewijzigd door Not Pingu op 10-08-2006 10:41 . Reden: padding ipv. margin ]

[moozzuzz]

Not Pingu schreef op donderdag 10 augustus 2006 @ 10:39:
Goede oplossing

Was al een gans eind aan 't typen toen soortgelijke opl. voorkwam. Met padding kan je dan je tekst op z'n plek krijgen.

[Verwijderd]

die gradient.jpg moet je wel groot maken zodat ook hoge resoluties een schermvullend geheel krijgen.
nadeel is dat kleinere resoluties dan maar een gedeelte van de gradient gaan zien.

[HawVer]

lesleyudw schreef op donderdag 10 augustus 2006 @ 10:17:
[...]


Die oplossing met dat randje, die wil ik eigenlijk zoveel mogelijk vermijden. Ik zou het liever beeldvullend hebben.

En de oplossing met de container in het midden is opzich wel een goed idee, maar dan krijg ik natuurlijk niet dat "halve gezicht" geheel tegen de linkerkant. Maar kan natuurlijk ook alleen de rechterkant alleen eventueel de rechterkant opvullen... hmm das denk ik wel te doen!!

Op 1280x1024 zou ik niet blij zijn met een enorme gradient over het scherm. De tekst tegen een gradient achtergrond maakt het niet leesbaarder. Ik zou er voor kiezen om de content in blok te plaatsen met een effen kleur en een vaste breedte. Achter de content zou je de gradient achtegrond kunnen gebruiken.
.edit
Als je namelijk van links naar rechts over de tekst heen leest veranderd steeds het contrast tussen tekst en achtergrond. Dat is vermoeiend voor je ogen omdat die zich steeds moeten aanpassen.

[ Voor 10% gewijzigd door HawVer op 10-08-2006 12:24 ]

[wackmaniac]

Ik zou gewoon lekker de oplossing van Not Pingu gebruiken, maar dan niet met een gradient van 1000px. Maak lekker een gradient van een 300px ofzo en laat de rest gewoon in de rechter kleur uitvullen. Hoef je ook geen randje te plaatsen.

Een andere oplossing is toch centreren en ipv een randje een mooie lijn links van het halve gezicht plaatsen. Dan staat er geen randje om, maar is wel het halve gezicht afgescheiden van de rest van de pagina.

[Fuzzillogic]

Verwijderd schreef op donderdag 10 augustus 2006 @ 12:09:
die gradient.jpg moet je wel groot maken zodat ook hoge resoluties een schermvullend geheel krijgen.
nadeel is dat kleinere resoluties dan maar een gedeelte van de gradient gaan zien.

Gebruik ajb geen jpeg voor een gradient. Wordt niet mooi. Je kunt met CSS wel een achtergrond maken die altijd "full size" is. Ik gebruik op mijn website ook zo'n grap om de achtergrond even groot te krijgen als het venster. Waarschijnlijk moet er voor IE6 dan wel wat aan gehackt worden

Een andere optie is misschien Canvas. Ja IE6 snapt dat niet, maar IE6 heeft zijn eigen vectorgraphics-taaltje (VML, zelfs een open standaard!). Er is een javascript waarmee je IE6 (beperkte) Canvas-dingen kunt laten doen.