Subtiele achtergrond-effecten II
Anders dan gebruikelijk is de achtergrondkleur bovenaan het document niet paars-blauw, maar (bijna) wit. Bij de kleurovergang
bevindt zich (gedeeltelijk) een band van een kleur die tussen beide kleuren in ligt.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken. Het achtergrondplaatje
is ter illustratie toegevoegd aan de download.
- Er worden drie items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De kleuren van het plaatje.
- Inspiratie voor dit item is ontstaan door de rubriek "Moment van reflectie" in de Bible-app van YouVersion voor
Android. Voor deze pagina heb ik iets nagebouwd wat er op lijkt.
De hier getoonde uitvoering verschilt van de YouVersion-versie doordat alle tekst bij de YouVersion-versie onder het effect staat, waar de tekst op deze pagina over het effect heen schuift. - De code bestaat uit HTML en wat CSS. Voor het achtergrond-effect is een plaatje gebruikt in .PNG-formaat.
- De werking van het script
- Het achtergrond-plaatje en de content staan in elk in eigen klassen, die elkaar overlappen. Specifieke acties zoals animatie
zijn hier niet nodig.
- HTML
- De achtergrond staat in de klasse Achtergrond. Deze wordt opgemaakt met CSS, Bij deze uitvoering van het effect staat die in het document.
- De klasse Achtergrond staat helemaal aan het begin van de <body>.
- De content staat in de klasse content. Deze wordt gedefinieerd in de file bbstyles.css, die hier verder niet
wordt besproken. Een paar eigenschappen worden overschreven met een style attribuut.
- CSS
- De klasse Achtergrond wordt in de linker bovenhoek van de body geplaatst, met negatieve marges aan de bovenkant en de linker zijkant. De breedte is 110%, dat is dus breder dan het hele document. De hoogte is gelijk aan de hoogte van het achtergrondplaatje.
- Om te voorkomen dat er een horizontale schuifbalk ontstaat, is voor de body de eigenschapoverflow-x:hidden ingesteld.
- Het achtergrondplaatje is even hoog als Achtergrond. Het is aangemaakt op een breedte van 600px, maar dat is arbitrair.
In de toepassing is de breedte ingesteld op 100%, d.w.z. even breed als Achtergrond. Door deze aanpak gedraagt het
effect zich responsive.
N.B. De afmetingen van het achtergrondplaatje zijn ingesteld via attributen in de <img>tag.
- De CSS van de klasse content staat in de gelinkte file bbstyles.css. Deze klasse erft eigenschappen van
de body, en kan daarom niet 'algemeen' worden besproken. Voor deze toepassing wordt de klasse absoluut gepositioneerd
in de linker bovenhoek van de body met het attribuut style="position:absolute;top:0;left:0", en ligt
daardoor boven op de klasse Achtergrond.
- De kleuren van het plaatje
- Bij deze toepassing is de lichte kleur gedefinieerd door R,G,B = 250,250,250. De achtergrondkleur van deze pagina is R,G,B = 228,233,246.
- Voor de overgangskleur neem je het gemiddelde van elk van de kanalen R, G en B van deze kleuren. Dat geeft R,G,B = 239,242,248.
- Gebruik een plaatje in .PNG-formaat, of een ander formaat dat transparantie ondersteunt in hoge resolutie met een breed kleurenpalet. De 256 kleuren van .GIF zijn te beperkt. .JPG en .BMP zijn ongeschikt.
- Voor het maken van het plaatje gebruik je het beste een goed teken- of fotobewerkingsprogramma. Eenvoudige software zoals
MS-Paint is niet geschikt, omdat het geen transparantie ondersteunt. Maak het plaatje in een of meerdere lagen op een transparant
canvas.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.
- Maak een achtergrondplaatje. Let daarbij op de hoogte van het plaatje en de klasse Achtergrond.
- Tenslotte...
- Als je niet wilt dat de tekst over het achtergrond-effect schuift, verwijder je het style-attribuut uit de tag <div class="content">, of je verwijdert die tag helemaal, inclusief de sluit-tag.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
body {
overflow-x:hidden;
}
.Achtergrond {
position:relative;
top:0; left:0;
margin:-10px 0 0 -10px;
width:110%; height:240px;
}
</style>
(Zet dit helemaal aan het begin van de <BODY>)
<div class="Achtergrond">
<img src="achtergrondplaatje.png" height="240" width="100%"
border="0">
</div>
<div class="content" style="position:absolute;top:0;left:0">
Sluit de tag <div class="content"> af met </div>, vlak vóór de </body>-tag.
Downloaden:
Druk op de knop:
File: voorb753.zip, 4659 bytes.
html-753; Laatste wijziging: 21 oktober 2024