Schaduw op verloop achtergrond; hoe inelkaar zetten??

[Zerora]

Ik ben inmiddels aardig bekend met het webdevven/designen etc.. Echter is 1 ding wat ik nog steeds afvraag.

Momenteel ben ik bezig met een website. Deze site bestaat uit een rechthoek met afgeronde hoeken. Dit rechthoek heeft een schaduw gekregen om wat diepte in de site te creëren. Nu heb ik echter ook een achtergrond met een verloop (gradient) ingesteld.

Hoe kun je zoiets nu het eenvoudigste in elkaar zetten of slicen?

Ik heb hieronder de website nog eens eenvoudig gevisualiseerd in een afbeelding.



Ik weet wel een aantal methodes om zoiets in elkaar te zetten, maar ik heb het idee dat dat te omslachtig is en dat dit dus veel makkelijker kan.

Optie 1: Het geheel als 1 grote achtergrond.
Je stelt afgeronde rechthoek in als achtergrond en maak daarboven een contentlaag.

Voordeel is dat de vorm eenvoudig aan te passen valt. Nadeel is dat je dan 1 afbeelding hebt die alles bepaald (grootte enzo), daarnaast is zo'n plaatje nog eens groot en laad langer.

Optie 2: In stukken snijden
Je snijdt de afgeronde rechthoek in 9 vlakken: 4 hoeken, 4 randen, 1 middenstuk (contentgedeelte).
Je slaat ieder stuk als een aparte afbeelding op.

Voordeel hiervan is dat afbeelding een klein zijn en snel geladen worden. Nadeel is nog steeds dat maar 1 grootte hebt omdat het verloop nog in de plaatjes terug te zien is.

Optie 3: In stukken snijden + transparantie
Je snijdt de afgeronde rechthoek in 9 vlakken: 4 hoeken, 4 randen, 1 middenstuk (contentgedeelte).
Je slaat de 4 hoeken (+middenstuk) als een normale afbeelding op. De randen sla je enkel de schaduw op als een transparante PNG file.

Voordeel hiervan is dat afbeelding klein zijn en snel laad en dat de grootte van de site vergrootbaar/rekbaar is. Nadeel is browser compatible, omdat IE geen png transparantie kent. Is wel op te lossen door een png-hack.

---

Ik wil het even tot deze 3 beperken wetende dat er veel meer methodes zijn waarop dit mogelijk is.
Wat ik eigenlijk wil weten is welke methode, het makkelijkste is, het minste in beslag neemt en de meeste opties met zich meekrijgt?
Alleen met plaatjes doen, of ook met html, javascript en dergelijke??

Iemand die hier nog een slimme manier heeft voor dit?

[Niakmo]

Je moet wel rekening houden dat door gebruik te maken van die PNG hack Ancher elementen niet meer aanclickbaar zijn in IE. Dus je links en buttons zullen niet meer werken.

[Verwijderd]

Niakmo schreef op woensdag 23 mei 2007 @ 15:35:
Je moet wel rekening houden dat door gebruik te maken van die PNG hack Ancher elementen niet meer aanclickbaar zijn in IE. Dus je links en buttons zullen niet meer werken.

Ligt er maar aan welke hack je gebruikt. Als je voor IE6 een 'filter' gebruikt kun je nog gewoon op de links klikken (soms zie je geen handje, maar dat kan "cursor: pointer" prima oplossen).

[ReLexEd]

Toevallig onlangs met hetzelfde bijltje moeten hakken...

Optie 3, en dan alleen de hoeken als PNG opslaan in verband met de PNG-hack, en de randen als background gebruiken.

Je krijgt dan alleen in de hoeken een klein stukje waar anchors niet in werken, maar de over 95% van je vak is nog wel gewoon clickable....

Feitelijk heb je dan als je de PNG-hoekjes niet zou gebruiken een niet afgerond vlak, en met de PNG's en dito hack, netjes een afgeronde....

[ Voor 18% gewijzigd door ReLexEd op 23-05-2007 15:41 ]

[Zerora]

ReLexEd schreef op woensdag 23 mei 2007 @ 15:40:
Toevallig onlangs met hetzelfde bijltje moeten hakken...

Optie 3, en dan alleen de hoeken als PNG opslaan in verband met de PNG-hack, en de randen als background gebruiken.

Je krijgt dan alleen in de hoeken een klein stukje waar anchors niet in werken, maar de over 95% van je vak is nog wel gewoon clickable....

Feitelijk heb je dan als je de PNG-hoekjes niet zou gebruiken een niet afgerond vlak, en met de PNG's en dito hack, netjes een afgeronde....

Naar mijn idee zit je dan nog steeds met de schaduw.
Kijk maar:



Links is het dan nog donker, rechts licht. Dus die tussenranden zijn het probleem, omdat daar ook schaduw loopt + een verloop. De hoeken zijn eenvoudig op te lossen.

[Mei]

De beste manier hangt af van de situatie:

1) Wat zijn de afmetingen? Moet zo'n blok altijd even breed zijn of 100% flexibel?
2) Staat de box altijd hetzelfde op de achtergrond?

