De gradient

Een gradient kan je website enorm verbeteren. Er zijn twee typen gradients: de lineaire en de radicale. De radicale gradient wordt vanaf het midden naar buiten gedefinieerd. De lineaire gradient, die wij gebruikt hebben, kan meerdere kanten opgaan (links, rechts, diagonaal). De gradient is een waarde van het element "background". Het bepaalt hoe de achtergrond van de ene kleur in de andere overloopt. Je kan ook een gradient gebruiken waarbij de kleur steeds transparanter wordt. Dit doe je met rgba-kleuren. Dit is een uitbreiding op een normale rgb-kleur waarbij de "a" een extra waarde is die aangeeft hoe doorzichtig de kleur wordt. De waarde ligt tussen de 1 en de 0. Een lineaire gradient heeft de volgende vorm: background: linear-gradient(direction, color1, color2);. Als je niks aangeeft gaat de gradient automatisch van boven naar onder. De gradient die wij gebruiken voor de header van deze pagina werkt met rgba-kleuren. Dat ziet er zo uit: background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));. Je ziet dat de kleur aan het eind helemaal transparant wordt. Bij een gradient wordt meestal een normale achtergrondkleur ingesteld indien de gradient niet werkt of als je met een transparante gradient werkt.

De verticale navigatie

De verticale menubar is een moeilijk onderwerp en brengt veel problemen met zich mee. Allereerst de opmaak in CSS. Belangrijk is dat voor elke link "display:block;" in de CSS staat, anders zullen ze niet onder elkaar terechtkomen. Daarnaast heb je te maken met het uiterlijk, het moet er een beetje knap uitzien natuurlijk. Dit kun je vrij simpel oplossen door de padding iets te verhogen en een achtergrondkleur voor de links in te stellen. Het belangrijkste is dat alle links in één div staan die binnen de nav staat. Een div is namelijk veel makkelijker te bewerken dan een nav.
Zoals je ziet is de bovenste link groen, dit komt doordat wij voor de bovenste link een aparte class aangemaakt hebben en daarmee de kleur veranderden. De grootste uitdaging is om de links onder elkaar te krijgen en ervoor te zorgen dat de tekst netjes in het midden blijft. Het makkelijkste is om je menubalk in de navigation te zetten. Door de gehele nav links te zetten met "float: left;" zullen alle links onder elkaar komen te staan mits je de navigation-width kleiner neemt dan twee keer de breedte van een link. Verder is het (optioneel) belangrijk dat je menubalk meebeweegt als jij naar beneden scrollt. Hiervoor moet je de positie fixeren (position: fixed;) zodat de menubalk een vaste positie in de website heeft. Als laatste wil je dat de tekst verdwijnt al zou deze om de een of andere reden toch door de nav heen lopen. Dit doe je met het element overflow. De waarde "hidden" zorgt ervoor dat tekst verborgen wordt indien deze onder het benoemde gebied valt.

De footer

Het laad-icoon

Dit icoon is leuk om in je website te hebben en maakt grotendeels gebruik van CSS.De elementen display, overflow en position hebben dezelfde waardes als bij de navigatie. De ronde vorm krijg je door een rand van een paar pixels dik in te stellen en de straal van de rand op 50% te zetten. Het lastige deel is de animatie. Je gebruikt namelijk @keyframes, hiermee kun je bepaalde animaties maken voor in je website. Eerst zul je de animatie een naam moeten geven. Voor elk element dat over de animatie gaat zet je animation-(...) net zoals bij -webkit- en -moz- (zonder het streepje ervoor). Verder heeft de animatie nog een duur, een teller die zegt hoe vaak de animatie zich herhaalt, een richting (achterwaarts, voorwaarts, afwisselend, enz.) en een timing-function. Deze timing-function bepaalt de snelheid waarmee de animatie verloopt. De animatie kan bijvoorbeeld eerst snel en dan langzaam aflopen of andersom. Als je dit allemaal heb moet je alleen nog de animatie erin zetten. Dit doe je met @keyframes. Deze code geeft je toestemming om een animatie neer te zetten. Je moet alleen zelf de animatiecode nog schrijven. Als eerste roep je de naam van de animatie aan die je eerder bepaalt hebt. Zodra je met keyframes bezig bent zet je voor het eerste element(de aanroeping) @-keyframes naam-animatie en dan de accolades zoals bij een normale CSS-code. Om ervoor te zorgen dat het laad-icoon roteert moet je de animatiecode transform gebruiken. Eerst zeg je wat er bij 0% moet gebeuren, in dit geval niks dus "0% { transform: rotate(0deg); }". Hierna zeg je wat er aan het eind moet gebeuren dus waar de animatie naartoe moet "bewegen" binnen de gegeven tijd. Dit doe je met "100% { transform: rotate(360deg); }". Eigenlijk zeg je wat de animatie moet doen als die op 0% en op 100% zit. Wat hiertussen gebeurt hoef je niet uit te schrijven omdat je dit al eerder hebt bepaald (met de animation-.... elementen).

De evaluatie

In deze Praktische Opdracht hebben wij veel nieuwe technieken geleerd. We hebben de meeste technieken op het internet opgezocht op de site w3schools. Hier is ook meteen een uitleg en er zijn opdrachten bij het stukje theorie. Zo kun je het meteen toepassen. Zo hebben wij bijvoorbeeld voor het eerst met @keyframes en gradient gewerkt. Het was een leuke opdracht en we hebben veel nieuwe dingen geleerd bij het bouwen van deze website.