Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Animierte CSS Wetter Symbole? Hilfe!

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    SOLVED Animierte CSS Wetter Symbole? Hilfe!

    This topic has been deleted. Only users with topic management privileges can see it.
    • Flexer
      Flexer last edited by

      TADAAAAA! Super genial. Vielen lieben Dank für deine Hilfe.

      Wie kann man denn CSS am besten sich selbst beibringen. PS bin Laie.

      Bildschirmfoto 2019-03-17 um 11.00.46.png

      foxriver76 N 2 Replies Last reply Reply Quote 0
      • foxriver76
        foxriver76 Developer @Flexer last edited by

        @Flexer

        <div class="weather">
          <div class="icon sun-shower">
          <div class="cloud"></div>
          <div class="sun">
            <div class="rays"></div>
          </div>
          <div class="rain"></div>
        </div>
        
        <div class="icon thunder-storm">
          <div class="cloud"></div>
          <div class="lightning">
            <div class="bolt"></div>
            <div class="bolt"></div>
          </div>
        </div>
        
        <div class="icon cloudy">
          <div class="cloud"></div>
          <div class="cloud"></div>
        </div>
        
        <div class="icon flurries">
          <div class="cloud"></div>
          <div class="snow">
            <div class="flake"></div>
            <div class="flake"></div>
          </div>
        </div>
        
        <div class="icon sunny">
          <div class="sun">
            <div class="rays"></div>
          </div>
        </div>
        
        <div class="icon rainy">
          <div class="cloud"></div>
          <div class="rain"></div>
        </div>
        </div>
        

        CSS: mache alles vor .icon weg und füge zusätzlich das ein

        .weather {
          max-width: 42em;
          padding: 2em;
          margin: 0 auto;
          color: #161616;
          font-family: 'Roboto', sans-serif;
          text-align: center;
          background-color: currentColor;
        }
        
        1 Reply Last reply Reply Quote 0
        • foxriver76
          foxriver76 Developer @Flexer last edited by

          @Flexer freut mich. Ich suche meistens das Problem auf Google/stackoverflow, gibt allerdings auch gute deutsche Quellen für html und css.

          1 Reply Last reply Reply Quote 0
          • Stratos Gkrekidis
            Stratos Gkrekidis @Flexer last edited by

            @flexer Hallo kannst du vielleicht dein code für die animierte wettersymbole hochladen.Danke ich finde die super

            1 Reply Last reply Reply Quote 0
            • N
              nousefor82 @Flexer last edited by

              @flexer

              Hi,

              wie baust du das in deine VIS ein.

              Also wie steuerst du dann je nach Datenpunktinhalt (z.B.: daswetter) das richtige icon an?

              Gruß

              Stratos Gkrekidis 1 Reply Last reply Reply Quote 0
              • Stratos Gkrekidis
                Stratos Gkrekidis @nousefor82 last edited by

                @nousefor82 hi das mache ich mit vis bind

                N 1 Reply Last reply Reply Quote 0
                • N
                  nousefor82 @Stratos Gkrekidis last edited by

                  @stratos-gkrekidis

                  hi, kannst du das etwas tiefer legen? 😄

                  Stratos Gkrekidis 1 Reply Last reply Reply Quote 0
                  • Stratos Gkrekidis
                    Stratos Gkrekidis @nousefor82 last edited by

                    @nousefor82 mit ein function in vis scripts

                    N 1 Reply Last reply Reply Quote 0
                    • N
                      nousefor82 @Stratos Gkrekidis last edited by

                      @stratos-gkrekidis

                      Kannst du dein Skript hier zur Verfügung stellen? Würde mich interessieren wie das funktioniert.

                      Danke

                      Stratos Gkrekidis 1 Reply Last reply Reply Quote 0
                      • Stratos Gkrekidis
                        Stratos Gkrekidis @nousefor82 last edited by

                        @nousefor82 lade mal dein code(html css und script) hoch das ich des gleich bei mir teste

                        N 1 Reply Last reply Reply Quote 0
                        • N
                          nousefor82 @Stratos Gkrekidis last edited by

                          @stratos-gkrekidis

                          Ich habe noch garkein Skript😕

                          Stratos Gkrekidis 1 Reply Last reply Reply Quote 0
                          • Stratos Gkrekidis
                            Stratos Gkrekidis @nousefor82 last edited by

                            @nousefor82 @Flexer @foxriver76
                            Hier ein gif aus mein vis screensaver mit animierte wetter symbol .

                            Weather icon.gif

                            1 Reply Last reply Reply Quote 1
                            • First post
                              Last post

                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            519
                            Online

                            31.9k
                            Users

                            80.1k
                            Topics

                            1.3m
                            Posts

                            material css vis
                            4
                            16
                            1678
                            Loading More Posts
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes
                            Reply
                            • Reply as topic
                            Log in to reply
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                            The ioBroker Community 2014-2023
                            logo