CSS3 – Transparante verlopen maken

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

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.

Je kunt in een kleurverloop ook gebruik maken van transparantie.

Dan kies je voor een kleur die ook transparantie kan bevatten.

Als je rgb kleuren wilt opzoeken.

Dan kun je daar bijvoorbeeld het programma Adobe Photoshop voor gebruiken.

En dat laat ik even zien.

Als je het programma Photoshop opstart, kun je onderin je gereedschappenbalk,

éénmaal klikken op het kleurvlakje voor de voorgrond. En er verschijnt een kleurkiezer.

Hierin kun je vrij eenvoudig een kleur kiezen.

En vervolgens de rgb-waarden aflezen in het venster.

Je kan zelf de kleurwaarden ook een beetje aanpassen, zodat de getallen wat makkelijker te onthouden zijn.

Bijvoorbeeld , en .

Keer ik terug naar ons voorbeeld document.

Dan plaats ik de rgb waarden in plaats van de kleurnaam.

Dat schrijf je als volgt, 'rgb' en dan de 'a', en die staat voor het vierde kanaal, dat is de transparantie, het alpha-kanaal.

Dan haakje openen, haakje sluiten en hier voer je dan vervolgens op de juiste volgorde de kleurwaarden in.

Voor rood was dat , komma, voor groen was dat , komma, en voor blauw was dat .

Komma voor de laatste waarde, dat is de transparantie. Dan staat voor volledig zichtbaar.

Dan kun je een tweede kleur uitzoeken, bijvoorbeeld op dezelfde manier. Opnieuw in Photoshop.

Eenmaal klikken op het kleurvlakje voor de voorgrond.

En vervolgens kun je de kleurenschuif gebruiken om naar een bepaalde kleurtoon te gaan.

En ik kan in beeld zoeken naar precies de kleur die ik wil hebben.

Dan is dat bijvoorbeeld deze donkerblauwe kleur.

Deze kleur kun je ook zelf weer aanpassen. Bijvoorbeeld naar , en . Deze getallen zijn wat makkelijker te onthouden.

En dan kan ik deze rgb-waarden weer invoeren in mijn document.

In plaats van 'lightblue', kies ik deze keer dus een donkere kleur. En dat doe ik met rgba.

Haakje openen en haakje sluiten en dan de waarde weer komma gescheiden er tussen.

Dus dat was , , en dan wil ik dat deze volledig naar transparant gaat, dus . Nul is volledig transparant.

is volledig zichtbaar. Dan is alles daar tussenin gedeeltelijk transparant. En dat schrijf je dan met bijvoorbeeld met

Punt twee (.) of Punt vijf (.) voor %.

De laatste kleurwaarde die haal ik weg. Zodat ik een kleurverloop overhoud tussen twee kleuren.

En zoals je ziet bevat dit kleurverloop duidelijk transparantie, want je ziet nu ook de achtergrond er doorheen komen.