Saisie de la couleur dominante de l'image à l'arrière-plan avec AdaptiveBackgrounds.js

Lors de la présentation de quelque chose sur le Web, certains développeurs trouvent souvent difficile de décider quels arrière-plans sont les plus adaptés à l'utilisation. Une bonne combinaison de l'arrière-plan avec le bon contenu peut affecter considérablement l'expérience de l'utilisateur. Pour certains concepteurs, ils préfèrent utiliser certaines des couleurs dominantes dans le contenu lui-même - AdaptiveBackgrounds.js peut le faire automatiquement pour vous.

AdaptiveBackgrounds.js est un plugin jQuery gratuit qui vous permet d'adapter facilement la couleur la plus dominante de votre contenu dans le cadre de l'arrière-plan. Il a été construit au dessus de RGBaster, fait par le même développeur.

Fondamentalement, c'est un plugin pour extraire la palette de couleurs d'une image pour arriver à la couleur dominante . La première fois que la page est chargée, le plugin extrait la couleur de l'image. La couleur extraite est ensuite appliquée au parent de l'image. Vous pouvez voir comment cela fonctionne dans ce gif.

(Source de l'image: AdaptiveBackgrounds.js)

Commencer

AdaptiveBackgrounds.js nécessite la bibliothèque jQuery pour fonctionner. Bien qu'il soit construit au-dessus de RGBaster, vous n'avez plus besoin de l'inclure. Vous pouvez obtenir le fichier plugin depuis sa page GitHub.

Ensuite, incluez tous les fichiers requis dans votre projet comme ceci:

Adapter la couleur dominante

Nous allons essayer cet outil, et l'utiliser pour extraire la couleur dominante de cette image Double Arch Arch par Kartik Ramanathan, puis l'appliquer à l'élément parent.

Pour que la couleur dominante soit appliquée dans un élément, vous devez placer l'image en tant qu'enfant. À l'intérieur de la balise img, donnez l'attribut data-adaptive-background, comme ceci, afin que le script puisse obtenir la couleur:

Pour plus d'exemples et de paramètres supplémentaires, vous pouvez visiter la page de documentation AdaptiveBackgrounds.js .
Pensée finale 
Avec AdaptiveBackgrounds.js, vous obtiendrez seulement une couleur statique. Vous pouvez essayer de donner un peu plus de couleur à votre arrière-plan pour un résultat attrayant. Si vous le faites, consultez la page de démonstration AdaptiveBackgrounds.js pour plus d'idées.







        

          
          

		  
20 idées de cadeaux pour les amateurs de livres
            
Alors que de nos jours beaucoup de gens préfèrent les livres numériques ou les livres électroniques, il y a encore beaucoup d'amateurs de livres parmi nous. Juste parce que nous lisons sur le Kindle ou la tablette, ne signifie pas que nous ne manquons pas le toucher et l'odeur du papier ou le son des pages flips.Tou
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
Comment effectuer une analyse de cohorte avec Google Analytics [Guide]
            
Vous ne pouvez pas contrôler et gérer ce que vous ne pouvez pas mesurer . Heureusement, les rapports de Google Analytics constituent votre mécanisme de connaissance idéal pour mesurer, planifier et gérer des campagnes Web . Pendant longtemps, vous ne pouviez effectuer une analyse de cohorte sur Google Analytics via la fonction de segmentation, qui n'était rien de plus qu'un hack publicitaire publicisé.Mais a
			
(Conseils techniques et de conception)
          
        
      

  
  
  



Des Articles Intéressants






			
	
				

					Plus de 20 craies impressionnantes à télécharger
					

			
	
				

					Cette bibliothèque de cases à cocher propose des dizaines de styles de cases à cocher CSS gratuits
					
						







			
	
				

					Spécification de l'URL de base de document avec HTML   Élément
					

			
	
				

					Ajouter un menu contextuel sur votre site Web avec HTML5