Paginahoekje met CSS IV: linksboven
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 linker 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 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 linker bovenhoek en 100px buiten de linker en bovenmarge verschoven:
position fixed; top:-100px; left:-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.
- 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 rechtsboven op je pagina zetten, of rechtsonder 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; left:-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: voorb406.zip, 573 bytes.
Opmerking:
Dit soort elementen op je pagina is hinderlijk als het content onleesbaar maakt
.
Daarom heeft de eerste alinea van dit verhaal een extra brede linkermarge.
Inspiratie: Webdesigner Magazine 54, pag. 30.
Dit blad wordt sinds november 2017 niet meer gemaakt.
