Textrahmen

[Ryuuzaki93]

Hi,

einen Rahmen um eines Text zu machen geht ja, aber ist es irgendwie möglich (mit css oder was anderen) den Text so wie hier aussehen zu lassen?



Bzw gibts irgendwelche andere Tricks dafür?

[ChrisB]

Wenn das Weiße vom B dein Buchstabe ist, dann könntest du das Orange drumherum per text-shadow erreichen (mehrfach angewendet).

Ob das halbwegs „gut“ aussieht, kommt dann wohl stark auf die verwendete Schriftart an. Und eine entsprechend hohe Schriftgröße wirst du auch wählen müssen, wenn das nach irgendwas aussehen soll.

[nikosch]

Das nennt sich outline und ist sicher nicht mit CSS möglich.

[halskrause]

Das nennt sich outline und ist sicher nicht mit CSS möglich.

sicher??? Man kann sowas mit CSS hinkriegen.... Sogar Browserübergreifend!

[ChrisB]

sicher??? Man kann sowas mit CSS hinkriegen.... Sogar Browserübergreifend!

Wenn du einen konkreten Lösungvorschlag hast, poste ihn doch bitte.

(Solange du aber noch Fragen auf dem Niveau stellst, wäre vielleicht bei CSS-Themen erst mal etwas Zurückhaltung deinerseits auch ganz angebracht.)

[wolf29]

...auf die Lösung bin ich auch gespannt. Wenn es wirklich geht, hätte ich wieder was gelernt!

Wolf29

[halskrause]

jQuery in Kombi mit CSS-3 kann sowas auf Anhieb.
PS: Ich werde mich hier im gesamten Forum sowieso etwas zurückhalten.

[nikosch]

Ich kann auch ein Bild benutzen, ja …

kann sowas auf Anhieb.

kannst Du das auch belegen?

[halskrause]

Ich schreibe das heute abend in meinen Blog. Und poste den Link dann hier.

[nikosch]

FontEffect jQuery plugin

Wie diese tollen Umsetzungen dann aussehen kann man sich im Quelltext ansehen:

<div style="width: 147.68px; height: 60px; position: relative;">
  <div style="display: inline; width: 147.68px; height: 60px; position: relative; z-index: 100;" class="JQFEText">Outline
  </div>
  <div style="width: 147.68px; height: 60px; left: 0px; position: absolute; top: 0px; z-index: 90;">
    <div style="position: absolute; top: -1px; left: -1px; width: 147.68px; color: rgb(0, 0, 0); z-index: 30;" class="JQFEOutline">Outline
    </div>
    <div style="position: absolute; top: -1px; left: 0px; width: 147.68px; color: rgb(0, 0, 0); z-index: 30;" class="JQFEOutline">Outline
    </div>
    <div style="position: absolute; top: -1px; left: 1px; width: 147.68px; color: rgb(0, 0, 0); z-index: 30;" class="JQFEOutline">Outline
    </div>
    <div style="position: absolute; top: 0px; left: -1px; width: 147.68px; color: rgb(0, 0, 0); z-index: 30;" class="JQFEOutline">Outline
    </div>
    <div style="position: absolute; top: 1px; left: -1px; width: 147.68px; color: rgb(0, 0, 0); z-index: 30;" class="JQFEOutline">Outline
    </div>
    <div style="position: absolute; top: 1px; left: 0px; width: 147.68px; color: rgb(0, 0, 0); z-index: 30;" class="JQFEOutline">Outline
    </div>
    <div style="position: absolute; top: 1px; left: 1px; width: 147.68px; color: rgb(0, 0, 0); z-index: 20;" class="JQFEOutline">Outline
    </div>
    <div style="position: absolute; top: 0px; left: 1px; width: 147.68px; color: rgb(0, 0, 0); z-index: 20;" class="JQFEOutline">Outline
    </div>
  </div>
  <div style="width: 147.68px; height: 60px; left: 0px; position: absolute; top: 0px; z-index: 110;">
  </div>
</div>

Code, der das Wort Outline in weiß schwarz outlined darstellt.

[ChrisB]

FontEffect jQuery plugin

Zumindest Outline und Shadow kriegt man auch mit dem bereits text-shadow hin - wenn man sich dabei auf aktuelle Browser beschränken kann.

Hier wird die Abwärtskompabilität dadurch erkauft, dass zig Kopien des Elements ins DOM eingehängt werden -

Wie diese tollen Umsetzungen dann aussehen kann man sich im Quelltext ansehen

- und da sollte man sich in erster Linie auch mal überlegen, was das für die Barrierefreiheit und Usability bedeutet:

Wenn im Screenreader JavaScript aktiviert ist, dann kriegt der Nutzer „Example“ zig mal vorgelesen;
und auch wenn ich als „normaler“, nicht beinträchtigter Benutzer nur den Dokumentinhalt per Copy&Paste übernehme, um ihn woanders wieder einzufügen, habe ich da im Ergebnis zigfach „Example“ drin stehen, statt genau ein mal.

(Im vorliegenden Beispiel habe ich knapp vier Dutzend Vorkommen des Wortes „Example“ hintereinander gezählt, obwohl es inhaltlich an der Stelle nur genau ein mal vorkommen sollte.)

[nikosch]

CSS: text shadows

[Ryuuzaki93]

Danke, ich werd das mal ausprobieren

[Flor1an]

Die Page mit dem jQuery Plugin ruckelt bei mir wenn ich scrolle ...