Umrandung der SChrift?
Mark
- css
0 Sven0 Thomas Luethi
Hallo!
Gibt es eine Möglichkeit mit CSS eine Schrift zu umranden?
So ähnlich wie dieser Glow-Effekt nur halt, das die umrandung 1 oder 2pixel nur dick ist!
Greets Mark
Hi Mark,
das wäre eine Möglichkeit:
<div style="border:#000000 1px solid;width:50px"> Text</div>
Grüße aus Oberfranken
Sven
Sorry, aber so meinte ich das nicht!
Sondern, das die Schrift ENG umrandet ist, also jeder Buchstabe! Nicht als Kasten!
Trotzdem Danke!
Das geht denke ich nicht. (außer jeden Buchstaben in eine eigene Tabellenzelle zu schreiben, was wohl eher sinnlos ist.)
Grüße aus Oberfranken
Sven
Tach
Sondern, das die Schrift ENG umrandet ist, also jeder Buchstabe! Nicht als Kasten!
Du kannst mal folgendes versuchen (ohne Erfolgsgarantie):
Schreibe den Text zweimal, einmal normal und einmal fett. Dann packe die zwei Zeilen in sich überlappende divs.
Damit könnte die Fettschrift richtig ausgerichtet wie eine Kontur wirken. Das ganze klappt natürlich nur mit einem monospaced-Font wie Courier (wenn überhaupt).
Thomas J.
Gibt es eine Möglichkeit mit CSS eine Schrift zu umranden?
So ähnlich wie dieser Glow-Effekt nur halt, das die umrandung 1 oder 2pixel nur dick ist!
Ich bin nicht sicher, ob ich Deine Frage richtig verstehe.
Um einen rechteckigen Rahmen um jeden einzelnen Buchstaben zu machen, muss man wohl jeden Buchstaben in ein <SPAN> oder sonst ein Element einpacken:
CSS:
p.buchstrand span { margin:2px; border:1px solid #FFCC00; }
HTML:
<p class="buchstrand"><span>A</span><span>b</span><span>c</span></p>
Mit <b> statt <span>:
CSS:
p.buchstrand b { margin:2px; border:1px solid #FFCC00; }
HTML:
<p class="buchstrand"><b>A</b><b>b</b><b>c</b></p>
Zum Anschauen:
http://www.tiptom.ch/tests/fremdes/letterglow.html
Wenn Du allerdings einen Spezial-Effekt willst, so wie er z.B. auf
http://www.htmlcenter.com/tutorials/tutorials.cfm/127/Photoshop/
beschrieben ist, bleibt Dir bisher nur die Moeglichkeit, eine Grafik zu machen.
Die CSS-Eigenschaft text-shadow (http://selfhtml.teamone.de/css/eigenschaften/schrift.htm#text_shadow) kann AFAIK bisher noch kein Browser.
Wenn Du den Effekt unbedingt willst, z.B. fuer eine coole Ueberschrift, mach eine Grafik mit dem entsprechenden ALT-Attribut, z.B. so:
<h1><img src="glowcool.gif" alt="Glow ist Cool!"></h1>
Um zu erfahren, wie Du den Effekt in Deinem Grafik-Programm machst, suchst Du am besten mit Google nach den Begriffen:
"glow", "effect", "tutorial" + der Name Deines Grafik-Programms.
HTH, mfg
Thomas