Partage
  • Partager sur Facebook
  • Partager sur Twitter

Créer une barre de points de vie stylée

    19 mai 2024 à 14:49:49

    Bonjour à tous :)

    C'est avec plaisir que je reviens sur ce forum après un long moment d'absence.
    J'ai pu me remettre récemment à coder mon site et j'ai pas mal avancé depuis. :magicien:
    Je fais toujours ça en amateur, du coup il m'arrivera sûrement de dire quelques bêtises ^^"

    Jusqu'à présent j'ai pu trouver par moi-même toutes les solutions pour faire ce que je voulais, mais là je sèche un peu pour la partie design, car j'essaie de faire des trucs un peu stylé ^^
    J'essaie de créer des barres de PV et ça s'avère pas mal compliqué. Je veux faire un effet biseauté sur la droite, ce que j'ai pu faire avec clip-path en CSS mais en fonction de l'évolution de la barre de PV l'angle varie et j'ai beau changer les paramètres de clip-path, je n'arrive pas à obtenir un angle constant selon la longueur de la barre de PV.
    J'utilise 2 div imbriqués pour faire la barre de PV et un div varie selon le width dans le fichier CSS.
    Voici une image pour illustrer un peu :

    Donc il me faudrait une solution pour garder l'angle constant.
    Si possible, j'aimerai une solution qui n'utilise pas Javascript car je ne maitrise pas encore ce langage et je n'ai pas trop envie de me lancer là-dedans pour le moment ^^"

    Je cherche aussi un moyen de pouvoir changer la progression selon la quantité de pvs car actuellement les barres de pvs sont fixes (du coup pas très utiles ^^" )
    Je pense trouver un truc par moi-même sur ce point mais ça me ferait gagner du temps :)
    J'imagine un truc comme utiliser une variable php pour changer le width mais je suis pas très sûr que ça soit possible et ça fait un peu bricolage. Du genre utiliser une balise style dans le html et changer le width avec echo 'variable php x%'.
    Pas besoin d'une animation quelconque, elles ne vont pas évoluer en temps réel mais seulement occasionnellement.

    Voilà merci d'avance :)

    • Partager sur Facebook
    • Partager sur Twitter
      19 mai 2024 à 17:51:16

      Bonjour, Si j'ai bien compris vous cherchez une balise de progression? Si oui balise <progress>

      https://developer.mozilla.org/fr/docs/Web/HTML/Element/progress

      • Partager sur Facebook
      • Partager sur Twitter
        19 mai 2024 à 20:30:52

        Bonjour :)

        Oui, je m'étais mis ça de côté au cas où mais la mise en forme avec CSS me semble assez limitée par rapport aux 2 div imbriquées.

        • Partager sur Facebook
        • Partager sur Twitter
          20 mai 2024 à 17:27:01

          Bonjour.

          « la mise en forme avec CSS me semble assez limitée par rapport aux 2 div imbriquées. »

          Partons de ce principe.

          Pour obtenir un bord oblique dans le div intérieur (curseur), tu peux utiliser la propriété transform associée à une valeur slewx

          .curseur {
            transform: skewx(45deg);
          }


          Tu places le div de classe curseur en position relative dans le div que tu appelles PV et règles la propriété right pour le pousser plus ou moins à gauche (sur l'élément lui-même, sinon c'est pareil pour tous).

          Peut-être quelqu'un aura une meilleure idée, attendons...

          • Partager sur Facebook
          • Partager sur Twitter
            20 mai 2024 à 21:04:35

            MarioNet a écrit:

            [...] mais la mise en forme avec CSS me semble assez limitée par rapport aux 2 div imbriquées.

            Bonjour, quelles sont les difficultés?

            Sur proposition de Domi65, de la doc MDN et de css-tricks.com,

            <progress class="progress" max="100" value="70">70%</progress>
               .progress {
                  border: none;  
                  background-color: greenyellow;
                  appearance: none;
                }
            
                .progress::-moz-progress-bar {
                  background-color: orange;
                  transform: skew(30deg) translateX(-5px);
            
                }

            Ce qui donne comme visuel dans Firefox :

            Je n'ai fais que le code pour Firefox à vous d'ajouter les préfixe pour les autres navigateurs.

            • Partager sur Facebook
            • Partager sur Twitter

            Créer une barre de points de vie stylée

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown