Beste mensen,

Ik ben momenteel bezig met een website te slicen en deze vervolgens in HTML te zetten. Nu is mijn ervaring met verschillende webbrowsers dat het soms niet al te goed uit pakt, of dat het te langzaam wordt door de verkeerde manier van slicen.

Mijn webdesign gebruikt allemaal "vakken" voor menu en zoekvelden ect.. Deze vakken zien er als volgt uit:



Dit hier boven is een voorbeeld wat ik gemaakt heb in paint. Nu ga ik meerdere van deze "vakken" gebruiken (div's) en is het de bedoeling dat de titel balk (oranje van kleur) breder en smaller kan worden en moet de schaduw (grijs van kleur) mee "rekken" als het vak groter wordt.

Ik zat te denken om het op de volgende manier te slicen:

- Linker hoekje slicen van de titel balk
- Klein stukje slicen van midden van de titel balk (en herhalen in html)
- Rechter hoekje slicen van de titel balk
- Rechter schaduw van het vak slicen
- Linker schaduw van het vak slicen
- Onder schaduw van het vak slicen (en herhalen in html)

Dus op deze manier (het rode)



Denken jullie dat dit een goede aanpak is? Of hebben jullie betere suggesties?

Alvast bedankt,

Gr Mike

Ik heb er geen verstand van. Maar als je het midden pakt en deze herhaalt naar rechts en naar links ?
dan maakt het niet uit hoe lang de tekst is omdat je dan alle 2 de kanten kan aanpassen ?

Of gewoon de linker kant en deze helemaal doortrekken.

Als dit voorbeeld er in het echt ook zo ongeveer uitziet, kan je dit allemaal maken met pure css en html.

Ik zou het volledige kopje pakken, en dan ook een 1px hoog randje uit het middenstuk en dan de footer, groter dan 2kb wordt dat niet en het renderen zou langer duren dan dat je downloadtijd bespaard ;)

Hoi Mike,

Er is in CSS een standaard functie die een schaduw voor je maakt. Lees dit maar eens: http://www.csssnippets.be/2010/04/cr...s-drop-shadow/
Je hoeft dan enkel een #blok div aan te maken, deze een breedte en hoogte mee te geven en de schaduw code in de css te plaatsen. Dan rekken de afmetingen gewoon met de schaduw mee.

Sander

Super bedankt voor de reacties!

Ik heb vernomen dat CSS schaduw wel kan, maar dan met webbrowsers zo als Internet Explorer 6 nog problemen kan opleveren. Het moet echt compatibel met alle webbrowsers zijn.

Door al de reacties ben ik op een ander idee gekomen. Nu heb ik het opgelost door de boven kant, midden en onderkant de knippen als een heel smal deel. Vervolgens het midden stuk herhalen en klaar. Dit werkt goed!

Groetjes Mike

Ik zou gewoon een div maken met een grijze border (dat is de schaduw?), daarin nog een div met een 1px #000000 border.