Rechteckigen "text-shadow"?

[Ede_123]

Hallo zusammen,

gibt es eigentlich eine Möglichkeit eine Art "text-shadow" zu erzeugen, der sich in der Größe jedoch nicht an den verwendeten Zeichen orientiert, sondern eine gleichmäßige rechteckige Form in der Größe des Texts besitzt?

Schlussendlich möchte ich so etwas wie einen "box-shadow" erreichen. Dieser soll jedoch nicht das Eltern-Element des Texts umgeben, sondern den Text selbst. Der Schatten soll also zusammen mit dem Text im Eltern-Element enthalten sein.

Grüße
Ede_123

P.S. Verwenden will ich das ganze um das Design meines Firefox anzupassen. Ich kann also nicht einfach den Text nochmal zusätzlich verschachteln o.Ä., sondern muss mit dem Arbeiten, was da ist (und das ist im Moment eine Titelleiste mit schwarzem Text auf dunkelblauem Grund; der Text soll deshalb mit einem helleren Schatten hinterlegt werden um die Lesbarkeit zu erhöhen).

[Matthias Apsel]

Om nah hoo pez nyeetz, Ede_123!

P.S. Verwenden will ich das ganze um das Design meines Firefox anzupassen. Ich kann also nicht einfach den Text nochmal zusätzlich verschachteln o.Ä., sondern muss mit dem Arbeiten, was da ist (und das ist im Moment eine Titelleiste mit schwarzem Text auf dunkelblauem Grund; der Text soll deshalb mit einem helleren Schatten hinterlegt werden um die Lesbarkeit zu erhöhen).

Und background-color kommt nicht infrage?

Matthias

[Ede_123]

Und background-color kommt nicht infrage?

Nein, wenn ich nicht irgendwas übersehe dann nicht. Zum einen soll der Hintergrund "diffus" (d.h. weichgezeichnet) sein, zum anderen soll wirklich nur der Text (und nicht die komplette umgebende Titelleiste) hinterlegt sein.

[Matthias Apsel]

Om nah hoo pez nyeetz, Ede_123!

Nein, wenn ich nicht irgendwas übersehe dann nicht. Zum einen soll der Hintergrund "diffus" (d.h. weichgezeichnet) sein, zum anderen soll wirklich nur der Text (und nicht die komplette umgebende Titelleiste) hinterlegt sein.

Wie passt du denn das Design des Firefox überhaupt an?

Matthias

[Ede_123]

Wie passt du denn das Design des Firefox überhaupt an?

Du meinst wie ich mein CSS in den Browser kriege? Via UserChrome.css.

[Matthias Apsel]

Om nah hoo pez nyeetz, Ede_123!

Du meinst wie ich mein CSS in den Browser kriege? Via UserChrome.css.

Ja, auch. Und jetzt bitte noch den entsprechenden Selektor und den zugrunde liegenden Quelltext.

Matthias

[Ede_123]

Ja, auch. Und jetzt bitte noch den entsprechenden Selektor und den zugrunde liegenden Quelltext.

Naja, das ist etwas schwierig, da es sich bei dem Quelltext ja nicht um richtiges HTML sondern XUL handelt.

Derzeit habe ich lediglich

#toolbar-menubar {  
  text-shadow: 0 0 0.8em #FFF, 0 0 0.8em #FFF, 0 0 0.5em #FFF, 0 1px 0 rgba(255, 255, 255, 0.5) !important;  
}

da stehen, um zumindest etwas Kontrast zum Hintergrund zu bekommen.

Der XUL Code sieht vereinfacht etwa so aus (soferns denn wirklich weiter hilft):

