Ankündigung

Einklappen
Keine Ankündigung bisher.

Textrahmen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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?


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

    Kommentar


    • #3
      Das nennt sich outline und ist sicher nicht mit CSS möglich.
      --

      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


      --

      Kommentar


      • #4
        Zitat von nikosch Beitrag anzeigen
        Das nennt sich outline und ist sicher nicht mit CSS möglich.
        sicher??? Man kann sowas mit CSS hinkriegen.... Sogar Browserübergreifend!

        Kommentar


        • #5
          Zitat von halskrause Beitrag anzeigen
          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.)

          Kommentar


          • #6
            ...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.

            Kommentar


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

              Kommentar


              • #8
                Ich kann auch ein Bild benutzen, ja …

                kann sowas auf Anhieb.
                kannst Du das auch belegen?
                --

                „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                --

                Kommentar


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

                  Kommentar


                  • #10
                    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.
                    --

                    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                    --

                    Kommentar


                    • #11
                      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.)

                      Kommentar


                      • #12
                        CSS: text shadows
                        --

                        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                        --

                        Kommentar


                        • #13
                          Danke, ich werd das mal ausprobieren

                          Kommentar


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

                            Kommentar

                            Lädt...
                            X