Styling a twitch chat

Tags:    css css3

Kære udviklere,

Jeg sidder og roder med styling til et plugin, der viser twitch chatten for den kanal der er tilknyttet. Jeg bruger programmet OBS, og har derfor installeret CLR plugin'et. Dette er irrelevant for jer, da dette er et CSS spørgsmål.

I dette plugin indtaster man url-adressen for twitch chatten, som er blevet vist af NightDev.

I dette CLR plugin har man mulighed for at style på chatten, da det bliver afviklet som alm. html og css. Chatten har simple effekter som standard, lavet i javascript.

Eksempel på en twitch chat, afviklet af NightDev: Link

Source Code:
Fold kodeboks ind/udHTML kode 


Jeg vil gerne lave en lidt federe styling, ligesom livestreameren Trick2g har. Her har jeg optaget en lille bid af hans livestream. Læg mærke til chatten i øverste venstre hjørne: Link

Man har kun mulighed for at arbejde med CSS, så mit spørgsmål er om man kan lave den effekt i CSS som han har. Jeg har ingen mulighed for at tilgå javascript-delen, efter hvad jeg ved.

Så hvis der er nogle der har nogle fifs til hvordan jeg løser dette, så er jeg lutter øre.

Håber at det er uddybet nok :-)



4 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
Måske noget i denne retning:

Fold kodeboks ind/udCSS kode 


Jeg har (ganske hurtigt) forsøgt at få det til at ligne chatten fra den video du viste. Jeg benytter mig af en CSS animation for at opnå effekten.

Håber det er noget du kan bruge.



Tak for svar! Dog virker det ikke helt. Jeg har lavet en optagelse af resultatet.

Youtube Link

Jeg har rodet efterfølgende lidt med den css du har skrevet, og har fundet ud af at fejlen ligger med animationen. Effekten bliver simpelthen ikke eksekveret. Tænker at der muligvis kan være begrænsninger ved css-delen når man styler på denne måde. Men kan så ikke helt forstå hvordan streameren "Trick2g" kan gøre det. Dog ser teksten også helt vildt mærkelig ud hvis man fjerner animations-delen.



Det var så lidt.

Det ser mærkeligt ud. Jeg har ikke umiddelbart noget svar. Hvad får du at vide hvis du inspicerer elementerne i browseren, eller kigger i konsollen?



Altså så skal jeg style direkte igennem browseren da jeg ikke har mulighed for at style direkte på websitet - ellers ville jeg have brugt JavaScript. Jeg kan prøve at vise hvordan jeg styler på chatten imorgen.



t