hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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.

10 étiquettes de modèles WordPress que vous ne connaissez peut-être pas

10 étiquettes de modèles WordPress que vous ne connaissez peut-être pas

WordPress est livré avec une abondance de Tags Template depuis sa création. Ces balises Template dans WordPress sont des fonctions PHP qui peuvent être utilisées pour afficher et extraire un élément de données .Si vous avez développé un thème WordPress, vous connaissez peut-être certaines de ces balises Template, telles que the_title qui affiche le titre du message, the_author qui affiche le nom de l'auteur du message et le lien du post.WordPress

(Conseils techniques et de conception)

Convertir des liens de chanson en liens universels jouables par n'importe qui par l'intermédiaire de Songwhip

Convertir des liens de chanson en liens universels jouables par n'importe qui par l'intermédiaire de Songwhip

Avec plusieurs services de streaming de musique disponibles ces jours-ci, il peut être un peu difficile de lier une chanson en particulier à vos amis qui peuvent être sur d'autres services de streaming de musique. Cependant, les barrières de service peuvent ne plus être aussi gênantes qu'il semble qu'un service appelé Songwhip cherche à simplifier l'expérience de partage de musique.Disponib

(Conseils techniques et de conception)