Knop met in-fadende achtergrond
Hieronder zie je een vrij fors uitgevallen knop. Als je er met de muis overheen gaat verwijnt de tekst en verschijnt er
een foto.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.
De knop doet overigens niets, maar verder in dit verhaal staat hoe je er een hyperlink van maakt.
Hallo
- Er worden twee items besproken:
- De werking van het script.
- Toepassen op je eigen website.
- De werking van het script
- De code bestaat uit HTML en CSS. Er komt geen JavaScript aan te pas.
- De knop is gemaakt met CSS. De HTML-tags <button> en <input type="button"> zijn hier dus niet gebruikt.
- De HTML van het voorbeeld bestaat uit drie geneste <div>-tags.
- De buitenste <div> dient als wrapper. Deze dient alleen om de knop in het document te positioneren.
- De tweede <div> heeft de klasse topKnop. Deze bepaalt de afmetingen en de opmaak van de knop als de muis er niet overheen gaat.
- De binnenste <div> heeft de klasse mijnKnop. Deze is normaal onzichtbaar (opacity:0), maar als
de muis er overheen gaat wordt deze zichtbaar (opacity:1), met een vloeiende overgang.
- De knoptekst is verticaal gecentreerd met behulp van vertical-align:middle in combinatie met display:table-cell.
De toepassing van display:table-cell zorgt er wel voor dat het erg lastig wordt de knop netjes in het midden te zetten.
Daarom is de oude aanpak gekozen met <div align="center">.
- De klassen topKnop en mijnKnop zijn beide even groot. topKnop is relatief gepositioneerd ten opzichte
van de wrapper.
mijnKnop is absoluut gepositioneerd ten opzichte van topKnop. - Let bij mijnKnop op de waarden van top en left: Deze is -2px. Dit is nodig om de border van topKnop goed afgedekt te krijgen door mijnKnop. De border van beide klassen is 2px breed!
- Merk ook op dat de afronding van mijnKnop 23px is, waar de afronding avn topKnop 25px is. Het verschil is precies de breedte van de border.
- Om dit allemaal goed op zijn plaats te krijgen is box-sizing:border-box
gebruikt.
- De knop, zoals die hier is geprogrammeerd, doet niets. Je koppelt er een hyperlink aan door de eventhandler onclick
op te nemen in
<div class="topKnop">of<div class="mijnKnop">.
Hiermee start je een JavaScript-function of roep je direct een andere pagina aan met "location.href='anderepagina.html'". - Je kunt de onclick ook in allebei de <div>-tags zetten. Daarmee kun je leuke effecten creëren
met een soms onvoorspelbaar effect …
- Toepassen in je eigen site
- Pak de gedownloade .zip-file en bouw de code op zoals hieronder wordt getoond.
- Regel een mooie foto of andere afbeelding en neem die op in de klasse mijnKnop. Zorg ervoor dat de afmetingen iets groter zijn dan de afmetingen van de knop.
- Stel de afmetingen van de knop in, pas de breedte en de kleur van de rand aan, enz.
- Positioneer de knop in je document.
- Voeg hyperlinks toe via onclick.
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>
div.topKnop {
position:relative;
width: 200px;
height: 150px;
display:table-cell;
text-align:center;
vertical-align:middle;
font-size:40px;
color:#008;
box-sizing:border-box;
border-radius: 25px;
border: 2px solid #606;
background-color:#ccc;
}
div.mijnKnop {
position:absolute;
top:-2px;
left:-2px;
width: 200px;
height: 150px;
border-radius: 23px;
border: 2px solid #060;
box-sizing:border-box;
background-image: url("mijnfoto.jpg");
background-color:#555;
opacity: .0;
transition: opacity 1s ease-in-out;
}
div.mijnKnop:hover {
opacity: 1;
transition: opacity 1s ease-in-out;
}
</style>
(Zet dit in de <BODY> op de plaats waar de knop moet verschijnen).
<div align="center">
<div class="topKnop">Hallo
<div class="mijnKnop"></div>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb514.zip, 565 bytes.
Opmerking:
Dit is bij uitstek geschikt voor een foto- of portfolio-site. Je zet dan een beperkt aantal van dit soort knoppen (flink groot!)
op een pagina, met hyperlinks naar een foto-album of iets dergelijks
