SOLVED Animierte CSS Wetter Symbole? Hilfe!

[Flexer]

Hallo Freunde der visuellen Kunst,

ich versuche diese animierten Wettersymbole in meine Vis einzubinden.
https://codepen.io/joshbader/pen/EjXgqr#code-area

Leider bin ich mir nicht sicher wie ich das machen soll. Gut ein HTML Widget mit dem HMTL Code ist klar, aber was mache ich genau mit dem CSS Part. Wenn ich den CSS Code im HTML Widget unter dem Reiter CSS eingebe verändert sich mein VIS Editor komplett.

Vielleicht hat jemand eine Idee?

[foxriver76]

@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;
}

[foxriver76]

@Flexer das ganze vor dem klassenspezifischem muss auf jeden Fall weg, weil du mit sowas wie p natürlich alle paragraphs änderst und nicht nur bezogen auf ein Widget und dir geht es ja sowieso nur um die icons, also mach mal alles vor .icon weg.

[Flexer]

Ok das versuche ich gleich mal melde mich dazu.

[Flexer]

So sieht das jetzt aus wenn ich alles vor .icon wegmache. Irgendwie nicht so der Hit. Der Editor aber ist nicht betroffen. Hast du noch eine Idee? Sollte ja eigentlich so aussehen wie auf der Seite mit dem Quelltext.

Viele Grüße

[foxriver76]

@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;
}

[Flexer]

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

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

[foxriver76]

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

[Stratos Gkrekidis]

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

[nousefor82]

@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]

@nousefor82 hi das mache ich mit vis bind

[nousefor82]

@stratos-gkrekidis

hi, kannst du das etwas tiefer legen?

[Stratos Gkrekidis]

@nousefor82 mit ein function in vis scripts

[nousefor82]

@stratos-gkrekidis

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

Danke

[Stratos Gkrekidis]

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

[nousefor82]

@stratos-gkrekidis

Ich habe noch garkein Skript

[Stratos Gkrekidis]

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