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ß,?
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).
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Verwenden
text-shadow: 0 1px 0 color;und erhalten Sie den gleichen Effekt.Wenn Sie weitere Informationen benötigen, schauen Sie http://www.css3.info/preview/text-shadow/
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:
Du willst die
text-shadowEigenschaft. http://www.quirksmode.org/css/textshadow.htmlEdit: aber offenbar die Seite, die Sie verlinkt ist, eigentlich über die Bilder, um es zu erreichen. http://djangocon.us/site_media/static/img/header.png
Einen schnellen Blick mit firebug, und es ist die text-shadow-Eigenschaft. Ich habe es nie benutzt mich.
Mit
text-shadowEigenschaft, die Sie erreichen können Text-Gedrückt-Effekt. Siehe dieses Beispiel http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.htmlhttp://css3please.com ist der einfachste Weg, sich daran zu erinnern diese, finde ich.