Paginahoekje met CSS IV: linksboven

Bezoek
mijn fotosite!

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.

Gebruik:

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: Download deze code  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.

 
terug

html-406; Laatste wijziging: 22 mei 2020