Een gradi\u00ebnt is een kleurverloop. Dat kun je met photoshop maken, maar het kan ook met CSS. In deze tutorial vertel ik je hoe je een CSS gradi\u00ebnt maakt.<\/p>\n
<\/a><\/p>\n Met de volgende code creeer je een gradient van boven naar beneden.<\/p>\n Zoals je ziet cre\u00eber je met deze regel code een kleurverloop van geel (kleurcode #ffdd00) naar oranje (kleurcode #ff5d00). Je begint met “background: ” om aan te geven dat het de achtergrondkleur betreft, vervolgens “linear-gradient” en vervolgens de kleuren die je wilt gebruiken tussen haakjes en gescheiden door een komma.<\/p>\n Uiteraard voeg je deze code toe aan het element waar je de achtergrond van wilt instellen, dus als je deze achtergrond wilt toevoegen aan een rij met de class “row” is de code: <\/a><\/p>\n Je kunt echter ook meer dan 2 kleuren gebruiken, zoals in onderstaand voorbeeld waarin de kleur rood (kleurcode #ff0000) is toegevoegd. Het enige wat je hoeft te doen is meer kleurcodes toe te voegen, gescheiden door een komma.<\/p>\n <\/a><\/p>\n Naast een gradi\u00ebnt van boven naar onder (linear-gradient)\u00a0kun je ook een cirkel (of ovaal) vormige gradi\u00ebnt instellen. Daarvoor gebruik je radial-gradient in plaats van linear-gradient.<\/p>\n <\/a><\/p>\n Of een diagonale gradi\u00ebnt:<\/p>\n Ik heb hier wat fellere kleuren\u00a0gebruikt voor de duidelijkheid, en nog een kleurtje toegevoegd gewoon omdat het kan \ud83d\ude09 Zoals je ziet wordt ook de volgorde van de kleuren omgekeerd.<\/p>\n <\/a><\/p>\n Daarnaast kun je ook een CSS gradi\u00ebnt van links naar rechts instellen door de eigenschap “to left” toe te voegen:<\/p>\n En zo zijn er nog een aantal andere eigenschappen zoals “to right”, “to bottom right”, “to top left” enzovoorts.<\/a><\/p>\n Dit artikel is een leuk begin om de vele mogelijkheden van de CSS 3 gradi\u00ebnt eigenschap te verkennen. Er is echter nog heel veel meer mogelijk. Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt<\/a> over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen<\/a>, jouw website te verbeteren<\/a> of een training<\/a> over dit onderwerp te verzorgen.<\/p>\nCSS3 gradi\u00ebnt<\/h2>\n
\n
\n.row {
\nbackground: linear-gradient(#ffdd00, #ff5d00);
\n}
\n<\/code><\/p>\nMeer dan 2 kleuren gebruiken<\/h2>\n
Een cirkel of ovaal vormige gradi\u00ebnt<\/h2>\n
Een diagonale gradi\u00ebnt<\/h2>\n
\nDe eigenschap deg<\/strong> geeft het aantal graden dat de hoek moet zijn aan, in dit geval 20 graden. Standaard is de hoek 90 graden, van boven naar beneden. Door een negatieve waarde op te geven lopen de kleuren van rechtsboven naar linksonder:<\/p>\nEen gradi\u00ebnt van links naar rechts<\/h2>\n
\nKijk bijvoorbeeld maar eens op deze (Engelstalige) site<\/a>, of gebruik gewoon een gradient generator<\/a> of de juiste code automatisch te genereren.<\/p>\nHulp nodig met je website?<\/h2>\n