CoolHue Hand-Picked Pastel Web Gradient Library

Webgradiënten zijn tegenwoordig een dozijn tientallen, omdat CSS3 het zo eenvoudig maakt om verlopen helemaal opnieuw te maken, en met de juiste codebibliotheek is het nog eenvoudiger.

Dat is waar de waarde van coolHue komt. Deze gratis online bibliotheek is misschien wel de beste plek om vind geweldige verlopen voor uw site.

De meeste gradiënten volgen een zeer heldere tweekleuren- of driekleurenpastelkleurenselectie. Maar de verlopen zijn eenvoudig te bewerken, zodat u deze kunt laten werken met elke site.

Vanaf de hoofdpagina ziet het er misschien niet zo uit. Het is meestal een verzameling met de hand geplukt hellingen met verschillende tinten en kleur keuzes. Maar als je de GitHub-repo bezoekt, zul je een heel ander verhaal vinden. Deze verzameling is de beste keuze om te vinden gepersonaliseerde kleurenpaletten, allemaal specifiek ontworpen voor websites.

Het is eenvoudig genoeg om deze verlopen over te zetten naar de gebruikersinterface van een mobiele app. Maar ik heb ondervonden dat ze het nuttigst zijn bij nieuwere ontwerptrends zoals slagschaduwen.

Bij het bewerken van uw site kunt u kleurtinten doorgeven in een aangepaste array variabele colorData. Dit moet verschijnen in uw hoofd-HTML samen met al uw verloopelementen.

Met behulp van JavaScript hebt u volledige controle over hoe de kleuren samenvloeien. CSS3 kan ook meerdere kleuren ondersteunen, maar het is lastiger om ze over alle pagina-elementen en alle browsers heen te laten werken.

Met de coolHue-site kun je zelfs download gratis PNG-bestanden van de verlopen. Op deze manier kunt u ze bewerken in grafische ontwerpprojecten, mockups op websites, of ze gebruiken buiten de ruwe HTML / CSS / JS-code.

En als je een grote Photoshop-gebruiker bent, is er zelfs een .GRD-verloopbestand met alle coolHue-gradiënten. Geweldig toch?

Ga naar de GitHub-repo voor installatie-instructies en voorbeeldcodefragmenten. Daar vindt u ook het PS-verloopbestand samen met het Sketch-verloopbestand en nog veel meer.