Wat is de html/css code om een rand langs je webpagina te maken?

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
Plaats reactie
Odylle
Berichten: 2
Lid geworden op: do 01 okt 2015, 21:37

Wat is de html/css code om een rand langs je webpagina te maken?

Bericht door Odylle »

Goedenavond, Ik zou graag om mijn hele webpagina een dunne ronde rand met schaduw effect willen hebben. Wat is hier de html/css code van?
Een voorbeeld is te zien op deze site: www.tijluil.nl
Wie kan mij hier mee helpen?

Mvg,
Odylle
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Wat is de html/css code om een rand langs je webpagina te maken?

Bericht door Goeroeboeroe »

Hoi Odylle,
Dat is 'n korte vraag met 'n wat langer antwoord. Die pagina van de Tijl Uilenspiegelschool heeft de hele pagina in 'n div#container gezet. Dan is het relatief simpel om een schaduw aan te brengen, omdat je maar met één div te maken hebt: de hele linkerkant hoort bij dezelfde div. Als je meerdere divs boven elkaar hebt staan (eentje voor 'n header, eentje voor 'n footer, ...) wordt het veel lastiger het netjes te krijgen.
Maar voor schaduw moet je ook ruimte hebben opzij van de tekst e.d, dus in principe zou alles in één div zetten ook om die reden het handigst zijn.
Het best kun je box-shadow gebruiken. Dat werkt al jaren in alle browsers en in Internet Explorer vanaf versie 9. Als het niet werkt, is er niets aan de hand, want dan zie je alleen de schaduw niet.
Uitgaande van een div#container waar alles in staat:

Code: Selecteer alles

div#container {
    border: 4px solid #00ccff;
    border-radius: 20px 20px 0 0;
    box-shadow: -2px -2px 2px 2px #888;
}
Dit is wat bij die school wordt gebruikt. Ook border-radius werkt al tijden in alle browsers.

border: gewoon een randje. Dat is bij die school het blauwe randje.

border-radius: zorgt voor ronde hoeken. De eerste waarde hoort bij linksboven, de tweede bij rechtsboven, de derde bij rechtsonder en de vierde bij linksonder. (Je kunt ook ellipsvormige hoeken e.d. maken, daarvoor is de code iets ingewikkelder)

box-shadow: bij een blok-element zoals een div kun je hiermee een schaduw aan het element geven. Als je verder niets in zou vullen, wordt de schaduw exact even groot als het element en valt er precies onder. En zie je dus niets. Fantastisch voor 'n geheim agent als zelfs je schaduw onzichtbaar is, maar wat onhandig voor 'n site.
De waarden van links naar rechts:

-2px: schuif de schaduw 2 px naar links.Waarmee hij dus links van de div zichtbaar wordt over 2 px. (Een positieve waarde schuift de schaduw naar rechts, een negatieve naar links.)

-2px: de tweede waarde. Exact hetzelfde verhaal, maar nu in verticale richting. -2px zorgt voor een verschuiving naar boven van 2 px.

2px: de derde waarde. Over deze breedte vervaagt de schaduw langzaam.

2px: de vierde waarde. Dit is de breedte van de schaduw.

#888: de kleur van de schaduw. Als je die niet opgeeft, wordt de waarde van color (o.a. de tekstkleur) gebruikt.

Meestal moet je even uitproberen voor het goed is. Vooral de combinatie van breedte en vervaging is een kwestie van uitproberen.
Zodra het iets ingewikkelder wordt, kan het handig zijn dit online uit te proberen op 'n site die automatisch de code genereert. Op http://www.css-voorbeelden.nl/links.htm ... rschillend vind je links naar sites met dat soort gereedschap.

Mocht er iets onduidelijk zijn, dan hoor ik het wel.
Overigens is dit forum eigenlijk meer bedoeld voor vragen over de voorbeelden op deze site. Maakt verder niet uit, maar het kan wel betekenen dat je soms (veel) langer op een reactie moet wachten, omdat ik - tot nu toe - de enige ben die hier reageert. Ander nadeel: op grotere forums zoals http://www.helpmij.nl/forum/forum.php kijken veel meer mensen mee, en zal een fout dus eerder worden ontdekt.
Maar afgezien daarvan ben je welkom hier.
Succes!
Plaats reactie