Paginahoekje met CSS I: rechtsonder
Soms zie je op een website een driehoekje staan met een wervende tekst, bijvoorbeeld over de uitverkoop in de webwinkel. Vaak is het 'klikbare' gebied een vierkant. Dat komt doordat er een plaatje is gebruikt dat voor een deel doorzichtig is, maar waarbij geen maatregelen zijn genomen om het klikbare gebied te beperken.
Op deze bladzijde staat er ook een, in de rechter onderhoek, met een aanmoediging om mijn foto-site eens te bekijken.
Deze pagina presenteert CSS-code waarmee je dit kunt doen. De code kun je downloaden om zelf te gebruiken.
- Er worden drie items besproken:
- Het maken van de driehoek.
- Het aanbrengen van het kleurverloop.
- Het maken van de hyperlink.
- Voor de driehoek wordt een <div>-tag gemaakt met de class .driehoekje. Deze bevat de CSS voor de driehoek.
- Het maken van de driehoek
- De driehoek is geen driehoek, maar een vierkant, dat 45° is gedraaid en voor de helft buiten de rechter en ondermarge is geplaatst.
- De afmetingen van het vierkant zijn 200×200 px. Er is een binnenmarge (padding) van 10px. Daardoor ontstaan neveneffecten die je oplost door de afmetingen 180×180 px te maken: 180 = 200 - 2×10.
- Het vierkant wordt vastgezet in de rechter onderhoek en 100px buiten de rechter en ondermarge verschoven:
position fixed; bottom:-100px; right:-100px; - De afmetingen van de tekst (lettergrootte, regelhoogte) zijn zo gekozen dat het "lekker" past. Dat geldt ook
voor de tekstkleur.
- Het aanbrengen van een kleurverloop
- Voor het kleurverloop gebruik je de function linear-gradient binnen background. Je geeft alleen de begin- en eindkleur aan, voor alle andere opties gebruik je dus de default-instellingen.
- De al eerder gedeclareerde
background:#0a0wordt overschreven met het kleurverloop. Browsers die linear-gradient niet ondersteunen, negeren het kleurverloop en tonen de hele driehoek met de groene kleur#0a0. - Op deze bladzijde is gebruikt:
background:linear-gradient(#0a0,#00a);. Je ziet echter maar een helft van het verloop, omdat dit op een vierkant is geplaatst, waarvan de helft verborgen is.
- Het maken van de hyperlink
- Voor de hyperlink is een gewone <a>-tag gebruikt. Om te voorkomen dat de link wordt onderstreept is aan de class .driehoekje het element a toegevoegd, die dat regelt. Tevens is daar de tekstkleur ingesteld op geel.
- De code:
.driehoekje a { color:#ff0; text-decoration:none }. - Het hover-effect is ingesteld met behulp van de pseudo-klasse a:hover. Die verandert alleen de tekstkleur.
- Tenslotte:
- Je kunt dit driehoekje ook rechtsboven op je pagina zetten, of linksboven of linksonder. De code daarvoor verschilt niet veel van wat op deze bladzijde wordt getoond.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.driehoekje { position:fixed; bottom:-100px; right:-100px;
width:180px; height:180px;
text-align:center; font-size:14pt; line-height:1.2em; font-weight:bold;
padding:10px; background: #0a0;
background:linear-gradient(#0a0,#00a);
transform: rotate(-45deg) translateZ(0);
}
.driehoekje a { color:#ff0; text-decoration:none }
.driehoekje a:hover { color:#fff }
</style>
(Zet dit 'ergens' in de <BODY>, bijvoorbeeld helemaal bovenaan).
<div class="driehoekje">
<a href="https://www.webmasterij.nl/fotoalbum"
target="NewBen">Bezoek mijn fotosite!</a>
</div>
Downloaden:
Druk op de knop:
File: voorb397.zip, 557 bytes.
Inspiratie: Webdesigner Magazine 54, pag. 30.
