Paginahoekje met CSS II: rechtsboven
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 bovenhoek, 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 een driehoek.
- Het aanbrengen van het kleurverloop.
- Het maken van de hyperlink.
- Het maken van een driehoek
- De driehoek is geen driehoek, maar een vierkant, dat 45° is gedraaid en voor de helft buiten de rechter en bodvenmarge 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 bovenhoek en 100px buiten de rechter en ondermarge verschoven:
position fixed; top:-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(#00a,#0a0);. Je ziet echter maar een helft van het verloop, omdat dit op een vierkant is geplaatst, waarvan de helft verborgen is.
Wees er op bedacht dat de onderste helft van het gedraaide vierkant in beeld is. Het verloop eindigt dus met de groene kleur.
- 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.
- Om te zorgen dat de link-tekst onderin het vierkant komt, is iets nodig dat de ruimte boven de link-tekst opvult. Hier
is daarvoor een <div> gebruikt. De code:
<div style="width:10px; height:130px; background: transparent">
</div>
- Tenslotte:
- Je kunt dit driehoekje ook rechtsonder 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; top:-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(#00a,#0a0);
transform: rotate(45deg) translateZ(0);
}
.driehoekje a { color:#ffff00; text-decoration:none }
.driehoekje a:hover { color:#fff }
</style>
(Zet dit 'ergens' in de <BODY>, bijvoorbeeld helemaal bovenaan).
<div class="driehoekje">
<div style="width:10px; height:130px; background:transparent">
</div>
<a href="https://www.webmasterij.nl/fotoalbum"
target="NewBen">Bezoek<br>mijn fotosite!</a>
</div>
Downloaden:
Druk op de knop:
File: voorb400.zip, 572 bytes.
Opmerking:
Dit soort elementen op je pagina is hinderlijk als het content onleesbaar maakt
.
Daarom heeft de eerste alinea op deze bladzijde een extra brede rechtermarge.
Inspiratie: Webdesigner Magazine 54, pag. 30.
Dit blad wordt sinds november 2017 niet meer gemaakt.
