Textrahmen

Ryuuzaki93 · 04.08.2010, 14:38

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 · 04.08.2010, 14:52

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 · 04.08.2010, 14:56

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

halskrause · 04.08.2010, 15:49

Zitat:

Zitat von nikosch

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

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

ChrisB · 04.08.2010, 15:52

Zitat:

Zitat von halskrause

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 · 04.08.2010, 15:54

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

!

Wolf29

halskrause · 04.08.2010, 16:07

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

nikosch · 04.08.2010, 16:13

Ich kann auch ein Bild benutzen, ja …

Zitat:

kann sowas auf Anhieb.

kannst Du das auch belegen?

halskrause · 04.08.2010, 16:21

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

nikosch · 04.08.2010, 16:21

FontEffect jQuery plugin

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

Code:

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

04.08.2010, 14:38
Ryuuzaki93 Erfahrener Benutzer Registriert seit: 11.12.2009 Beiträge: 117 PHP-Kenntnisse: Fortgeschritten	Textrahmen 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?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.08.2010, 14:52
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	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. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

04.08.2010, 14:56
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das nennt sich outline und ist sicher nicht mit CSS möglich. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

04.08.2010, 15:54
wolf29 Erfahrener Benutzer Registriert seit: 17.03.2010 Beiträge: 1.833 PHP-Kenntnisse: Fortgeschritten	...auf die Lösung bin ich auch gespannt. Wenn es wirklich geht, hätte ich wieder was gelernt! Wolf29 __________________ while (!asleep()) sheep++; Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

04.08.2010, 16:07
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	jQuery in Kombi mit CSS-3 kann sowas auf Anhieb. PS: Ich werde mich hier im gesamten Forum sowieso etwas zurückhalten.

04.08.2010, 16:21
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Ich schreibe das heute abend in meinen Blog. Und poste den Link dann hier.