• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Text nicht Lesbar/Angenehm Lesbar

B

BluePeer

Neues Mitglied
Guten Abend die Herrschaften

Ich habe neuerdings Twitch für mich entdeckt und da ich von früher noch so ein paar php skills übrig hatte hab ich mir
ein paar "stats" in den stream gebastelt

Da wird also ein transparente html über dem video angezeigt

nach längerem stöbern und rumprobieren habe ich den text auch halbwegs sichtbar bekommen

CSS: 
body { background-color: rgba(0, 0, 0, 0) !important; margin: 0px auto; overflow: hidden; color: lime; text-shadow: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000; }

das ergebnis ist allerdings naja nichts halbes und nichts ganzes

Mein Problem besteht darin das der "schatten" nicht ausreichend ist um den text lesbar zu machen
er ist nur sehr "hart" lesbar und die wechsel hinter dem text von hell/dunkel machen das nicht einfacher

Ich habe leider so gar kein gespür für optic oder estetik

Hat vllt jemand von euch einen vorschlag wie man das besser lösen könnte?
das lime wäre schön aber eigentlich bin ich bei der gestaltung recht flexibel solange kein eckiger kasten großflächig um den text ist

um eine vorstellung vom scenario zu haben habe ich hier den "overlay" text auf diesem post mal hochgeladen
prntscr.com

Screenshot

Captured with Lightshot
prntscr.com prntscr.com

Bin bei so Optischen sachen immer recht hilflos

Hoffe mir kann jemand einen tipp geben wie oder womit man das lösen könnte

LG
BluePeer
 
Wie meinst du das genau ?
Du willst zb ein Video abspielen und dadrüber sollen Texte eingeblendet werden , ober rüber gescrollt ?
Weil dein Code ja auf <body> angewendet wird ?
 
naja also der text ist ein html dokument das mir mein webserver mittels php generiert
das wiederum wird in einem "emulierten(vollwertig)" Browser ein eine Leinwand montiert auf der ein gamecapture sitzt
das wird zusammengebacken (siehe screenshot) und als videostream gesendet

Der Hintergrund Hinter dem Transparenten HTML code ist halt variable

Edit: der text steht halt einfach nur als plaintext im body mit <br>
 
Ich verstehe das so das du eine Html Seite auf hast und dadrüber eine andere Html Seite einblenden tust ( durch php erstellt ).Was in deinen Beispiel Bild ja ein Grüner Text ist.
Warum gibst du deiner grünen Schrift nicht einen verdunkelten Hintgergrund ?
Du nutzt doch schon RGBA
Kuck mal ob das Beispiel zumindest so vom aussehen passen würde.
 
Zuletzt bearbeitet:
in live (als aufzeichnung) versteht man das vllt besser

Der Gründe text ist ein "Transparenter Browser" der auf einer digitalen leinwand liegt so wie im fernseh grafiken usw über das kamerabild gelegt werden (vllt ist das verständlicher ^^)

und ja der gedanke einfach einen transparenten hintergrund hinter den text zu legen ist mir auch gekommen aber das sieht ja gelinde gesagt noch schlimmer aus als ich es jetzt habe da große teile des primär inhalten so "verdeckt" werden

daher hatte ich ja versucht mit den schatten rumzuspielen was aber auch zu keinem Passablen ergebnis führt
und an der stelle endet mein verständnis von css und html dann auch

wenn es da wirklich nix gibt an anderen möglichkeiten werde ich wohl zwangsweise irgendwie jede einzelne zeile separieren und diese einzeln einfärben so dass das zumindest kein kasten entsteht

Ich hab sowas vor jahren mal auf einer website gesehen wo im Hintergrund ein html5 video lief und im vordergrund plaintext in einen div stand der (so dachte ich zumindest) mittels css um die buchstaben einen hell dunkel kontrast hatte und ähnlich einem schatten aber er wie ein glow ein nicht großes transparenten schwarzen schatten hatte
Kann auch sein das dies irgend eine html5 spielerei wahr was auch kein thema wäre da der "emulierte browser" ein vollwertiger chromium ist

ein tipp was das ist oder wie solche sachen heißen würde ja schon reichen dann wüsste ich zumindest wonach ich suchen muss
 
Danke Sempervivum das hat schon mal gut weitergeholfen danke
und basti dein tipp mit den filtern :)

werd noch ein wenig damit rumspielen aber soweit sogut sieht das schon mal deutlich besser aus aktuell
prntscr.com

Screenshot

Captured with Lightshot
prntscr.com prntscr.com

CSS: 
body {     
            margin: 0px auto;
            overflow: hidden;
            color: lime;
            text-shadow: 1px 1px 2px black, 1px -1px 2px black, -1px 1px 2px black, -1px -1px 2px black;
            filter: drop-shadow(2px 2px 2px black) drop-shadow(-2px -2px 2px black);
}

So hab ich das jetzt im screen sitzen. mal schauen ob das erstmal so passt oder ob ich vllt doch noch etwas breiter machen muss

Die "i"Punkte sowie "." ":" ","usw sehen zwar etwas mitgenommen aus aber zumindest ist der gesammt text jetzt deutlich besser zu lesen

Für weitere vorschläge oder auch andere ansätze bin ich aber natürlich offen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben