nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


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.

44 Handschrift Zo mooi dat je jaloers zou zijn

44 Handschrift Zo mooi dat je jaloers zou zijn

Voor al onze lezers die niet langer studenten zijn, moeten we ons afvragen, wanneer was de laatste keer dat u een pen vasthield? Als je dat nog steeds doet, wanneer heb je dan voor het laatst iets geschreven dat niet beperkt is tot het ondertekenen van je naam bij een creditcardaankoop?Voor deze meesters van de handgeschreven notitie is schrijven met de hand bijna een vaardigheid die verboden is

(Technische en ontwerptips)

13 Infographics om de blogosfeer beter te begrijpen

13 Infographics om de blogosfeer beter te begrijpen

Niet zo lang geleden presenteerden we de beste infographics over sociale media die we op internet konden vinden. Deze keer laten we je zien hoe infographics je kennis van de onderling verbonden wereld van blogs die we 'blogosphere' noemen, kan verbeteren. Naarmate de populariteit van blogs toeneemt, willen bloggers weten hoe ze meer mensenmassa's kunnen trekken voor hun berichten of de hele site

(Technische en ontwerptips)