Immetti il ​​colore dominante dall'immagine allo sfondo con AdaptiveBackgrounds.js

Quando mostri qualcosa sul Web, alcuni sviluppatori trovano spesso difficile decidere quali sfondi sono più adatti per l'uso. Una buona combinazione dello sfondo con il giusto contenuto può influenzare in modo sostanziale l'esperienza dell'utente. Per alcuni designer, preferiscono utilizzare alcuni dei colori dominanti all'interno del contenuto stesso: AdaptiveBackgrounds.js può farlo automaticamente.

AdaptiveBackgrounds.js è un plugin jQuery gratuito che ti aiuta ad adattare facilmente il colore più dominante nei tuoi contenuti come parte dello sfondo. È stato costruito su RGBaster, realizzato dallo stesso sviluppatore.

Fondamentalmente, è un plugin per estrarre la tavolozza dei colori di un'immagine per ottenere il colore dominante . La prima volta che la pagina viene caricata, il plugin estrae il colore dall'immagine. Il colore estratto viene quindi applicato all'immagine madre. Puoi vedere come funziona in questo gif.

(Fonte immagine: AdaptiveBackgrounds.js)

Iniziare

AdaptiveBackgrounds.js richiede che la libreria jQuery funzioni. Sebbene sia costruito su RGBaster, non è necessario includerlo più. Puoi ottenere il file del plugin dalla sua pagina GitHub.

Quindi includi tutti i file richiesti nel tuo progetto in questo modo:

Adatta il colore dominante

Proveremo questo strumento e lo useremo per estrarre il colore dominante da questa immagine Double Arch di Kartik Ramanathan, quindi applicarlo all'elemento genitore.

Affinché il colore dominante possa essere applicato in un elemento, devi metterlo come figlio di esso. All'interno del tag img, attribuisci l'attributo data-adaptive-background, in questo modo, in modo che lo script possa ottenere il colore:

Per ulteriori esempi e impostazioni aggiuntive, è possibile visitare la pagina di documentazione di AdaptiveBackgrounds.js .
Pensiero finale 
Con AdaptiveBackgrounds.js, otterrai solo un colore statico. Potresti provare a dare un tocco di colore in più al tuo sfondo per ottenere un risultato che attira l'attenzione. Se lo fai, controlla la pagina demo di AdaptiveBackgrounds.js per ulteriori idee.







        

          
          

		  
Come installare Plex in Windows 10 e Guardare film ovunque
            
Ho sempre odiato il trasferimento o la sincronizzazione dei media con altri dispositivi, e sono sicuro che anche a te non piace, giusto?Il motivo è che è un processo che richiede molto tempo e quindi riprodurre questi file su vari dispositivi potrebbe richiedere ulteriori sforzi. Fortunatamente, Plex media server è stato progettato per risolvere questo problema, che funziona su molte piattaforme, tra cui Android e iOS.Ut
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
10 app Web realizzate con Backbone.js [Case Study]
            
Sei mai stato impigliato nel codice degli spaghetti? Preferiresti alimentare la tua app qualcosa di più sano? Se è così, dai un'occhiata a cosa può essere realizzato con Backbone.js. Backbone è una libreria JavaScript che si basa liberamente sul modello di progettazione Model-View-Controller, ma poiché manca l'elemento Controller, è meglio chiamarlo framework MV *.Ti aiu
			
(Consigli tecnici e di design)
          
        
      

  
  
  



Articoli Interessanti






			
	
				

					Soluzioni per il surriscaldamento del PC e come tenerlo fresco
					

			
	
				

					Dovresti assumere un web designer o usare un web builder?
					
						







			
	
				

					Come costruire una pagina di accesso WordPress completamente personalizzata
					

			
	
				

					Come installare iOS 11 Public Beta su iPhone o iPad