Input dominerende farge fra bilde til bakgrunn med AdaptiveBackgrounds.js

Når det vises noe på nettet, finner det noen utviklere ofte vanskelig å avgjøre hvilke bakgrunner som passer best for bruk. En god kombinasjon av bakgrunnen med riktig innhold kan påvirke brukeropplevelsen betydelig. For noen designere, foretrekker de å bruke noen av de dominerende fargene i selve innholdet - AdaptiveBackgrounds.js kan gjøre det for deg automatisk.

AdaptiveBackgrounds.js er et gratis jQuery-plugin som hjelper deg med å tilpasse den mest dominerende fargen i innholdet ditt som en del av bakgrunnen. Den ble bygget på toppen av RGBaster, laget av samme utvikler.

I utgangspunktet er det et plugin for å trekke ut fargepaletten til et bilde for å komme til den dominerende farge . Første gang siden lastes, vil pluggen trekke ut fargen fra bildet. Den ekstraherte farge blir deretter påført på bildeforelder. Du kan se hvordan det fungerer i dette gif.

(Bildekilde: AdaptiveBackgrounds.js)

Starter

AdaptiveBackgrounds.js krever at jQuery-biblioteket skal fungere. Selv om den er bygget på toppen av RGBaster, trenger du ikke å inkludere den lenger. Du kan få pluginfilen fra sin GitHub-side.

Ta deretter med alle nødvendige filer til prosjektet ditt slik:

Tilpass dominerende farge

Vi skal prøve dette verktøyet, og bruke det til å trekke ut den dominerende farge fra dette bildet Double Arch-fotografi av Kartik Ramanathan, og bruk det deretter på overordnet elementet.

For at den dominerende farge skal brukes i et element, bør du sette bildet som barnet av det. Inne i img tagg, gi data-adaptive-background, slik at skriptet kan få fargen:

For flere eksempler og tilleggsinnstillinger, kan du besøke AdaptiveBackgrounds.js dokumentasjonsside.
Endelig tanke 
Med AdaptiveBackgrounds.js får du bare en statisk farge. Du vil kanskje prøve å gi din bakgrunn litt mer farge for et oppsiktsvekkende resultat. Hvis du gjør det, sjekk ut siden AdaptiveBackgrounds.js demo for flere ideer.







        

          
          

		  
Slik overvåker du nedlastingstelling i Dropbox
            
Dropbox har gjort det enkelt for oss å dele filer offentlig. Vi kan legge ut en fil der ute for å bli offentlig nedlastet via en offentlig lenke . Brukere kan laste ned eller lagre filer i sin egen Dropbox-konto. Som eieren av den filen får vi imidlertid ikke se hvor mange ganger vår delte fil er lastet ned av massene.Dro
			
(Tekniske og design tips)
          
        
      

        

          
          

		  
Designerhåndbok for å jobbe med stilveiledninger og stilfliser
            
Å skape en merkevareidentitet er ingen enkel oppgave. Det krever hard innsats, men det er også en av de mest givende kreative oppgavene. Webprosjekter blander ofte merkevarebygging med grensesnittdesign . Dette kan være forvirrende fordi det er så mye å gjøre i begge områder. Stilguider og stilfliser er gode ressurser for webdesignere, og mens de høres ut, de oppnår to forskjellige oppgaver .I dette 
			
(Tekniske og design tips)
          
        
      

  
  
  



Interessante Artikler






			
	
				

					5 typer faglig skriving du kan starte en karriere i
					

			
	
				

					Få ekstern tilgang til datamaskinen med Chrome Remote Desktop
					
						







			
	
				

					10 Kraftige WordPress Theme Frameworks [Anmeldt]
					

			
	
				

					Hvordan lage en enkel telefonnummervælger