it-swarm.com.de

Hinzufügen von Textschatten zu Ihrer gesamten Website

Ich möchte dem gesamten Text einer Website Schatten hinzufügen. Der Text befindet sich in verschiedenen Elementen der Website.

Jetzt dachte ich an zwei Dinge.

1) Fügen Sie allen Containern mit Text eine Klasse hinzu und geben Sie der Klasse einfach den Textschattenstil. Dies wird mir eine Menge Arbeit geben, indem ich eine Klasse mit allen Elementen auf der Website hinzufüge. Und was macht das mit dem DOM?

2) Füge allen Elementen ein Styling hinzu:

h1,h2,h3,li,p,span{text-shadow:1px 1px 1px rgba(51, 69, 78, 0.5);}

Welche der beiden ist besser zu verwenden, oder gibt es eine bessere, optimierte Möglichkeit, dies zu tun?

1
Saif Bechan

IMO sollten Sie keine bestimmte Klasse nur für text-shadow erstellen. Das ist so, als würde man eine Präsentation wieder in das Dokument einfügen. text-shadow sollte zu den Elementen (oder vordefinierten Klassen) hinzugefügt werden, die dies erfordern. Von Ihren beiden Optionen wäre also # 2 meine Empfehlung, obwohl ich gesagt hätte, dass Sie es nur einer Teilmenge vordefinierter Klassen hinzufügen sollten. Und nicht alle Elemente/Klassen würden den gleichen Schattentyp erfordern.

Wollen Sie wirklichtext-shadow zu jedem bisschen Textinhalt hinzufügen ?! Bei großen Textblöcken sollte meiner Meinung nach text-shadow nicht angewendet werden. Dies könnte das Lesen des Textes erschweren und damit zu Problemen mit der Barrierefreiheit führen.

4
MrWhite

Wenn dies für den gesamten Text gelten soll, müssen Sie nur mit Folgendem beginnen:

body, input, textarea, select {
    text-shadow : 1px 1px 1px rgba(51, 69, 78, 0.5);
}

Beim Testen müssen Sie möglicherweise ein oder zwei weitere Elemente hinzufügen, um eine vollständige Abdeckung zu erzielen. Beachten Sie beispielsweise, dass einige Formularelemente explizit eingeschlossen werden mussten. sie nerven so. Denken Sie auch daran, dass dies nicht auf alles zutrifft, was nicht tatsächlich in des Dokuments ist, wie z. B. iframes.

Wenn Sie wirklich betrügen möchten, können Sie die Eigenschaft einfach auf den universellen Selektor anwenden:

* {
    text-shadow : 1px 1px 1px rgba(51, 69, 78, 0.5);
}

Angesichts einiger Erkenntnisse darüber, dass dies ineffizient ist (es wird auf jedes einzelne Element auf der Seite angewendet), und der Art der Verarbeitung, die zum Erstellen von Dingen wie Schatten erforderlich ist, ist dies möglicherweise keine gute Idee.

3
Su'

Wenden Sie es nicht einzeln auf eine Reihe von Elementen an. setzen Sie es einfach oben und der Schatten wird auf allen enthaltenen Text angewendet.

body { text-shadow:1px 1px 1px rgba(51, 69, 78, 0.5); }

(Wenn dies nicht so funktioniert hätte, hätte die Dokumentstruktur viele Unannehmlichkeiten mit sich gebracht, z. B. wenn Sie einen Schatten in einem Absatz angegeben hätten, der einen Link enthielt.)

1
Kevin Reid