Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers

Hoe maak je je links wat origineler?

Een paar suggesties (en voorbeeldcodes) waarmee je de standaardlinks op je website wat leuker maakt.

Links zien er op de meeste webpagina’s hetzelfde uit: een standaardlink is blauw en onderstreept. Maar je kunt je links best wat bijzonderder maken als je dat wilt. Hier een paar suggesties (de voorbeeldlinks in deze tekst leiden nergens naartoe; ze zijn alleen bedoeld ter illustratie) :

  1. Stel verschillende kleuren in voor de afzonderlijke link-types: voor links waar nog niet op geklikt is, voor links waar al wel op geklikt is, en voor links waar een muis overheen beweegt. Je geeft die verschillende kleuren op in je stylesheet. De kleur van de link waar nog niet op geklikt is, leg je vast met behulp van a:link, de kleur van een link waar al wel eens op geklikt is met behulp van a:visited, en de kleur die de link moet hebben als er een muis overheen beweegt met a:hover. In je stylesheet kan dat er dus zo uitzien:

    
            a:link { color: darkslateblue; }
            a:visited { color: purple; }
            a:hover { color: red; }
            
  2. Verder kun je de linkkleur langzaam laten veranderen als er een muis overheen ‘hovert’. Daarvoor geef je eerst weer de hover-kleur aan met behulp van a:hover { color: red; }, en verder geef je de snelheid van veranderen aan door de niet-hover-versie van de link een transition-eigenschap te geven, op deze manier:

    a { transition: color 2s; }

    Met bovenstaande code geef je aan dat de overgang tussen de twee kleuren twee seconden (2s) moet duren. En om deze transition-code voor de meeste moderne browsers te laten werken, moet je dezelfde regel nóg een keer opnemen, voorafgegaan door een webkit-prefix:

    
            a {
                -webkit-transition: color 2s;
                transition: color 2s;
            }
  3. Behalve de kleur, kun je ook andere dingen laten veranderen als je met je muis over een link beweegt. Verander je de eigenschap text-shadow bijvoorbeeld, dan krijg je een schaduwlink als je er met je muis overheen beweegt. De code daarvoor:

    
            a {
                -webkit-transition: text-shadow 2s;
                transition: text-shadow 2s;
    
            }
            a:hover { 
                text-shadow: 1px -1px 1px green;
            }
  4. Je kunt ook twee eigenschappen van de link laten veranderen in plaats van één. Dat is gedaan in de volgende link, waarin tekst- en achtergrondkleur omwisselen. In je stijlcode hoef je alleen een komma tussen de verschillende eigenschappen te zetten, voor de rest blijft alles hetzelfde:

    
            a {
                -webkit-transition: color 1.5s, background-color 1.5s;
                transition: color 1.5s, background-color 1.5s;
            }
            a:hover { 
                color: white; background-color: blue; 
            }
  5. En ten slotte nog een voorbeeld van een link waar een rand omheen komt. Hier veranderen ook twee eigenschappen: als de rand (outline) eromheen komt, verdwijnt ook de onderstreping. Als je deze twee eigenschappen in dezelfde snelheid wilt laten veranderen, zoals ik hier heb gedaan, dan hoef je ze niet apart te noemen, maar kun je in plaats daarvan ook de aanduiding all gebruiken:

    
            a {
                -webkit-transition: all 2.5s;
                transition: all 2.5s;
            }
                a:hover { 
                outline: darkorchid solid 4px; 
                text-decoration: none; 
            }