Voeg een overgangseffect toe aan links

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Voeg een overgangseffect toe aan links

Bericht van TonnyKamper op za 30 jun 2018 - 18:49

Voeg een overgangseffect toe aan links

Met deze tip kun je een overgangseffect toevoegen aan de links in je Actieforum forum. Voor deze tutorial zijn geen speciale voorwaarden vereist. Het effect kan worden toegevoegd aan forums van elke versie, met of zonder een aangepaste stijlpagina. Het is eenvoudig, omdat het alleen op enkele regels CSS is gebaseerd.

1. Wat is een overgangseffect?


Beschrijf om te beginnen het gewenste effect. Op het forum, wanneer je je muis over je links beweegt, verplaatsen ze zich van de ene kleur naar de andere zonder enige overgang, de verandering is duidelijk. Tegenwoordig wordt op verschillende forums de eigenschap transition CSS3 geboren ... Zie Demonstratie:


Vertaling Demonstratie:

Tutorial Actieforum 5 overgangseffecten :

2. Waar en hoe moet je het toepassen?


De overgang kan op elk element worden toegepast. Hier doen we het op alle links van je forum, maar door de identifier van het element in de stylesheet aan te passen, is het perfect mogelijk om het element aan te passen.
Ga naar:
Beheerderspaneel Display Plaatjes en Kleuren Kleuren tabblad CSS-stylesheet

Hier zijn de items waarin we geïnteresseerd zijn, de links. In CSS worden ze weergegeven door de letter a . In de stylesheet verklaren we ons element zo:
Code:
a {
Vervolgens integreren we de overgangseigenschappen achteraf, rekening houdend met de verschillende voorvoegsels voor elke browser:
Code:
a {
        -moz-transition:all 0.5s; /* Mozilla Firefox */
        -webkit-transition:all 0.5s; /* Safari et Google Chrome */
        -o-transition:all 0.5s; /* Opera */
        transition:all 0.5s;
    }
Verklaringen:
Hier is de opgegeven waarde alle 0,5 sec, wat betekent dat de overgang van kracht wordt op alle elementen die betrekking hebben op onze identifier en dat deze van toepassing zal zijn met een vertraging van 0,5 seconden. Afhankelijk van het gewenste effect, kunnen hier verschillende dingen worden gewijzigd:

1) De wijze van toepassing (hier in plaats van alles ):
- kleur : kleur van het schrijven van de tekst,
- achtergrond : achtergrondkleur van de tekst,
- dekking : transparantie van de tekst,
- enz.

2) De applicatietijd (hier in plaats van 0,5 sec. ):
Als je wilt dat de overgang kort is, moet je een waarde van minder dan 1 seconde opgeven. Aan de andere kant, als je een langere overgang wilt, moet je een waarde van meer dan 1 seconde plaatsen.

Voorbeeld met een overgang van 5 seconden alleen toegepast op kleuren:
Code:
a {
        -moz-transition:color 5s; /* Mozilla Firefox */
        -webkit-transition:color 5s; /* Safari et Google Chrome */
        -o-transition:color 5s; /* Opera */
        transition:color 5s;
    }

3. Overgang en zweven


Zodra de overgang op de links is toegepast, hoef je alleen maar te definiëren wat je wilt zien veranderen tijdens het overzweven. Hiervoor gebruiken we het pseudo-element: hover, gekoppeld aan de identifier a.

Een schrijfkleur bijvoorbeeld:
Code:
a:hover {
        color:#FF0000;
    }
Of een achtergrondkleur:
Code:
a:hover {
        background-color:#FF0000;
    }

4. Andere links aanpassen


Door simpelweg de identifier a te gebruiken, zullen we alle links van het forum personaliseren. Maar het kan zelfs gebeuren dat je een enkele link wilt aanpassen, bijvoorbeeld de link van de titels van de forums. Daarvoor houden we de identifier a en voegen we de naam van de link toe ( :de belangrijkste CSS-id's zijn van phpBB2 & phpBB3).

Voorbeeld met phpBB2-versie:
Code:
a.forumlink {
De procedure is dan verder hetzelfde als voor algemene links.

avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum