• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Analysis of dog breed diversity using a composite selection index

    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

  • Astuces
    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

Manipulation des couleurs avec JavaScript | Bonus HTML

Caleb by Caleb
mai 22, 2022
in Language HTML5
0
0
Manipulation des couleurs avec JavaScript |  Bonus HTML
333
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


Tutoriels CSS dans JS

L’un des nombreux attraits des bibliothèques CSS comme Sass et Less est leur large assortiment de fonctions de manipulation de couleurs telles que alléger, assombrir, saturer, etc. Avec la popularité croissante de CSS-in-JS, le besoin d’équivalents JavaScript (JS) a suivi. Juste au bon moment, un certain nombre de bibliothèques JS pour la conversion et la manipulation des couleurs ont surgi pour faciliter le travail des développeurs Web. En fait, pour le moment, il est difficile de décider lequel utiliser. Une bibliothèque recommandée par le populaire JSS La bibliothèque CSS-in-JS s’appelle simplement “Couleur“. Il est assez riche en fonctionnalités, ayant plus à offrir que color2k et une taille plus petite que chroma.js. Ce didacticiel de développement Web fournira un aperçu de certains des couleurs de nombreuses fonctionnalités et mettez-les au travail dans une application angulaire à page unique (SPA).

Avant de commencer, vous voudrez peut-être consulter notre Introduction au tutoriel CSS-in-JS.

Comment configurer et installer la bibliothèque de couleurs JSS

La méthode d’installation recommandée Couleur est d’utiliser le Node Package Manager (NPM). La commande est simplement :

$ npm install color

Ou même npm i color si vous êtes vraiment en minimisant la frappe.

Ensuite, vous pouvez vous y référer dans vos fichiers node.js en utilisant require :

const Color = require('color');

Dans Angular, vous devez utiliser importer:

import Color from 'color';

Les exposés Couleur object fournit quelques constructeurs différents parmi lesquels choisir, dont la plupart acceptent une permutation des valeurs Red Green Blue (RGB). Il acceptera également un nombre limité de chaînes, telles que le format HEX souvent utilisé :

const color = Color('#FFFFFF');
const color = Color('rgb(255, 255, 255)');
const color = Color({r: 255, g: 255, b: 255});
const color = Color.rgb(255, 255, 255);
const color = Color.rgb([255, 255, 255]);

Sous les couvertures, Corde les constructeurs sont gérés par le chaîne de couleur bibliothèque.

Vous pouvez en savoir plus sur les options de style dynamique en lisant notre Style dynamique avec JSS Didacticiel.

Explorer l’API JS Color

Couleurs L’API s’est fortement inspirée de couleur-js, dont les fonctions de manipulation ressemblent étroitement à celles des outils CSS tels que Sass, LESS et Stylus. Mais, avant d’en arriver là, regardons comment convertir les couleurs en d’autres formats.

