Bonjour à tous !

Je suis en train de faire mon interface de gestion de la domotique de ma maison sur une plateforme open source (Home Assistant) et je cherche à faire une "tuile" avec l'activité en direct des habitants de la maison. Si ils dorment, si ils sont absents de la maison où en l'occurence si ils jouent à la console.

J'ai donc fait une tuile qui montre la personne concernée, avec le jeu auquel elle joue et une jaquette du jeu correspondante sur le côté droit.

J'ai réussi à avoir un résultat qui me convient plutôt bien:

J'ai appliqué une image en background-image à laquelle j'ai appliqué un gradient blanc, le rendu est top (en tout cas c'est tout à fait ce que je voulais) sauf que quand mon iPhone ou mon MacBook passe en "darkmode" le rendu n'est plus le même...

Le truc c'est que je n'ai absolument aucune connaissance en CSS et j'ai bidouillé un bout de côte en cherchant sur internet et testant plein de trucs.. 

Comment puis-je faire pour que le gradient ne parte pas du blanc vers une opacité pleine mais parte d'un vrai "transparent" pour aller vers une opacité pleine ? J'espère que je me fais bien comprendre :s

Voici le code utilisé:

      ha-card {
        background: linear-gradient(to left, transparent 50%, white),
        url({{ state_attr('sensor.playstation_5_activity', 'title_image') }});
        background-size: 56px;
        background-repeat: no-repeat;
        background-position: right;
      }

Merci d'avance si vous pouvez m'aider :) 

-
Edité par SebbyCop 26 novembre 2024 à 19:10:57

Bonsoir,

J'apprends à peine à créer un site internet, vous rigolez en disant que vous ne connaissez rien au CSS . Bon, il y deux heures j’étudiais justement ce qui pourrait vous aider: regardez cette page de cours https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061312-ajoutez-de-la-couleur-et-un-fond  à partir de https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061312-ajoutez-de-la-couleur-et-un-fond#/id/r-8061308. Cela devrait répondre à votre question. Bonne soirée

Bonjour/bonsoir,

Si votre système de light/darkmode est construit sur les reglages du navigateur,  Vous pouvez décliné votre sélecteur.

exemple en le plaçant juste aprés (white remplacé par black) :

@media (prefers-color-scheme: dark) {
 ha-card {
  background: linear-gradient(to left, transparent 50%, black),
  url({{ state_attr('sensor.playstation_5_activity', 'title_image') }});
  background-size: 56px;
  background-repeat: no-repeat;
  background-position: right;
 }
}

Voir https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme pour en apprendre plus

-
Edité par gcyrillus 28 novembre 2024 à 2:56:29

gcyrillus a écrit:

Bonjour/bonsoir,

Si votre système de light/darkmode est construit sur les reglages du navigateur,  Vous pouvez décliné votre sélecteur.

exemple en le plaçant juste aprés (white remplacé par black) :

@media (prefers-color-scheme: dark) {
 ha-card {
  background: linear-gradient(to left, transparent 50%, black),
  url({{ state_attr('sensor.playstation_5_activity', 'title_image') }});
  background-size: 56px;
  background-repeat: no-repeat;
  background-position: right;
 }
}

Voir https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme pour en apprendre plus

-
Edité par gcyrillus 28 novembre 2024 à 2:56:29

Incroyable c'est EXACTEMENT ce que je cherchais ! Merci infiniment ça marche impeccablement bien

Bon maintenant faut que j'arrive à délimiter la zone de texte pour éviter que les inscriptions trop longues ne se superposent à l'image de background