nicht angemeldet
Textumriss mit transparentem Text?
Matthias Apsel
Gunnar Bittersmann
robertroth
Matthias Scharwies
Tabellenkalk
MudGuardWie kann man erreichen, dass der Text selbst transparent ist, während man mithilfe von text-shadow einen Schatten erzeugt?
Die Farbe "transparent" existiert nicht. Die Verwendung von "opacity:0" führt dazu, dass auch der Umriss nicht dargestellt wird.
-
Hallo Holger,
Wie kann man erreichen, dass der Text selbst transparent ist, während man mithilfe von text-shadow einen Schatten erzeugt?
Im Grunde so:
<span> test text </span> <style> span { color: #fff; text-shadow: 1px 0px 4px #000; } </style>Die Idee dahinter ist, dass man den Schatten quasi direkt hinter dem Text plaziert und ihm die Farbe des Hintergrunds gibt.
transparentgibt es zwar, aber dann wäre der Schatten ja vollständig sichtbar während du ja willst, dass der Schriftzug nicht durchsichtig ist sondern den Schatten verdeckt.LG,
CK-
Hallo Christian Kruse,
Die Idee dahinter ist, dass man den Schatten quasi direkt hinter dem Text plaziert und ihm die Farbe des Hintergrunds gibt.
transparentgibt es zwar, aber dann wäre der Schatten ja vollständig sichtbar während du ja willst, dass der Schriftzug nicht durchsichtig ist sondern den Schatten verdeckt.Ich denke, der Schriftzug soll zwar den Schatten verdecken aber nicht den Hintergrund der Seite. Das ist mit Schatten so nicht möglich, weil der Schatten immer zwischen Element und Seitenhintergrund ist. Eventuell führt Clipping zum Ziel.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Moin!
Ich finde schon, dass das Ergebnis der Bemühungen von Christian mit Holgers Zielbeschreibung übereinstimmt.
Schwieriger wird es, wenn Holger echte Transparenz wollte, z.B. weil eine Grafik (Farbverlauf ...) im Hintergrund sichtbar sein soll.
Dann hilft (bei bestehenden Nachteilen: kein Text) "Grafik" oder (WOMÖGLICH!) eine passende "outlined"-Schriftype.
Jörg Reinholz
-
Hallo Jörg Reinholz,
Schwieriger wird es, wenn Holger echte Transparenz wollte, z.B. weil eine Grafik (Farbverlauf ...) im Hintergrund sichtbar sein soll.
eben.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Moin!
eben.
Naja. Da wir also durchaus darin übereinstimmen, dass Holger jetzt mit Konkretisierungen aufwarten muss, üben wir uns halt in Geduld...
Jörg Reinholz
-
Hallo,
transparenz bei Schriften kenne ich auch nur bei Outline-Schriftarten, siehe z. B.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Outline Schriften</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /* Googe-Fonts */ /* font-family: 'Open Sans', sans-serif; */ /* font-family: 'Roboto Slab', serif; */ /* font-family: 'Merriweather Sans', sans-serif; */ /* font-family: 'Rye', cursive; */ /* font-family: 'Ribeye Marrow', cursive; */ /* font-family: 'Ewert', cursive; */ /* font-family: 'Jacques Francois Shadow', cursive; */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700|Merriweather+Sans|Niconne|Rye|Ribeye+Marrow|Ewert|Jacques+Francois+Shadow); /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 120%; } body { padding: 0; background-color: orange; } p { font-size: 5rem; letter-spacing: 0.5rem; font-weight: bold; } p:nth-child(1) { font-family: 'Rye', cursive; } p:nth-child(2) { font-family: 'Ribeye Marrow', cursive; } p:nth-child(3) { font-family: 'Ewert', cursive; } p:nth-child(4) { font-family: 'Jacques Francois Shadow', cursive; } </style> </head> <body> <p>Testtext</p> <p>Testtext</p> <p>Testtext</p> <p>Testtext</p> </body> </html>Gruss
MrMurphy
-
-
-
-
@@Matthias Apsel
Eventuell führt Clipping zum Ziel.
Oder Masking: There’s a shadow on the wall.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
Schönes Beispiel.
Ich habe es zwar noch nicht verstanden, aber gleich mal gebunkert :-)
Oder Masking: There’s a shadow on the wall.
Woran liegt das jetzt, dass der Schriftzug (vom selben Server abgerufen) auf dem Tablet ziemlich weit am oberen Rand des Viewports klebt und auf dem Standard-PC (4:3-Display) ziemlich genau in der vertikalen Mitte des Viewports sitzt?
Spirituelle Grüße
Euer Robert
robert.r@online.de--
Möge der wahre Forumsgeist ewig leben!-
Hallo robertroth,
Oder Masking: There’s a shadow on the wall.
Woran liegt das jetzt, dass der Schriftzug (vom selben Server abgerufen) auf dem Tablet ziemlich weit am oberen Rand des Viewports klebt und auf dem Standard-PC (4:3-Display) ziemlich genau in der vertikalen Mitte des Viewports sitzt?
Weil dein Tablet
flexnur mit vendor kann?Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
Hallo robertroth,
Oder Masking: There’s a shadow on the wall.
Woran liegt das jetzt, dass der Schriftzug (vom selben Server abgerufen) auf dem Tablet ziemlich weit am oberen Rand des Viewports klebt und auf dem Standard-PC (4:3-Display) ziemlich genau in der vertikalen Mitte des Viewports sitzt?
Weil dein Tablet
flexnur mit vendor kann?Was heißt das "Verkäufer" jetzt in diesem Zusammenhang auf Deutsch?
Ok, der FF vom Tablet macht es genauso, wie der auf dem Standard-PC.
Haben wir hier im Forums-Wiki schon ein Nachhilfepapier für Flexbox? Damit müsste ich mich dann wohl mal beschäftigen. Ist für mich im Moment so klar, wie "Böhmische Dörfer", oder "Bahnhof", ...
Spirituelle Grüße
Euer Robert
robert.r@online.de--
Möge der wahre Forumsgeist ewig leben!-
Weil dein Tablet
flexnur mit vendor kann? Was heißt das "Verkäufer" jetzt in diesem Zusammenhang auf Deutsch?Haben wir hier im Forums-Wiki schon ein Nachhilfepapier für Flexbox? Damit müsste ich mich dann wohl mal beschäftigen. Ist für mich im Moment so klar, wie "Böhmische Dörfer", oder "Bahnhof", ...
LG Matthias
-
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
Weil dein Tablet
flexnur mit vendor kann? Was heißt das "Verkäufer" jetzt in diesem Zusammenhang auf Deutsch?Haben wir hier im Forums-Wiki schon ein Nachhilfepapier für Flexbox? Damit müsste ich mich dann wohl mal beschäftigen. Ist für mich im Moment so klar, wie "Böhmische Dörfer", oder "Bahnhof", ...
Schankedön ;-)
Spirituelle Grüße
Euer Robert
robert.r@online.de--
Möge der wahre Forumsgeist ewig leben!
-
-
-
-
@@robertroth
Schönes Beispiel.
Ich habe es zwar noch nicht verstandenGeht mir auch so. Ich weiß auch noch nicht ganz genau, warum das so funktioniert.
Nicht besonders intuitiv, den Schatten weiß zu machen, damit er möglichst dunkel ist. Ah, Masking. Da wird Helligkeit in Alphatransparenz umgewandelt?
Gestern war ich noch mit Sara zusammen. Die hätte ich das fragen können.
Woran liegt das jetzt, dass der Schriftzug (vom selben Server abgerufen) auf dem Tablet ziemlich weit am oberen Rand des Viewports klebt und auf dem Standard-PC (4:3-Display) ziemlich genau in der vertikalen Mitte des Viewports sitzt?
Wie Matthias sagte. Hab im Pen mal Prefixfree angeknipst.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
-
-
-
-
-
Hallo,
Die Farbe "transparent" existiert nicht.
Das stimmt nicht. Die Verwendung von transparent führt nur nicht zur Lösung deines Problem.
Vermutlich könntest du deine Spielerei mit einer Grafik verwirklichen.
Gruß
Kalk -
Hi,
Wie kann man erreichen, dass der Text selbst transparent ist, während man mithilfe von text-shadow einen Schatten erzeugt?
Die Farbe "transparent" existiert nicht.
Wirklich?
transparent gibt es in CSS als Farbwert, außerdem gibt es rgba-Werte, so daß man auch Teiltransparenz haben kann.
Inwieweit die beiden Varianten bei der Schriftfarbe funktionieren, habe ich nicht ausprobiert, sollte aber - siehe Definition
cu,
Andreas a/k/a MudGuard-
@@MudGuard
transparent gibt es in CSS als Farbwert, außerdem gibt es rgba-Werte
Ja, und auch die intuitiveren hsla-Werte.
Inwieweit die beiden Varianten bei der Schriftfarbe funktionieren,
Warum die Varianten bei diesem Problem nicht funktionieren, hat Matthias schon erklärt.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-