hideout-lastation.com
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 sites sympas pour créer vos propres bandes dessinées en ligne
Contrairement à la croyance populaire, les bandes dessinées ne sont pas seulement pour les enfants. Ils ont la capacité de raconter une histoire d'une manière visuelle qui est vraiment unique et une expérience en soi . Généralement, vous pouvez seulement créer vos propres bandes dessinées si vous pouvez dessiner. Ou du m
Faire un calculateur Web Embedded gratuit à l'aide de JSCalc
S'il y a une chose que les développeurs détestent c'est réinventer la roue . C'est l'une des principales raisons de soutenir le mouvement open-source et de partager vos applications web préférées avec d'autres développeurs.Je suis récemment tombé sur une application Web soignée appelée JSCalc qui permet à quiconque de créer son propre widget de calculatrice intégrable à partir de zéro . Il passe par J
