XF2.0 Onlinestatus animiert und besser sichtbar

Wer das "Dreieck" im Avatar nicht mag (schaut aus wie eine Todesanzeige ), und eher auf den Punkt wie in "Skype" steht, kann die Optik etwas verfeinern.

Folgender Code gilt für XF2, die in die extras.css eingetragen wird:

Hier gehts zur Ressource => XF2.0 - Animierter Onlinestatus

Top/Left/Border - px müssen evtl. leicht angepasst werden, da ich meine Bereiche grundsätzlich etwas anders gestaltet habe als die "Norm".
Wer den Punkt rechts haben möchte, gibt statt "left" ein "right" ein, und fügt darunter ein zusätliches "left:auto" hinzu um den noch vorhandenen Originalwert "left: -1px" zu überschreiben.

Wer das auch für XF1 haben möchte - der Code lautet:
(ungetestet, da kein XF1 zur Hand, nur teils in diesem Forum probiert)

Hier gehts zur Ressource => XF2.0 - Animierter Onlinestatus

Liebe Grüsse:
Tammy

 

Und wer es nicht so einfarbig mag, kann den @keyframe block gegen diesen austauschen.
Schaut dann nicht so "erdr¨ckend" aus wenn sich der Punkt vergrössert, weil das grün etwas heller wird :

Code (Text):

@keyframes onlinestatus {
    0% { transform: scale(1, 1); border: 8px solid #7fb900;}
    50% { transform: scale(1.4, 1.4); border: 8px solid #9af644;}
   100% { transform: scale(1, 1); border: 8px solid #7fb900;}              
}

Liebe Grüsse:
Tammy

 

Screenshots?

 

Ist schlecht mit einer Animation Deshalb hab ich das kleine 100kb grosse AVI als Zip angehängt. Auch das ging leider nur als Zip...

Evtl. erweitere ich das sogar ein wenig (z.B. Wellenf¨rmig mit auslaufendem opacity) wenn generell interesse an sowas besteht.

LG: Tammy

Nachtrag:
Trotzdem hier nochmal mit der Farbänderung der Anhang (AVI File)

 

Oder einfach ein Youtube oder Vimeo Account und dann hier einbinden. Aber ein Screenshot, wo es grad aufblinkt häts auch schon getan.

 

Das war sogar mein erster Weg, aber ich habe dort keine Schreibrechte...

LG:
Tammy

 

Danke tamara

 

Hallo @Laser1508,

bitte verwende nicht mehr obigen Code für die 2.x. Ich wusste damals nicht wie das hier im Forum läuft.
Gehe bitte zur Ressource: XF2.0 - Animierter Onlinestatus

Da sind auch einige Änderungen vorgenommen worden.


LG: Tammy