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.
Google om Google Drive te vervangen door iets veel beters
Binnen de komende twee weken brengt Google de Google Drive-client offline . In plaats daarvan zal het bedrijf een gloednieuw systeem introduceren met de naam Back-up en synchronisatie . Naar het uiterlijk van dingen lijkt het nieuwe systeem mijlen beter te zijn dan de huidige Drive-client .Op 28 juni maakt Google de Backup and Sync-client beschikbaar voor zowel pc als Mac
20 gadgets en accessoires voor Superhero-fans
Of je nu een kind of een kind in je hart bent, je hebt je favoriete superheld uit een populaire film of strip. Een van de nadelen van het volwassen zijn, is echter dat het heel onhandig wordt om met speelgoed of actiefiguren te spelen . Maar je kunt altijd op superhelden geïnspireerde gadgets en accessoires verzamelen en ze een onderdeel maken van je interieur of het dagelijks leven .
