Montag, Januar 27, 2020

CSS Text-Geschnitzt oder-Gedrückt-Effekt

Geht man hier – http://djangocon.us/. Ganz oben auf der djangocon-logo ist da. Dieses logo ist der gesamte text & der text ist wie innen gedrückt. Es Art von fühlt sich an wie es ist schon geschnitzt.

Habe ich in der CSS & nicht bekommen, was Eigentum könnte diesen Effekt bewirken. Jeder weiß,?

CSS Text-Geschnitzt oder-Gedrückt-Effekt

UPDATE: Sieht aus wie ich falsch lag. Das logo an der Spitze ist ein Bild. Aber der text darunter ist nicht. Gibt den gleichen text gedrückt. Dunkelgrün rechteckigen Feld (unterhalb der Navigationsleiste).

InformationsquelleAutor | 2010-12-11

6 Kommentare

  1. 2

    Text-shadow richtig ist. Ich benutze es regelmäßig und es können einige interessante Effekte (obwohl es sollte nicht herangezogen werden, für etwas kritisch, da die browser-Unterstützung ist nicht komplett noch).

    Jedoch, wie die anderen Poster haben auch erklärt, dass Sie das Bild verknüpft ist gut…ein Bild. Sie kann leicht erreichen diesen Effekt in Photoshop mit Hilfe der blending-Optionen auf einer Ebene und spielen Sie entweder mit unverpixelte Schlagschatten oder abgeflachte Kante/Relief “ – Einstellungen. Dies ist die zuverlässigere Art der Erfüllung der Aufgabe, da die image-Unterstützung in Browsern ist offensichtlich mehr Breite als CSS-3-Unterstützung.

    Ich würde in der Regel irren auf der Seite ein Bild, das für etwas wichtiges wie ein logo oder eine große Ankündigung. Außerdem können Sie kontrollieren, anti-aliasing mit einem Bild, etwas, was Sie nicht haben vollständige Kontrolle über die Verwendung von CSS 3 (obwohl die meisten browser-basierte anti-aliasing ist verdammt schön).

    Ein besseres Beispiel auf der Seite der Verwendung von text-shadow ist in der Fußzeile. Hier ist die berechnete Stil aus Chrome:

    CSS Text-Geschnitzt oder-Gedrückt-Effekt

  2. 1

    Einen schnellen Blick mit firebug, und es ist die text-shadow-Eigenschaft. Ich habe es nie benutzt mich.

  3. 0

    http://css3please.com ist der einfachste Weg, sich daran zu erinnern diese, finde ich.

    • Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert.
    • Punkt getroffen. Betrachten Sie meine Antwort eine meta-Antwort: „Wenn Sie Fragen haben, können Sie in der Regel Antworten Sie auf diese Website.“

Kostenlose Online-Tests