nl.hideout-lastation.com
Input dominante kleur van afbeelding naar achtergrond met AdaptiveBackgrounds.js
Bij het weergeven van iets op internet vinden sommige ontwikkelaars het vaak moeilijk om te bepalen welke achtergronden het meest geschikt zijn voor gebruik. Een goede combinatie van de achtergrond met de juiste inhoud kan de gebruikerservaring substantieel beïnvloeden. Voor sommige ontwerpers geven ze er de voorkeur aan om enkele van de dominante kleuren in de inhoud zelf te gebruiken - AdaptiveBackgrounds.js kan dat automatisch voor je doen.
AdaptiveBackgrounds.js is een gratis jQuery-invoegtoepassing waarmee u eenvoudig de meest dominante kleur in uw inhoud kunt aanpassen als onderdeel van de achtergrond. Het is gebouwd bovenop RGBaster, gemaakt door dezelfde ontwikkelaar.
Kortom, het is een plug-in om het kleurenpalet van een afbeelding uit te pakken om de dominante kleur te bereiken . De eerste keer dat de pagina wordt geladen, extraheert de plug-in de kleur uit de afbeelding. De geëxtraheerde kleur wordt vervolgens toegepast op de afbeeldingsouder. Je kunt zien hoe het werkt in deze gif.
(Afbeeldingsbron: AdaptiveBackgrounds.js)
Ermee beginnen
AdaptiveBackgrounds.js vereist dat de jQuery-bibliotheek werkt. Hoewel het bovenop RGBaster is gebouwd, hoeft u het niet meer op te nemen. Je kunt het plug-in bestand downloaden van zijn GitHub-pagina.
Voeg vervolgens alle vereiste bestanden toe aan uw project, zoals:
Pas dominante kleur aan
We gaan deze tool uitproberen en gebruiken om de dominante kleur uit deze afbeelding te halen. Dubbelboogfoto door Kartik Ramanathan, en dan toepassen op het bovenliggende element.
Als u de dominante kleur in een element wilt toepassen, moet u de afbeelding als het onderliggende element plaatsen. Beschrijf binnen de img tag het kenmerk data-adaptive-background, zodat het script de kleur kan krijgen:
Voor meer voorbeelden en extra instellingen kunt u de AdaptiveBackgrounds.js documentatiepagina bezoeken.
Laatste gedachte
Met AdaptiveBackgrounds.js krijgt u alleen een statische kleur. Je kunt proberen je achtergrond een beetje meer kleur te geven voor een opvallend resultaat. Als dat het geval is, bekijk dan de demo-pagina van AdaptiveBackgrounds.js voor meer ideeën.
Creëer zelf-gehoste dribbelportfolio met Dribbbox
Dribbble is een populaire website om in de ontwerpwereld je WIP-projecten, ontwerpen, mockups en zelfs freebies te delen. Als tegenprestatie krijg je feedback en kritiek van collega-ontwerpers, wat goed is om je ontwerp naar een hoger niveau te tillen.Als u wilt personaliseren hoe u uw portfolio weergeeft, kunt u de shots onder uw eigen domein weergeven
Showcase van prachtige geometrische kunstwerken
Moe van het kijken naar kleurrijke en mooie afbeeldingen op internet? Als je een stap terug wilt doen om inspiratie te vinden in de meest elementaire kunstvormen, kan ik je daarbij helpen. Hoe zit het met we kijken naar een aantal geometrische kunstwerken?In deze compilatie van prachtige geometrische kunstwerken gaan we kijken naar de reproductie van prachtige kunst zoals je nog nooit eerder hebt gezien
![Hoe verlichting uw stemming beïnvloedt [Infographic]](http://hideout-lastation.com/img/tech-design-tips/160/how-lighting-affects-your-mood.jpg)