Bij een gelijke breedte kan je in ieder geval al met 4 afbeeldingen werken: gradient background, box-top, box-middle en box-bottom. Als de box ook nog eens permanent op dezelfde plek boven de achtergrond zit, dan kan je de box-top en de achtergrond deels samenvoegen, waardoor je geen PNG hack meer hoeft te gebruiken.

[Zerora]

Mei schreef op woensdag 23 mei 2007 @ 15:58:
De beste manier hangt af van de situatie:

1) Wat zijn de afmetingen? Moet zo'n blok altijd even breed zijn of 100% flexibel?
2) Staat de box altijd hetzelfde op de achtergrond?

Bij een gelijke breedte kan je in ieder geval al met 4 afbeeldingen werken: gradient background, box-top, box-middle en box-bottom. Als de box ook nog eens permanent op dezelfde plek boven de achtergrond zit, dan kan je de box-top en de achtergrond deels samenvoegen, waardoor je geen PNG hack meer hoeft te gebruiken.

In mijn geval is de breedte gelijk en hangt de site permanent op dezelfde plek. In dat geval weet ik ook wel hoe dit moet oplossen.

Maar stel dat ik een site heb, waarbij de breedte/hoogte variabel moet zijn. Hoe los ik dat dan zo efficiënt mogelijk op??

[Mei]

Als je een max breedte hebt, dan kan je bijvoorbeeld de bovenhoeken combineren met een stuk bovenrand. Als je het echt honderd procent flexibel wil hebben, dan moet je alles los doen: divje per hoek, divje per rand en de content in de binnenste div.

[Zerora]

Ja ok, zover was ik ook al, maar hoe krijg je dan die schaduw mooi op je achtergrond.

[Mei]

Transparante PNG's, was hierboven ook al eens gemeld. Op deze manier kan je het ook in IE laten werken.

[DelTorro]

Misschien heb je wat aan het lab van Roger Johansson. Daarin komt onder meer de Transparent custom corners and borders naar voren. Deze maakt echter wel gebruik van Javascript en ik ben niet echt een voorstander van dit hulpmiddel wanneer het om opmaak gaat.

[Zerora]

DelTorro schreef op woensdag 23 mei 2007 @ 16:40:
Misschien heb je wat aan het lab van Roger Johansson. Daarin komt onder meer de Transparent custom corners and borders naar voren. Deze maakt echter wel gebruik van Javascript en ik ben niet echt een voorstander van dit hulpmiddel wanneer het om opmaak gaat.

Thanx, zal ik eens naar kijken. Ik laat nog wel weten of dat iets is.

[Verwijderd]

DelTorro schreef op woensdag 23 mei 2007 @ 16:40:
Deze maakt echter wel gebruik van Javascript en ik ben niet echt een voorstander van dit hulpmiddel wanneer het om opmaak gaat.

Tot zover de scheiding van structuur, presentatie en gedrag

[Splash]

Verwijderd schreef op woensdag 23 mei 2007 @ 17:10:
[...]
Tot zover de scheiding van structuur, presentatie en gedrag

Ik neem aan dat je de scheiding tussen content presentatie en gedrag bedoeld?

[Verwijderd]

Splash schreef op donderdag 24 mei 2007 @ 14:22:
[...]
Ik neem aan dat je de scheiding tussen content presentatie en gedrag bedoeld?

Nee, ik bedoel de structuur van de content, aangegeven met HTML

[sjongenelen]

over CraZaay 's opmerking:

IE 6 en PNG is toch gewoon no-go?

[Verwijderd]

Ik gebruik het meestal op deze manier: http://msdn2.microsoft.com/en-us/library/ms532969.aspx

En dan door middel van conditional comments (dat vind ik de minst lelijke hack) alleen voorschotelen aan IE <= 6. Standaard de png als background dus, en dan in een IE stylesheet overrulen met "background: none" en dat filter

[DelTorro]

Verwijderd schreef op donderdag 24 mei 2007 @ 14:46:
Ik gebruik het meestal op deze manier: http://msdn2.microsoft.com/en-us/library/ms532969.aspx

En dan door middel van conditional comments (dat vind ik de minst lelijke hack) alleen voorschotelen aan IE <= 6. Standaard de png als background dus, en dan in een IE stylesheet overrulen met "background: none" en dat filter

Zo heb ik het in het verleden ook gedaan. Het is de beste oplossing naar mijn mening maar het is desondanks niet erg elegant. Zulke obstakels kun je beter in het ontwerp vermijden denk ik.

Owja, dat links niet werken en tekst niet te selecteren is bij gebruik van dit filter: dit kan vaak worden verholpen door deze elementen de css-eigenschap:

Cascading Stylesheet:

position: relative;

mee te geven

[Verwijderd]

DelTorro schreef op donderdag 24 mei 2007 @ 16:09:
[...]


Zo heb ik het in het verleden ook gedaan. Het is de beste oplossing naar mijn mening maar het is desondanks niet erg elegant. Zulke obstakels kun je beter in het ontwerp vermijden denk ik.

Tja... als webdevver heb je daar helaas niet altijd iets over te zeggen