CSS3 – Online Gradient Generator

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.

In deze demonstratie heb ik alleen maar de prefix voor Firefox gebruikt.

Omdat ik deze browser gebruikte voor de voorvertoning.

Maar browsers maken van verschillende schrijfwijzes gebruik voor verlopen.

Dus dat betekent dat je voor elke browser een speciale prefix moet schrijven en dat is erg veel werk.

Gelukkig zijn er online generators waarmee je kleurverlopen kunt maken.

Die vervolgens de benodigde prefixes voor je schrijft.

Schrik alleen niet van de hoeveelheid regels die het kost om één kleurverloop dan toe te passen.

Onderin dit voorbeeld document staan een aantal links.

Dit zijn links naar online generators. En er zijn er meerdere te vinden. Dus zoek ze op. Probeer ze uit.

En kijk welke jij het prettigst vindt werken of het meest volledig is.

Ik maak nu even gebruik van de online generator 'CSS Matic' en ik leg uit hoe je deze kunt gebruiken.

Allereerst ga ik naar de 'Gradient Generator'.

Je kunt uit een lijst met 'presets' voor een soort kleurverloop kiezen.

Vervolgens kun je ervoor kiezen of je dit kleurverloop horizontaal wilt, van links naar rechts, van boven naar beneden.

Of diagonaal of radiaal.

Onder het voorvertonings gebied staat hier vervolgens de code die automatisch voor je gegenereerd wordt.

Het kleurformaat waarmee je wilt werken kun je hier onderin kiezen.

Als je gebruik wilt maken van transparantie, dan schiet deze sowieso op 'rgba' of 'hsla'.

De meeste webdesigners gebruiken 'rgba'.

Als je er commentaar erbij wilt plaatsen.

Dan toont hij ook welke prefixes voor welke browsers zijn geschreven.

Het maken van een kleurverloop is vrij eenvoudig.

Met de kleurstops, dat zijn deze kleurrondjes onderin, kun je kleurenen bepalen.

Door de kleurstops te verplaatsen, verplaats je de afstand tussen de kleuren.

Bovenin geef je de transparantie aan van kleuren. Dus deze staat nu gewoon op %.

Maar deze kan ik ook transparant maken in meer of mindere mate.

En als je een kleur wilt toevoegen aan het verloop. Dan klik je dus tussen de kleurstops, onderin de balk.

Één keer klikken op het kleurvlakje. En je krijgt een kleurkiezer waarmee je dus weer speciaal je eigen kleur kunt opzoeken.

Zodra je klaar bent met het maken van je kleurverloop.

Kun je de code die voor jou gegenereerd is, kopiëren. Door op de knop te drukken 'Copy Text'.

Vervolgens kun je deze toepassen in je css-stijlblad.

Dan vervang ik nu mijn oude background voor deze nieuwe.

En zoals je ziet genereert dit heel veel regels css-code.

En kun je het eindresultaat bekijken in de browser.

Zo makkelijk is het dan om toch een complex kleurverloop te maken met een online generator.

Die vervolgens op dezelfde manier door alle browsers wordt weer gegeven.

Kleurverlopen kun je toepassen als achtergrond van alle html-elementen.

En hiermee kun je heel creatieve vormgeving bereiken.

Ik heb een verloop voorbereid en wil deze toepassen boven de huidige achtergrondafbeeldingen,

die over de volledige breedte van de webpagina lopen.

Deze achtergrondafbeeldingen zijn verbonden aan het html-element. Dan plaats ik het verloop aan het body-element.

Deze ligt namelijk hoger in de stapelvolgorde dan het onderliggende html-element.

Zodat dit verloop dus boven de achtergondafbeelding wordt toegepast.

Het verloop op de body wordt op de volledige pagina toegepast.

Dus als ik mijn browser venster verbreed dan loopt mijn verloop keurig netjes mee over de volledige breedte.

En wordt deze verhoudingsgewijs op dezelfde breedte toegepast.

En hiermee bereik ik precies het effect dat ik wil. Dat de afbeelding naar zwart verdwijnt aan beide zijkanten.

Dankzij de transparantie van het verloop kan ik vrij eenvoudig de afbeelding wijzigen in een andere afbeelding.

Het effect blijft hetzelfde.

En dit is een veel efficiëntere manier als dat ik bijvoorbeeld elke foto zou voorbereiden met deze verlopen aan beide zijden.