Les 7

(pdf-versie)

Effecten met CSS

Dit hoofdstuk bestaat uit een stappenplan om fijne CSS-effecten te laten werken op uw site. De inspiratie en de code komt van onderstaande website:

https://tympanus.net/Development/HoverEffectIdeas/

De CSS-code

Wanneer je de website bekijkt dan kan je de code integraal downloaden. Deze zal je dan terugvinden onder de noemers 'Set1' en 'Set2'. Binnen die code kan je de verschillende effecten terugvinden. Belangrijk is ook om het algemene deel van de code ook mee te nemen, te herkennen aan de definiëring van 'Grid'. Dat algemene stuk is nodig voor elk van de effecten.

In principe kan je de volledige code, alle effecten, kopiëren en plakken in een nieuwe CSS regel. Straks bij het herschrijven van de velden moet je dan enkel de juiste klasse van het gewenste effect aanvullen. Handig dus om de verschillende effecten uit te testen op uw site.

Herschrijven van velden

Wanneer de code is geplaatst moet je deze nog doen werken. We doen dit met een overzicht van de tuinvogels. Belangrijk: in deze voorbereiding heb ik gewerkt met het effect Layla. Ik raad u aan om daar initieel ook mee te werken. Bij de verschillende effecten zal het soms nodig zijn om hier en daar details aan te passen voor een goede werking.

--> Het overzicht

  1. Maak dus eerst een view aan met volgende elementen:
    1. Onopgemaakte lijst
    2. Content van tuinvogels
    3. Menu-link
    4. De nodige (voorlopige) velden zijn: afbeelding en titel
    5. Titel zet je verborgen
    6. Voor de afbeelding maak je een stijl aan: 480 breed en 360 hoog. Die info nam ik over uit de CSS-code.

--> veld herschrijven

Wanneer je de website van Tympanus goed bekijk dan zie je dat er in het algemene artikel ook een stukje HTML wordt aangeboden. Dat stukje kan je best kopiëren en plakken bij het veld afbeelding in het overzicht.

 

html uitgelegd

Deze HTML zal ons overzicht in een div steken en daaraan de nodige klasses koppelen die we in de Injector hebben geplaatst. We moeten aan deze code wel nog iets aanpassen:

herschreven

  • Het vervangingspatroon voor de afbeelding vervangt de volledige lijn voor de afbeelding. Wanneer je deze in de HTML probeert te plaatsen, dan werkt het niet
  • Ik gebruik het patroon van de titel om de titel weer te geven
  • Schrijf zelf iets bij de span of laat deze leeg
  • Ik heb het veld latijnse naam toegevoegd om ook dat patroon te kunnen gebruiken
  • Voeg het correcte veld toe om te kunnen linken naar de node. Merk op dat er ook hier een groot deel HTML wordt vervangen door het patroon. Dat omdat die nodige HTML verweven zit in dat patroon