Mark: Umrandung der SChrift?

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

  1. Hi Mark,

    das wäre eine Möglichkeit:
    <div style="border:#000000 1px solid;width:50px"> Text</div>

    Grüße aus Oberfranken

    Sven

    1. Sorry, aber so meinte ich das nicht!
      Sondern, das die Schrift ENG umrandet ist, also jeder Buchstabe! Nicht als Kasten!

      Trotzdem Danke!

      1. 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

      2. 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.

  2. 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