CSS3 – Gradients, verlopen maken en toepassen

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: CSS3 – Text-shadow

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

In deze video maken we gebruik van de background eigenschap om kleurverlopen mee te maken.

Er zijn twee verschillende soorten kleurverlopen. Je hebt een lineair kleurverloop en een radiaal kleurverloop.

Een kleurverloop bestaat uit minstens twee verschillende kleuren.

Kun je net zoveel kleuren plaatsen als dat je wilt dat het verloop bevat.

De standaard verloop richting is van 'top' naar 'bottom'. Dus dat is de waarde 'top'.

Deze kun je ook 'bottom, left, right', of zelfs opgeven in een hoek.

Een kleurverloop kan ook transparante delen bevatten.

Dan moet je wel kiezen voor een kleur die ook transparantie kan bevatten.

Zoals bijvoorbeeld 'rgba' en dan staat de 'a' voor 'alpha' en dat is transparantie.

Je kunt kleurovergangen bepalen.

Daarmee bepaal je hoe lang een kleur mag plaatsvinden voordat deze overgaat in een andere kleur.

En standaard wordt voor een radiaal kleurverloop een 'ellipse' aan gehouden.

Maar deze kun je ook de waarde 'circle' meegeven. Zodat deze echt een cirkelvormige wordt.

Maar deze kun je ook de waarde 'circle' meegeven. Zodat deze echt een cirkelvormige wordt.

En je kunt een verloop herhalend maken. Ik doe het voor in een voorbeeld document.

Pas een verloop toe in de 'div' met de class="mainheader".

Dus zoek in het bijbehorende stijlblad naar de class .mainheader.

Voor het maken van kleurverloop, gebruik je de eigenschap 'background'.

Omdat ik deze pagina voor vertoon in Firefox.

Gebruik ik nu enkel de prefix voor Mozilla Firefox. En dat is -moz-.

Dan laat ik eerst een linear kleurveloop zien. En dat schrijf je 'linear-gradient'.

Dan haakje openen en haakje sluiten en tussen de haakjes schrijf je vervolgens de waarden.

Dan begin ik met het plaatsen van de kleurstops.

En dat doe ik door de kleuren aan te geven. En deze schrijf je dan komma gescheiden achter elkaar.

Dus ik wil bijvoorbeeld van 'darkblue', komma, naar 'lightblue'.

Je kunt net zoveel kleuren achter elkaar aan plaatsen als dat je wilt dat een kleurverloop gaat bevatten.

De standaard richting van een kleurverloop is van 'top' naar 'bottom'. Van boven naar beneden.

Deze waarde plaat je als eerste tussen de haakjes.

Dus als ik het kleurverloop wil omkeren, dan kies ik bijvoorbeeld voor 'bottom', komma weer.

En nu loopt het kleurverloop van onderen naar boven.

Maar ik kan er ook kiezen om deze bijvoorbeeld vanaf 'left' te plaatsen. Of vanuit 'right' te plaatsen.

Je kunt een verloop ook diagonaal toepassen, dan maak je gebruik van graden. in het Engels 'degrees'.

Dan staat degree (deg) gelijk aan, van links naar rechts.

Graden (deg) is dan tegen de klok in met graden.

En als ik dan nog met graden doorloop naar de andere kant, degrees (deg).

Dan zie je dus dat je graden hebt waarop je het verloop kunt plaatsen.

En ik plaats het verloop nu weer terug van 'top' naar 'bottom'.

En ik plaats het verloop nu weer terug van 'top' naar 'bottom'.