Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Hintergrund als transparenten Übergang?

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    17
    1
    541

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    5.4k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.4k

Hintergrund als transparenten Übergang?

Geplant Angeheftet Gesperrt Verschoben Visualisierung
21 Beiträge 4 Kommentatoren 1.6k Aufrufe 3 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • liv-in-skyL liv-in-sky

    @mguenther

    sowas ?

    Image 195.png

    M Offline
    M Offline
    mguenther
    schrieb am zuletzt editiert von
    #8

    @liv-in-sky
    nicht ganz - der Rahmen ist ja schwarz - bei mir liegt quasi die weiße Fläche im grünen Bereich und der Rahmen müsste dann ja grün sein - oder?

    liv-in-skyL 1 Antwort Letzte Antwort
    0
    • M mguenther

      @liv-in-sky
      nicht ganz - der Rahmen ist ja schwarz - bei mir liegt quasi die weiße Fläche im grünen Bereich und der Rahmen müsste dann ja grün sein - oder?

      liv-in-skyL Offline
      liv-in-skyL Offline
      liv-in-sky
      schrieb am zuletzt editiert von
      #9

      @mguenther der ist nicht schwarz - aber das muss einen tick dunkler sein, sonst sieht man es nicht

      in den css tab

      .shadowtest{
       box-shadow: 0px 0px 8px 10px rgba(0,0,0,0.1);
      }
      

      [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"shadowtest"},"style":{"left":"720px","top":"725px","background":"","transform":"","background-color":"#FFFFFF","z-index":"2","width":"94px","height":"150px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"shadowtest"},"style":{"left":"777px","top":"668px","background":"","transform":"","background-color":"#6dc22e","width":"345px","height":"227px"},"widgetSet":"basic"}]
      

      damit gemacht https://html-css-js.com/css/generator/box-shadow/

      sonst fällt mir nix mehr ein

      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

      M 1 Antwort Letzte Antwort
      1
      • liv-in-skyL liv-in-sky

        @mguenther der ist nicht schwarz - aber das muss einen tick dunkler sein, sonst sieht man es nicht

        in den css tab

        .shadowtest{
         box-shadow: 0px 0px 8px 10px rgba(0,0,0,0.1);
        }
        

        [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"shadowtest"},"style":{"left":"720px","top":"725px","background":"","transform":"","background-color":"#FFFFFF","z-index":"2","width":"94px","height":"150px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"shadowtest"},"style":{"left":"777px","top":"668px","background":"","transform":"","background-color":"#6dc22e","width":"345px","height":"227px"},"widgetSet":"basic"}]
        

        damit gemacht https://html-css-js.com/css/generator/box-shadow/

        sonst fällt mir nix mehr ein

        M Offline
        M Offline
        mguenther
        schrieb am zuletzt editiert von
        #10

        @liv-in-sky

        hilft nicht - ist nicht das, was ich will - trotzdem mal wieder Danke für deine Hilfestellung...

        1 Antwort Letzte Antwort
        0
        • M mguenther

          Hallo Zusammen,
          ich bräuchte einmal die Hilfe von den Experten. Ich habe z.B. ein Bild mit einem großen Kühlschrank (es ist eigentlich eine Wärmepumpe) und ich würde gerne quasi in den Schrank hineinschauen wollen. Meine Idee war nun, ich lege mir das Bild in den Hintergrund, lege dann ein HTML-Widget (Rechteck, kein Quadrat) drüber und erzeuge einen Übergang von z.B. weiß in der Mitte des HTML Widgets zu transparent am Rand. Dann hätte man quasi einen Effekt, dass ich den Schrank "aufschneide" - so zumindest meine Gedanken-Welt. Konntet ihr mir folgen? Ich hatte an CSS gedacht und komme aber nur zu sowas:

          	background: 
          	linear-gradient(transparent, white 5%, white 95%, transparent);
          

          Gibt es eine Möglichkeit, quasi oben/unten und rechts und links die Transparenz zu erzeugen?

          Danke
          Marcus

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von
          #11

          @mguenther sagte in Hintergrund als transparenten Übergang?:

          z.B. ein Bild mit einem großen Kühlschrank (es ist eigentlich eine Wärmepumpe)

          so richtig kann ich mir es nicht vorstellen.
          eine wärmepunpe sieht ja nicht aus wie ein kühlschrank, nicht mal annähernd.
          b2b31be6-a16c-4428-b14c-0aac1144bf3f-image.png
          oder ich hab da eine falsche vorstellung.
          und wo willst du da hineinschauen?
          kannst du mal ein scribble machen, also schema zeichnung?

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          M 1 Antwort Letzte Antwort
          0
          • OliverIOO OliverIO

            @mguenther sagte in Hintergrund als transparenten Übergang?:

            z.B. ein Bild mit einem großen Kühlschrank (es ist eigentlich eine Wärmepumpe)

            so richtig kann ich mir es nicht vorstellen.
            eine wärmepunpe sieht ja nicht aus wie ein kühlschrank, nicht mal annähernd.
            b2b31be6-a16c-4428-b14c-0aac1144bf3f-image.png
            oder ich hab da eine falsche vorstellung.
            und wo willst du da hineinschauen?
            kannst du mal ein scribble machen, also schema zeichnung?

            M Offline
            M Offline
            mguenther
            schrieb am zuletzt editiert von
            #12

            @oliverio
            Erdwärme :)
            bastle gerade an meinem VIS für die Heizung, weil ich endlich meine Heizung auslesen kann. Ich wollte quasi das Schema in den "Kühlschrank" haben :)
            5e89d7f6-44a4-4590-af48-279c7bfb56d8-image.png

            OliverIOO 1 Antwort Letzte Antwort
            0
            • M mguenther

              @oliverio
              Erdwärme :)
              bastle gerade an meinem VIS für die Heizung, weil ich endlich meine Heizung auslesen kann. Ich wollte quasi das Schema in den "Kühlschrank" haben :)
              5e89d7f6-44a4-4590-af48-279c7bfb56d8-image.png

              OliverIOO Offline
              OliverIOO Offline
              OliverIO
              schrieb am zuletzt editiert von OliverIO
              #13

              @mguenther

              ich verstehe es leider nicht.
              die metapher kühlschrank auf diesem bild ist mir schleierhaft

              Meine Adapter und Widgets
              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
              Links im Profil

              M 1 Antwort Letzte Antwort
              0
              • OliverIOO OliverIO

                @mguenther

                ich verstehe es leider nicht.
                die metapher kühlschrank auf diesem bild ist mir schleierhaft

                M Offline
                M Offline
                mguenther
                schrieb am zuletzt editiert von mguenther
                #14

                @oliverio
                sorry, mein Kühlschrank sieht aus wie meine Wärmepumpe von Nibe. Ich würde gerne diese Skizze:
                448c97b2-66e3-47aa-87a2-f8b2b0f8efe5-image.png

                in diesem Bild haben (ich habe übrigens 2 Kühlschränke und beide sehen so aus):
                6c5fcfc4-2fd3-4f8b-b4cf-0200f4b5d980-image.png

                (die Anschlüsse sind ja über die farbigen Dreiecke oben zu sehen). Was hier im Bild "fehlt" bzw nicht zu sehen ist, ist die Animation (die gestrichelten Linien sind in die Flußrichtung animiert). Der Oberhammer wäre eine ähnliche Darstellung wie von @Peoples https://forum.iobroker.net/assets/uploads/files/1573143488282-heizungsanlage.jpg

                Ich bekomms nur nicht hin. Habe sogar schon bei Nibe angerufen. Die AutoCad Datei kann man von deren Homepage herunterladen, das Prinzipbild ist in einer Anleitung von denen enthalten. Also, auch alles i.O., aber die wollen nichts anderes herausgeben bzw. wollen nicht helfen.
                Wenn jemand etwas Zeit übrig hätte, Ahnung von AutoCad - wäre super... Mit CSS klappt das so dann doch nicht.

                Ich kanns leider nicht...

                D 1 Antwort Letzte Antwort
                0
                • M mguenther

                  @oliverio
                  sorry, mein Kühlschrank sieht aus wie meine Wärmepumpe von Nibe. Ich würde gerne diese Skizze:
                  448c97b2-66e3-47aa-87a2-f8b2b0f8efe5-image.png

                  in diesem Bild haben (ich habe übrigens 2 Kühlschränke und beide sehen so aus):
                  6c5fcfc4-2fd3-4f8b-b4cf-0200f4b5d980-image.png

                  (die Anschlüsse sind ja über die farbigen Dreiecke oben zu sehen). Was hier im Bild "fehlt" bzw nicht zu sehen ist, ist die Animation (die gestrichelten Linien sind in die Flußrichtung animiert). Der Oberhammer wäre eine ähnliche Darstellung wie von @Peoples https://forum.iobroker.net/assets/uploads/files/1573143488282-heizungsanlage.jpg

                  Ich bekomms nur nicht hin. Habe sogar schon bei Nibe angerufen. Die AutoCad Datei kann man von deren Homepage herunterladen, das Prinzipbild ist in einer Anleitung von denen enthalten. Also, auch alles i.O., aber die wollen nichts anderes herausgeben bzw. wollen nicht helfen.
                  Wenn jemand etwas Zeit übrig hätte, Ahnung von AutoCad - wäre super... Mit CSS klappt das so dann doch nicht.

                  Ich kanns leider nicht...

                  D Offline
                  D Offline
                  dos1973
                  schrieb am zuletzt editiert von
                  #15

                  @mguenther
                  Du willst den Inhalt des oberen Bildes im unteren Bild haben?

                  M 1 Antwort Letzte Antwort
                  0
                  • D dos1973

                    @mguenther
                    Du willst den Inhalt des oberen Bildes im unteren Bild haben?

                    M Offline
                    M Offline
                    mguenther
                    schrieb am zuletzt editiert von
                    #16

                    @dos1973
                    das obere Bild ist quasi das Innenleben vom unteren.
                    Von der Logik her, so:
                    0b2ab7fc-063d-46fa-b848-683a328ffda9-image.png

                    OliverIOO 1 Antwort Letzte Antwort
                    0
                    • M mguenther

                      @dos1973
                      das obere Bild ist quasi das Innenleben vom unteren.
                      Von der Logik her, so:
                      0b2ab7fc-063d-46fa-b848-683a328ffda9-image.png

                      OliverIOO Offline
                      OliverIOO Offline
                      OliverIO
                      schrieb am zuletzt editiert von OliverIO
                      #17

                      @mguenther

                      c233f0c7-4582-43d9-8a87-886269931402-waermepumpe.png

                      besonders hübsch ist es nicht.
                      aber die Auflösung der Bilder läst auch zu wünschen übrig

                      Meine Adapter und Widgets
                      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                      Links im Profil

                      M 1 Antwort Letzte Antwort
                      0
                      • OliverIOO OliverIO

                        @mguenther

                        c233f0c7-4582-43d9-8a87-886269931402-waermepumpe.png

                        besonders hübsch ist es nicht.
                        aber die Auflösung der Bilder läst auch zu wünschen übrig

                        M Offline
                        M Offline
                        mguenther
                        schrieb am zuletzt editiert von
                        #18

                        @oliverio

                        ja, so ähnlich siehts/sahs bei mir auch aus.. Chefin "schimpft" schon, ich hätte wieder zu viel Zeit damit verbracht. Deswegen wollt ich ja auch einen Übergang "basteln"...

                        Trotzdem danke

                        liv-in-skyL 1 Antwort Letzte Antwort
                        0
                        • M mguenther

                          @oliverio

                          ja, so ähnlich siehts/sahs bei mir auch aus.. Chefin "schimpft" schon, ich hätte wieder zu viel Zeit damit verbracht. Deswegen wollt ich ja auch einen Übergang "basteln"...

                          Trotzdem danke

                          liv-in-skyL Offline
                          liv-in-skyL Offline
                          liv-in-sky
                          schrieb am zuletzt editiert von liv-in-sky
                          #19

                          @mguenther

                          das wird dir auch nicht weiterhelfen ?

                          zyl.png

                          zyl_e-breit.png

                          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                          M 1 Antwort Letzte Antwort
                          0
                          • liv-in-skyL liv-in-sky

                            @mguenther

                            das wird dir auch nicht weiterhelfen ?

                            zyl.png

                            zyl_e-breit.png

                            M Offline
                            M Offline
                            mguenther
                            schrieb am zuletzt editiert von mguenther
                            #20

                            @liv-in-sky

                            danke dir erst einmal - ist halt nicht "unsere" Wärmepumpe. Ich suche weiter - ich muss mal sehen, wie es umsetzen kann. Momentan fehlen mir die Ideen bzw. das Know-How

                            so eine ähnliche Darstellung wie die von @OliverIO ist eigentlich das Gesuchte.

                            liv-in-skyL 1 Antwort Letzte Antwort
                            0
                            • M mguenther

                              @liv-in-sky

                              danke dir erst einmal - ist halt nicht "unsere" Wärmepumpe. Ich suche weiter - ich muss mal sehen, wie es umsetzen kann. Momentan fehlen mir die Ideen bzw. das Know-How

                              so eine ähnliche Darstellung wie die von @OliverIO ist eigentlich das Gesuchte.

                              liv-in-skyL Offline
                              liv-in-skyL Offline
                              liv-in-sky
                              schrieb am zuletzt editiert von
                              #21

                              @mguenther kein thema - ich bin zwar kein designer (weit weg davon :-) aber ich habe noch keine vis gesehen, die gut aussieht und ein orginalbild eines gerätes beinhaltet - sieht immer irgendwie seltsam aus - ist aber meine persönliche meinung und die geschmäcker sind verschieden. ich würde mir kein bild von einem schaltschrank in meinen flur oder wohnzimmer als bild hängen - was ja letztlich die vis ist

                              nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                              1 Antwort Letzte Antwort
                              0
                              Antworten
                              • In einem neuen Thema antworten
                              Anmelden zum Antworten
                              • Älteste zuerst
                              • Neuste zuerst
                              • Meiste Stimmen


                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              322

                              Online

                              32.7k

                              Benutzer

                              82.5k

                              Themen

                              1.3m

                              Beiträge
                              Community
                              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                              ioBroker Community 2014-2025
                              logo
                              • Anmelden

                              • Du hast noch kein Konto? Registrieren

                              • Anmelden oder registrieren, um zu suchen
                              • Erster Beitrag
                                Letzter Beitrag
                              0
                              • Home
                              • Aktuell
                              • Tags
                              • Ungelesen 0
                              • Kategorien
                              • Unreplied
                              • Beliebt
                              • GitHub
                              • Docu
                              • Hilfe