<toolbar id="toolbar-menubar">  
    <toolbaritem id="menubar-items" align="center">  
        <menubar id="main-menubar">  
            <menu id="file-menu" label="Datei"></menu>  
            <menu id="edit-menu" label="Bearbeiten"></menu>  
            <menu id="view-menu" label="Ansicht"></menu>  
            ...  
            <menu id="helpMenu" label="Hilfe" accesskey="H" _moz-menuactive=""></menu>  
        </menubar>  
    </toolbaritem>  
    <toolbarseparator id="customizableui-special-separator1"></toolbarseparator>  
    <toolbaritem id="titlebar-text-container" label="Titlebar Text">  
        <label id="titlebar-text" value="Mozilla Firefox"></label>  
    </toolbaritem>  
</toolbar>

[Matthias Apsel]

Om nah hoo pez nyeetz, Ede_123!

Du könntest versuchen, den Schatten mit einem großen Wert für den Weichzeichner den Kindelementen zu geben. Dazu overflow hidden.

Oder eine Hintergrundfarbe für die Kindelemente?

Matthias

[Ede_123]

Du könntest versuchen, den Schatten mit einem großen Wert für den Weichzeichner den Kindelementen zu geben. Dazu overflow hidden.

Habe ich schon probiert. Selbst wenn ich einen sehr großen Weichzeichenradius wähle, sind die Umrisse des Schattens immer noch "ausgefranst", d.h. die Struktur des Textes ist auch im Schatten noch zu erkennen.
Overflow hidden erzeugt dann wieder hässliche Kanten (was ich vermeiden wollte) und sieht damit im Grunde fast wieder wie eine einheitliche Hintergrundfarbe aus.

Oder eine Hintergrundfarbe für die Kindelemente?

Das scheint die einzige Lösung zu sein, auch wenn sie mir nicht so recht gefällt...
Eine Möglichkeit eine Hintergrundfarbe zum Rand hin zu Transparenz auszublenden geht ja auch nur mit Gradienten, oder? Und hier käme dann auch nur ein radialer Gradient in Frage, der nunmal auch wieder nicht rechteckig ist (was ja mein eigentlicher Wunsch war).

[Matthias Apsel]

Om nah hoo pez nyeetz, Ede_123!

Oder eine Hintergrundfarbe für die Kindelemente?

Das scheint die einzige Lösung zu sein, auch wenn sie mir nicht so recht gefällt...
Eine Möglichkeit eine Hintergrundfarbe zum Rand hin zu Transparenz auszublenden geht ja auch nur mit Gradienten, oder? Und hier käme dann auch nur ein radialer Gradient in Frage, der nunmal auch wieder nicht rechteckig ist (was ja mein eigentlicher Wunsch war).

Es gibt auch innenliegende box-shadows.

Matthias

[Ede_123]

Es gibt auch innenliegende box-shadows.

Die wären dann aber zur Mitte hin transparent und außen farbig (also gerade falsch herum), oder übersehe ich was? Denn prinzipiell wäre das genau die Form, die ich mir vorstelle.

[T-Rex]

Schlussendlich möchte ich so etwas wie einen "box-shadow" erreichen. Dieser soll jedoch nicht das Eltern-Element des Texts umgeben, sondern den Text selbst. Der Schatten soll also zusammen mit dem Text im Eltern-Element enthalten sein.

Dann benutz doch einfach box-shadow.
Aus deinen weiteren Kommentaren entnehme ich dass du eine Überschrift so stylen möchtest. Dann mach es so:
<h1><span>meine Überschrift</span></h1>
.h1 span
{
   box-shadow: 0px 0px 5px red;
   background-color: #passendes rot zum box shadow.
}

Gruß
vom HSV Spieler abwerbende
T-Rex

[Ede_123]

Dann benutz doch einfach box-shadow.
Aus deinen weiteren Kommentaren entnehme ich dass du eine Überschrift so stylen möchtest. Dann mach es so:
<h1><span>meine Überschrift</span></h1>
.h1 span
{
   box-shadow: 0px 0px 5px red;
   background-color: #passendes rot zum box shadow.
}

Dadurch wird der "Schatten" aber zu groß, d.h. größer als das umgebende Element.
In meinem Fall müsste der Schatten jedoch kleiner sein als das Elternelement, d.h. vollständig im <span> aus deinem Beispiel enthalten sein.