CSS Text geschnitzten oder gepressten Effekt

Question

Wenn man hier geht - http://djangocon.us/. Ganz oben steht das djangocon-Logo. Dieses Logo ist alles Text & der Text ist wie drinnen gedrückt. Es fühlt sich an wie es in geschnitzt wurde.

Ich habe in die CSS & nicht bekommen, welche Eigenschaft könnte diesen Effekt verursachen. Jeder weiß es?

UPDATE: Sieht aus wie ich es falsch. Das Logo an der Spitze ist ein Bild. Aber der Text darunter ist nicht. Gibt den gleichen gepressten Text. Dunkelgrünes Rechteck (unterhalb der Navigationsleiste).

Answer 1

Sie möchten die text-shadow Eigenschaft. http://www.quirksmode.org/css/textshadow.html

Edit: aber offensichtlich die Seite, die Sie verknüpft sind, verwendet tatsächlich Bilder, um es zu erreichen. http://djangocon.us/site_media/static/img/header.png

Answer 2

Verwenden Sie text-shadow: 0 1px 0 color; und Sie erhalten den gleichen Effekt.

Wenn Sie weitere Informationen benötigen, sehen Sie http://www.css3.info/preview/text-shadow/

Answer 3

Einen kurzen Blick mit Firebug, und es ist die text-shadow-Eigenschaft. Ich habe es nie selbst benutzt.

Answer 4

Text-Schatten ist korrekt. Ich benutze es regelmäßig und es kann einige interessante Effekte hervorbringen (obwohl es nicht für irgendeinen kritischen Punkt verwendet werden sollte, da die Browser-Unterstützung noch nicht abgeschlossen ist).

Wie jedoch auch andere Poster angegeben haben, ist das Bild, das Sie verlinkt haben, gut ... ein Bild. Sie können diesen Effekt in Photoshop einfach mit den Fülloptionen auf einer Ebene erzielen und entweder mit unverzerrten Schlagschatten oder mit Abschrägungs-/Prägungseinstellungen spielen. Dies ist der zuverlässigere Weg, um die Aufgabe zu erfüllen, da die Bildunterstützung in Browsern offensichtlich breiter ist als die CSS 3-Unterstützung.

Ich würde normalerweise auf der Seite eines Bildes für etwas Wichtiges wie ein Logo oder eine große Ankündigung irren. Außerdem können Sie das Anti-Aliasing mit einem Bild steuern, etwas, das Sie nicht vollständig mit CSS 3 steuern können (obwohl die meisten browserbasierten Anti-Alias-Funktionen ziemlich gut sind).

Ein besseres Beispiel auf der Seite der Verwendung von Text-Schatten ist in der Fußzeile. Hier ist der berechnete Stil von Chrome:

Answer 5

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

Answer 6

Mit der Eigenschaft text-shadow können Sie Text-Effekt erzielen. Beziehen Sie sich auf dieses Beispiel http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html