Sie kennen vielleicht den klassischen Link-Stil sehr gut. Blau mit einer Unterstreichung. Es gibt eine alternative Methode, um denselben Effekt zu erzielen, der etwas schöner ist.
Hier ist der Code
a {
text-decoration: none;
background: url(link-line.gif) repeat-x 0 100%;
padding-bottom: 1px;
}Durch die Einstellung der Hintergrundposition auf x bei 0 und y bei 100 % wird das Hintergrundbild am unteren Rand des Textes platziert, und durch die Einstellung des padding-bottom auf 1 Pixel schaffen wir einen Abstand von 1 Pixel zwischen dem Text und dem Hintergrundbild.
Schauen Sie sich das Live-Beispiel an, wo es ein weiteres Beispiel gibt, das erweitert, was durch die Verwendung eines Bildes als Unterstrich möglich ist.
Es funktioniert auch mit einem Rahmen unten... oder liege ich falsch?
Ich frage mich auch, warum ein Bild über einem Rahmen. Nur eine Frage der persönlichen Vorliebe?
Ich denke, Volkan weist nur darauf hin, dass es mehr als einen Weg gibt, die Katze zu häuten. Es ist immer gut, Optionen zu haben.
Sehen Sie sich auch das letzte Beispiel auf der Beispielseite an, es hat einen Farbverlauf, den man wirklich nur mit einem Bild machen könnte.
Mir gefällt die Option, aber ich persönlich würde die Idee mit dem unteren Rand bevorzugen, da manche Leute Bilder deaktivieren.
ABER es hat definitiv meine Augen für einige "andere" Wege geöffnet, die Katze (oder den Link) zu häuten.
Ja, man kann auch einen unteren Rand verwenden, aber ich denke, ein Hintergrundbild gibt Ihnen mehr Möglichkeiten bezüglich des Unterstrichs. Sie können mehr Farben und besser aussehende gepunktete Linien verwenden.
Und wie Chris erwähnte, kann man sogar einen Farbverlauf als Unterstrich erstellen.
Ich wünschte, es gäbe eine Möglichkeit, echte "Farbverlaufs-Unterstriche" zu erstellen. Es ist ärgerlich, dass wir die Breite von Bildern, die in der background-Eigenschaft verwendet werden, nicht definieren oder sie nicht dehnen können. Das ist mit mehreren Ebenen und JavaScript möglich, aber zu zeitaufwendig für einen so "einfachen" Effekt. Hoffen wir, dass CSS3 uns mehr Kontrolle über die background-Eigenschaft gibt.
@Dennison: Ich bin bei dir. Und ja, in CSS3 gibt es bereits eine bessere Unterstützung für Hintergründe. Mehrere Hintergründe werden bereits in Safari unterstützt, was es uns ermöglichen würde, einen "echten Farbverlaufs-Unterstrich" einfach zu erstellen. Hoffen wir, dass die nächste Version von IE dies unterstützt.
Sie haben Recht bezüglich der mehreren Hintergründe in Safari. Sie haben auch einen sehr wichtigen Punkt bezüglich der IE-Kompatibilität angesprochen. Da IE immer noch der dominierende Browser ist, ist es sehr schwer, ihn zu ignorieren, und wir müssen Workarounds für unser armes IE-Publikum schreiben.
Dieser Beitrag erinnert mich an diesen alten Artikel auf ALA. Er fügt eine wichtige Komponente zur Gleichung hinzu
white-space: nowrap;die es Ihnen ermöglicht, Ihre Unterstriche auf Links zu platzieren, die normalerweise in mehrere Zeilen umbrechen würden. Ich habe diese Technik in einer Reihe von Situationen verwendet
http://www.mandraccia.com/
http://www.clearvieweyes.com/
http://www.signatureplasticsurgery.com/
mit gutem Erfolg. Viel Spaß. Auch Rahmen funktionieren nicht richtig, wenn Sie Ihrem Inhalt einen gesunden Zeilenabstand geben (ich benutze normalerweise ein 1,5-faches Vielfaches), da der Rahmen am Ende des zusätzlichen Raums platziert wird.
@Andrew: Tolle Erinnerung an die white-space-Eigenschaft! Mir gefällt das ALA-Beispiel mit den animierten Rollovers, das wäre ziemlich lustig, wenn man es etwas subtiler umsetzen würde.
Die von Ihnen entworfenen Websites, auf die Sie verlinkt haben, sind fantastisch! Sie haben dort wirklich gute Beispiele für geschmackvolle, interessante Dinge, die man mit Links machen kann.
Ok, ich habe diese Seite über Stumbleupon gefunden und sie mir angesehen und dachte... was?, und ich schaute weiter... und beugte mich näher zum Bildschirm, ich überprüfte die Schriftarten und die Rechtschreibung und die Abstände zwischen den Buchstaben und konnte es immer noch nicht sehen... und dann sah ich es, eine hellere blaue Linie.
Da gingen die Funken los, ich war in orgastischer Glückseligkeit, Eureka, sie haben einen helleren Blauton entdeckt... und das in Form einer dünnen Linie.
Sarkastisch? Ich?
Niemals.
Wolfie!
Es ist wirklich anders, Chris.
Danke Chris und ich möchte mich auch bei Andrew für den ALA-Artikel bedanken.
Ist das nicht genau die Art von Feinabstimmung, die visuell kaum einen Unterschied macht, aber auf alberne Weise Dinge kaputt macht? Wenn ich Bilder ausgeschaltet habe – vielleicht benutze ich ein Handy, oder nur eine langsame Verbindung, oder einen textbasierten Browser, mein Browser wird vielleicht "text-decoration: none" honorieren, aber das Bild nicht einschließen. So habe ich keine Ahnung, dass Ihr hauchzart anders aussehender Link überhaupt ein Link ist.
Ich erkenne, dass es viele verschiedene Menschen mit unterschiedlichen Hintergründen ins Web geschafft haben; Ich vermute, der Autor kommt aus einem Print-Hintergrund, wo das Endergebnis alles ist, was zählt. Im Web sind auch Kontext und Semantik wichtig, und dies ist ein klassisches Beispiel dafür, wie die reichen und nützlichen Metadaten (es ist ein Link!) zugunsten – wie mein Mit-Stumbler Wolfie anmerkt – einer fast unmerklichen ästhetischen Veränderung beiseitegeschoben werden.
Ich glaube nicht, dass ein bisschen Padding es schöner macht. Mir gefiel die Idee mit verschiedenen Farben beim Überfahren mit der Maus.