Appliquer du CSS sur Pingview

Pingview Tutoriels & astuces
1

Informations sur le contenu

:hourglass: Temps nécessaire : 5 min
:thermometer: Niveau de difficulté : ouvert à tous
:key: pré-requis : avoir accÚs à un wallboard sur Pingview

Résumé de cet article

image

Saurez-vous trouver quel est le point commun entre tous ces éléments ? :thinking:

Cliquez pour découvrir la réponse :

Ils ont tous été modifiés avec du CSS sur Pingview !

Dans cet article, je vous explique comment faire et vous donne quelques exemples de CSS utiles.

Chapitres de cet article

  1. Comment appliquer du CSS sur un élément
  2. Quelques exemples de CSS utiles

Comment appliquer du CSS sur un élément

Group 202
Group 2021104×1058 104 KB

  1. Dans le concepteur, cliquez sur cette icĂŽne image 152 en haut Ă  gauche

  2. Lorsque la pop up s’affiche, inscrivez votre CSS en l’affectant à une classe
    Exemple :

.nom_de_la_classe { filter: grayscale(1) }

Le nom de la classe est personnalisable, vous pouvez l’appeler comme bon vous semble. Cliquez sur ok.

  1. SĂ©lectionnez l’élĂ©ment sur lequel vous souhaitez affecter votre CSS. Puis, allez dans les propriĂ©tĂ©s sur l’icĂŽne pinceau, tout en bas, vous aurez l’option de sĂ©lectionner une classe CSS. En sĂ©lectionnant votre classe prĂ©alablement crĂ©Ă©e ici, elle se liera Ă  votre Ă©lĂ©ment.

:tada: Vous venez de faire votre premiĂšre classe CSS sur Pingview !

Exemple de propriétés CSS utiles

- filter: grayscale(1)
Ajoute un filtre noir et blanc sur une image
IntĂ©ressant couplĂ© Ă  une condition pour dĂ©clarer l’absence d’un collaborateur par exemple

- border-radius: 50px 0 0 50px !important
Applique une bordure seulement sur la gauche

- filter: drop-shadow(0 0 .25rem #000)
Ajoute une ombre sur un élément

- border-bottom: 10px solid lightgreen !important;
Ajoute une bordure seulement en bas

:mag: Vous voulez en savoir plus sur le CSS ?
Consultez ce lien : CSS : Feuilles de style en cascade | MDN

:building_construction: Cet article est encore en construction. Aussi, n’hĂ©sitez pas Ă  nous partager vos dĂ©couvertes CSS et Pingview en commentaire !

1 « J'aime »