hex farbe,wie Funktioniert es

  • Habe schon einiges gefunden und auch viele fragen dadurch beantwortet bekommen.

    Rgb Farben und hsl ,verstehe ich ja wie es geht .

    Weil wollte ein Script Programieren das von schwarz ,über rot, blau, gelb auf weiss durchläuft.

    Nun suche ich eine möglichkeit eine schleife zu machen womit sich alle Farben durchlaufen lassen,irgendwie.

    Nun wollte ich wissen wie die komischen Zahlen und Buchstaben in Hex Farbcode zusammen passen,ob es da eine regelmässigkeit gibt,womit man eine Schleife Programieren kann?:?:

  • Man kann sehr viel mit CSS-Animationen machen ohne Javascript, Timer und Schleifen. Nicht alles ist auch empfehlenswert, aber für diesen Fall ist es sehr gut geeignet und leicht zu lesen:
    https://jsfiddle.net/Sempervivum/Lqr3go8q/


    Wenn Du es jedoch programmieren wolltest, würde sich HSL am besten eignen, weil Du dann nur den Hue-Wert ändern musst, um verschiedene Farben zu bekommen.


    Der Hex-Farbcode ist auch nur RGB, wobei die Farben im Hex-Format, zweistellig, aneinander gereiht sind.

    https://de.wikipedia.org/wiki/Hexadezimalsystem

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • ja ich hatte schon mal so ein ähnliches problem und hatte es damals wie Sempervivum es auch sagte über css gemacht,das ist in meisten fällen einfacher..

    ich habe damals auch ein script gesucht und wollte selber eins machen ,aber wahr zu blöd den hex code zu verstehen.


    jetzt habe ich dazu gelernt

    https://jsfiddle.net/basti1012/gu2nntj5/6/

    oben siehst du wie die zahlen die einzelnen hexcodes werte anzeigen oder wie man sagt und unten habe ich eine schleife gebaut die die farben langsam verändern.

    schwarz,rot,gelb,weis

    schwarz blau,pink,weiss

    schwarz,grün,weis.


    man kann die schleife bestimmt noch verbessern das nicht jedesmal weiss und schwarz vorkommt,aber so gut bin ich noch nicht

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von basti1012 ()

  • Danke Sempervivum dein Script zeigt mir wie es mit Css geht,dachte das es schwerer ist.Kann man das den so auf alle Elemente und Links und Schrieft anwenden ?

    Ich will ja mal eine Homepage bauen,wo ein Auto mit drehender Felge zu sehen ist.

    Der benutzer soll mit den Felgenfarben rumspielen dürfen.

    Deshalb wollte ich ein Script haben,wo ich von mir ausdenke ,das man da einfacher drauf zu greifen kann..

    Dein anderer Link hat mich mit den Hex Farben etwas aufgeklärt! Danke!!!!


    basti1012 dein Script hat mir den Rest gegeben.

    Jetzt verstehe ich zumindest wie der Zahlensalat zustande kommt.

    Das Script gefällt mir soweit(Der untere Teil) und habe dazu eine Frage.Das Script stopt ja irgendwann,kann man das infinity machen?

    Habe zwar geschaut aber nix gefunden.

    Und währe es noch möglich ein übergang von blau auf grün einzubauen?

    Schön währe es noch ,das der Besucher sich 2 Farben aussuchen kann und dann die beiden Farben animiert werden,also von bis zu,

  • Zitat

    Kann man das den so auf alle Elemente und Links und Schrieft anwenden ?

    Grob gesagt kann man mit CSS alles animieren, was eine Maßeinheit bzw. ein Zahlenwert ist wie top, left, width, height etc. Wobei Farbe eine Ausnahme ist, aber Farben werden ja auch als Zahlenwerte definiert. Bzgl. Schrift kann man die Farbe animieren aber nicht den Text. Also für einen Countdown 100 auf 0 braucht man ein Skript, das geht nicht mit CSS.

    Zitat

    ein Auto mit drehender Felge

    Auch das kann man sehr gut mit einer CSS-Animation machen: transform:rotate(). Basti kennt sich damit aus.

  • Das Script gefällt mir soweit(Der untere Teil) und habe dazu eine Frage.Das Script stopt ja irgendwann,kann man das infinity machen?

    Habe zwar geschaut aber nix gefunden.

    Und währe es noch möglich ein übergang von blau auf grün einzubauen?

    Schön währe es noch ,das der Besucher sich 2 Farben aussuchen kann und dann die beiden Farben animiert werden,also von bis zu,

    Infinity geht da jetzt gerade nicht .Mach doch Seiten relod dann startet er auch neu :D


    nee scherz.nach den letzen schleifen durchlauf müssen die werte a,b,k wieder auf 0 gesetzt werden dann fängt er von vorne an.

    Wegen de3n farben wechseln kucke ich gerade ob hsl ,rgb und die anderen vieleicht einfacher währen ,das mit schleife zumachen und mehr farben abzudecken..


    Aber habe zur zeit nix zu tun.ich versuche dir mal was zu bauen wegen deiner drehende felge mit farbauswahl und animation

    Auch das kann man sehr gut mit einer CSS-Animation machen: transform:rotate(). Basti kennt sich damit aus.

    Ja wer dich als lehrer hat der lernt auch was dazu.:thumbup:

    Werde vieleicht mal ein css profi:?:

  • wie machst du sowas so schnell?? ich kriege das nicht mal ins fiddel kopiert(um zu schecken wies geht) und du machst ein komplett neues bild. habe zwar schon gescheckt das es mehre bilder sind,aber man muss ja auch erstmal die mehreren bilder erstellen und übereinander legen und was weiss ich alles ..gibt es da ein programm für oder hast du die felge jetzt komett selber in der zeit erstellt. sieht aber gut aus(fals die bilder noch nicht perfekt sein sollte sieht man es zumindest nicht)mir ist da nix aufgefallen..respekt

  • Zitat

    man muss ja auch erstmal die mehreren bilder erstellen und übereinander legen und was weiss ich alles ..gibt es da ein programm für oder hast du die felge jetzt komett selber in der zeit erstellt.

    Ich habe einfach ein Bild genommen, was ich im Internet gefunden habe. Und die Einzelbilder habe ich nicht jedes Mal neu gemacht, sondern aus dem Originalbild erzeugt, indem ich jeweils andere Teile heraus geschnitten habe. Dann passen sie automatisch übereinander. Weil das Bild relativ einfach ist, geht das Maskieren mit dem Zauberstab und das Ausschneiden ziemlich schnell. Ich habe dabei Photoshop Elements benutzt.


    Und das Skript brauchte ich überhaupt nicht anzupassen, nur die anderen Bilder übergeben.

  • kann mir mal einer sagen was ich falsch mache.?


    Wie bekomme ich den ausen kreiss der felge über die speichen,damit man den überstand nicht sieht.Z-index währe ja möglich aber dann müsste ich ja alles eine feste positionzuweissen oder geht das anders..


    Und war5um geht mein hover nicht???(felge soll sich dann mal anders rum drehen)

    oder geht das bei fiddel nicht

    https://basti1012.bplaced.net/…rdner=html-seminar&id=280


    EDIT habe das hover problem mit !important gelöst.weiss zwar nicht ob das richtig ist aber geht ..

    jetzt bleibt nur das problem mit den aussen kreiss,da finde ich keine lösung,aber vieleicht ihr

    Dieser Beitrag wurde bereits 4 Mal editiert, zuletzt von basti1012 ()

  • also heist das ,wenn ein elternteil animiert ist verliert er den z-index??habe ich das richtig verstanden?

    das hat er ja da schön bei codepen gezeigt.


    aber auch komisch das das so ist ,sachen gibts

  • https://basti1012.bplaced.net/…rdner=html-seminar&id=280


    zeile 41 .die felge soll sich andersrum drehen.

    stop und play läuft ja,aber rückwärts nicht.was für ein fehler habe ich da drinne?


    und sobald ich noch ein keyyframe erstelle.also das die felge rechts und links hin und her rollt ,dann rollt sie in riesen bogen im kreiss ,500px durchmesser oder so.noch einfach ein div vor bauengeht so einfach nicht .und wie man 2 keyframes auf eine id steuert kein plan ob das geht .


    ist ja eigentlich wie mein vor und zurück rollen sind ja auch 2 keyframes an ein element

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von basti1012 ()

  • Zitat

    stop und play läuft ja,aber rückwärts nicht.was für ein fehler habe ich da drinne?

    1. Du hast die Funktion erst ganz am Ende definiert, deshalb war sie zuvor, als Du sie dem Knopf zugewiesen hast, noch nicht definiert.
    2. Du hast für die Funktion und die ID des Knopfes den selben Namen verwendet.

    So funktioniert es:

    http://jsfiddle.net/Sempervivum/uL9A9/19/


    Zitat

    noch einfach ein div vor bauengeht so einfach nicht

    Ich habe es zwar nicht probiert, aber eigentlich sollte das der richtige Weg sein. Dann kannst Du beide Animationen unabhängig voneinander definieren.

  • Die Felgen menge zeigt nach mehreren wechsel,nur noch Müll an.

    Also bei 2-3 mal wechseln ist alles ok aber irgendwann spinnt es rum.

    Aber sonst ok,das springen der Felge könnte man noch weicher gestalten,so springt sie ein bischen eckig rum.

    Kann man die Fehler noch beheben?

  • stimmt habe nicht ran gedacht das ich bei ungerade zahlen die positsion der speichern geändert habe,und wenn man dann eine gerade speichen zahl ausgewählt hat waren die anderen noch falsch posisioniert.

    hoffe man versteht mich .

    jetzt geht es aber,und die felge springt jetzt etwas schöner.

    du kannst aber in der css mal rum spielen da kann man das springen auch selbst gestallten,zb rolle rückwärts oder so


    https://basti1012.bplaced.net/…rdner=html-seminar&id=280

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()