Container et Fill en gradient

  • Container et Fill en gradient

    Posté par Fred Evellin sur 5 septembre 2024 à 11h27

    Bonjour,

    Comment insérer un gradient de couleur de fond dans un container?

    Dans ce style :

    Laure a répondu Il y a 6 jours, 10 heures 3 Membres · 8 Réponses
  • 8 Réponses
  • Nelson

    Membre
    5 septembre 2024 à 11h48

    Bonjour,

    Vous devez utiliser le contrôle “Texte HTML”.

    Dedans, vous insérez une div et le code pour votre dégradé.

    Un exemple de code :

    <pre class=”language-css”>"<div style='background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 35%, rgba(0,212,255,1) 100%); width:100%;height:" & Parent.Height & "px;'</div>"

    Vous pouvez vous rendre sur ce site pour choisir vos couleurs de dégradé. https://cssgradient.io/

    Vous n’aurez plus qu’à modifier les lignes que je vous ai transmises avec les nouveaux paramètres que vous avez choisi.

    Bonne journée,

    Nelson

  • Fred Evellin

    Membre
    5 septembre 2024 à 12h23

    Merci,

    Mais comment faire pour que mon contrôle “Texte HTML” prennent toute la taille de mon container sans masquer les autres controles (buton, zone text…)?

  • Nelson

    Membre
    5 septembre 2024 à 14h13

    Tu dois agencer convenablement tes éléments.

    Ton 1er élément sera donc ton “Texte HTML” et au dessus viendront se mettre tes autres éléments.

    Ici, tu peux voir que dans mon contenaire, mon premier élément qui sera le background dégradé est tout en bas.

    Ensuite, je mets mon second élément qui est mon texte.

    Et ainsi de suite.

  • Fred Evellin

    Membre
    5 septembre 2024 à 14h47

    j’ai essayé. Le HtmlText2 est bien en bas. Mais le reste est à coté

  • Fred Evellin

    Membre
    5 septembre 2024 à 15h08

    c’est parce que j’utilise un headerConteneur…

    Un Conteneur simple est il aussi responsive??

    • Cette réponse a été modifiée Il y a 1 semaine, 6 jours par  Fred Evellin.
  • Nelson

    Membre
    5 septembre 2024 à 15h38

    Essayons de comprendre ce que tu fais.

    Actuellement, tu as placé ton HtmlText2 dans ton conteneur HeaderContainer1.

    Du coup, lui il l’interpréte comme si c’était un morceau de celui-ci et l’ajoute au reste des contenus.

    Pour réussir ton opération, tu dois être un niveau au dessus, donc dans ton ScreenContainer1.

    Tu dois mettre tes éléments de ton HeaderContainer1 en couleur de fond transparent.

    Pour que tu puisses afficher en dessous ton HtmlText2.

  • Laure

    Membre
    12 septembre 2024 à 17h12

    Bonjour,

    Une autre idée, avec un SVG.

    – En insérant un contrôle “image” sur ton écran, défini aux dimensions qui correspondent celles de ton header.

    – Dans la propriété image de ce contrôle , il te faudra créer un svg de type :

    <div>
    <div>”data:image/svg+xml,” & EncodeUrl(</div>
    <div> “</div>

    <div><svg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 200 200′></div>
    <div> <defs></div>
    <div> <linearGradient id=’gradient’ x1=’80%’ y1=’20%’ x2=’5%’ y2=’5%’></div>
    <div> <stop offset=’0%’ stop-color=’#FC466B’/></div>
    <div> <stop offset=’100%’ stop-color=’#3F5EFB’/></div>
    <div> </div>
    <div> </linearGradient></div>
    <div> </div>
    <div> </defs></div>
    <div> </div>
    <div> <style></div>
    <div> </div>
    <div> .background {</div>
    <div> </div>
    <div> fill: url(#gradient);</div>
    <div> animation: transition 10s ease infinite alternate;</div>
    <div> </div>
    <div> }</div>
    <div> </div>
    <div> @keyframes transition {</div>
    <div> </div>
    <div> from {transform:translateX(-300%) }</div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> }</div>
    <div> </div>
    <div> </style></div>
    <div> </div>
    <div> <g class=’background’></div>
    <div> <rect width=’1000′ height=’1000’/></div>
    <div> </g></div>
    <div> </div>
    <div> </div>
    <div></svg></div>

    <div>”</div>
    <div>)</div>
    <div> </div>
    <div>- Une fois mis en place, positionnes toi sur le contrôle, clic droit =>Réorganiser, puis mettre en arrière plan.</div>
    <div> </div>
    <div>Tu peux ensuite débuter la création de ton header </div>
    <div> </div>
    <div>Grossièrement réalisé, cela donne cela:</div>
    <div> </div>
    <div></div>
    <div> </div>
    <div> </div>
    <div> </div>
    </div>

  • Laure

    Membre
    12 septembre 2024 à 17h32

    Pour sûr ce code ne fonctionnera pas!!! Je suis désolée mon premier post…

    C’est mieux:

    <div>

    </div>

    • Cette réponse a été modifiée Il y a 6 jours, 10 heures par  Laure.

Connectez-vous pour répondre.