CSS prend en charge une multitude de types de couleurs, des noms prédéfinis tels que “aliceblue“, et “sarcelle” à HEX (“#ee652e“), RVB (rgb(138, 238, 130))et RVB (rgba(0,255,0,0.75)).

A la recherche du RVB valeur numérique ? Appeler le hexagone() méthode:

color.hex() // #ffffff

Convertir une couleur en un RVB objet:

color.object(); // {r: 255, g: 255, b: 255}

Voici comment définir un hachage de la valeur de couleur et refléter le modèle actuel de la couleur :

color.rgb().array() // [255, 255, 255]

Pour obtenir l’individu RVB valeurs, utilisez celles-ci :

color.red()   //255
color.green() //255
color.blue()  //255

Lis: Utilisation d’un service angulaire pour lire des variables Sass

Fonctions de manipulation des couleurs et couleurs CSS

Sass est livré avec de nombreuses fonctions intéressantes qui peuvent facilement être appliquées aux couleurs CSS. Ces fonctions simplifient le choix et la manipulation des couleurs. Ceux-ci inclus assombrir et alléger, saturer et désaturer, RVB, et plus. Alors aussi, avec le Couleur bibliothèque. Voici un échantillon :

//lighten by 50%
color.lighten(0.5)     // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
//darken by 50%
color.darken(0.5)      // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
color.saturate(0.5)    // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
color.desaturate(0.5)  // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
rgba(10, 10, 10, 0.8)

D’autres fonctions de manipulation utiles incluent :

color.grayscale()      // #5CBF54 -> #969696
color.whiten(0.5)      // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
color.blacken(0.5)     // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)

color.fade(0.5)        // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color.opaquer(0.5)     // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)

color.rotate(180)      // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
color.rotate(-90)      // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)

color.mix(Color("yellow"))        // cyan -> rgb(128, 255, 128)
color.mix(Color("yellow"), 0.3)   // cyan -> rgb(77, 255, 179)

Toutes les fonctions ci-dessus peuvent être enchaînées :

color.green(100).grayscale().lighten(0.6)

D’autres fonctions renseignent sur une couleur :

color.isLight()         // true
color.isDark()          // false

Utilisation de color.js pour définir les couleurs du thème

Dans les deux derniers articles sur CSS-in-JS, nous avons adapté le Utilisation d’un service angulaire pour lire la démo des variables Sass employer JSS pour définir les couleurs d’un composant angulaire via @Saisir paramètres. Bien que JSS et color.js forment un couple parfait, chaque bibliothèque peut être utilisée indépendamment de l’autre. Pour souligner ce point, nous appliquerons couleur.js au service de couleur qui définit les couleurs du thème pour l’application.

Dans le app.component.scss fichier, les fonctions Sass sont utilisées pour définir le léger et foncé versions des couleurs de base :

$backgroundColor: rgb(82, 172, 240);
$lightBackgroundCcolor: lighten($backgroundColor, 16%);
$hoverColor: blue;
$darkHoverColor: darken($hoverColor, 20%);
$focusBorderColor: darkgray;
$darkFocusBorderColor: darken($focusBorderColor, 40%);

Imaginez une situation où notre application a été construite en utilisant CSS vanille plutôt que Sass. Sans accès aux fonctions Sass, nous aurions besoin d’un autre moyen d’affecter les couleurs de base. Ce serait une utilisation idéale de la bibliothèque de couleurs.

On aurait toujours accès aux trois couleurs de base via des variables CSS :

.color-demo-app {
  --background-color: rgb(82, 172, 240);
  --hover-color: blue;
  --focus-border-color: lightgray;
}

Maintenant en chargerCouleurs()nous pouvons ajouter deux appels supplémentaires au nouveau setMapColor() fonction pour chaque propriété CSS léger et foncé variation:

import Color from 'color';

const CSS_PREFIX = "--";
const CSS_SUFFIX = "color";
const CSS_DELIMITER = "-";

export enum PropertyNames {
  background  = 'background',
  hover="hover",
  focusborder="focus-border"
}

public loadColors() {
  // Read the custom property of body section with given name:
  const appElement = 
    document.getElementsByClassName('color-demo-app');
  if (appElement && appElement.length > 0) {
    const appStyles = window.getComputedStyle(appElement[0]);
    Object.values(PropertyNames).forEach(propertyName => {
      const cssVariableName = CSS_PREFIX
        + `${propertyName}${CSS_DELIMITER}`
        + CSS_SUFFIX;
      const cssVariableValue = 
        appStyles.getPropertyValue(cssVariableName)
                  .replace(' ', '');
      if (cssVariableValue) {
        this.setMapColor(propertyName, cssVariableValue);
      }
      // load light color 
      this.setMapColor(
        propertyName, 
        Color(cssVariableValue).lighten(0.2).hex(),
        ColorOptions.light
      );
      // load dark color 
      this.setMapColor(
        propertyName, 
        Color(cssVariableValue).darken(0.2).hex(),
        ColorOptions.dark
      );
    });

    this.setThemeDefaults();
  }
}

Extraction du code pour définir le _colorMap l’entrée d’une fonction d’assistance n’a de sens que puisque nous devons le faire trois fois pour chaque propriété CSS :

private setMapColor(
  propertyName: PropertyNames, 
  value: string,
  colorOption = ColorOptions.standard 
) {
  const colorMapKey = <ColorProperty>{
    name: propertyName,
    option: colorOption
  };
  this._colorMap.set(
    JSON.stringify(colorMapKey),
    value
  );
}

Vous pouvez voir comment tout le code ci-dessus fonctionne ensemble dans le démo stackblitz.

Conclusion

Il y a quelques raisons d’aimer les bibliothèques de couleurs comme couleur.js. Premièrement, l’utilisation de JavaScript pour manipuler les couleurs offre une portée supplémentaire et une exécution dynamique pour accomplir des choses qui seraient assez difficiles avec CSS, même avec l’aide de bibliothèques d’extension comme Sass et Less. Une autre caractéristique intéressante est leur facilité d’utilisation, du moins en ce qui concerne color.js.

Lire la suite Tutoriels CSS et développement web en visitant notre section programmation CSS.

— to www.htmlgoodies.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5603 shares
    Share 2241 Tweet 1401
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1702 shares
    Share 681 Tweet 426
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    513 shares
    Share 205 Tweet 128
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    711 shares
    Share 284 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Découvrez comment ces fantastiques portraits ont été réalisés avec une seule lumière

Découvrez comment ces fantastiques portraits ont été réalisés avec une seule lumière

février 6, 2023
Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

février 5, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.