Die Kontrolle über Rollover-Effekte

Tweet

Auf den meisten Web-Browsern gibt es eine Standard-Grenze, die Bilder, die als Links verwendet werden, umgibt. Es ist normalerweise eine große, böse, dicke helle blaue Grenze. Dies ist wahrscheinlich unerwünscht, so dass in diesem Artikel werden wir nach Wegen, Sie kümmern sich um sie in Ihrem CSS kann werden gesucht ...

So entfernen Sie die Standard-Rahmen nutzen dies in Ihrem CSS:


a img { border: none; }


Sie können auch die Standard-Rahmen an den verlinkten Bildern von ua "border = 0" in der Bild-Tag, aber dies ist ein veraltetes Eigentum und wird nicht empfohlen. Leider ist es in vielen Copy-and-Paste-Codebeispiele enthalten, da es das gewünschte Ergebnis, ohne sich auf den Webseiten-Inhaber halten gute CSS zählen zwingt.

Das Standard-blauen Grenze nicht böse ist, ist es nur versucht, hilfsbereit zu sein und Sie wissen lassen, das Bild umgibt es ist ein Hyperlink. Nehmen wir, dass die Verantwortung auf uns und sehen, ob wir kommen können mit ein paar Rollover für Bilder sind ein bisschen schöner und interessanter.

Der beste Weg, diesen Beispielen zu sehen ist, um das Beispiel Seite zu sehen und der beste Weg, um zu verstehen wie sie funktionieren ist es, das Beispiel herunterladen und Blick auf den Code selbst.

Beispiel 1: dicke Rahmen

Dieses Beispiel gibt dem Bild ein paar Pixel von Polsterung und einen Rand in seinen normalen Zustand und fügt eine Hintergrundfarbe auf Rollover.

Beispiel 2: Eine gestrichelte dicke Rahmen

Dies ist eine ähnliche Technik nur die Rollover einen dicken gestrichelten Rahmen fügt dem Bild. Der Trick hier ist, dass die Grenze gibt es in seinen normalen Zustand als gut, nur es ist genauso wie der Hintergrund weiß. Wenn diese Grenze war nicht da, in seiner normalen Zustand und wurde während Rollover hinzu, würde das Bild Position zu verschieben, um Platz für den Rahmen zu machen, würde dem ein Rütteln und unerwünschte Folge sein.

Beispiel 3: Black & White in Color

Diese Technik bewirkt, dass das Bild zu "färben" auf Rollover. Das ist ein bisschen komplizierter dadurch, dass Sie nicht in der Lage, regelmäßige img-Tags im HTML verwenden. Sie werden Anker-Elemente mit einzigartigen Klassen-Namen verwenden. Diese Anker müssen bestimmte Höhen und Breiten und ein Hintergrundbild. Dann auf Rollover, können Sie tauschen das Hintergrundbild für eine Farb-Version.

Beispiel 4: In Gradient Hintergrund

Statt eine feste Farbe wie in Beispiel 1, könnten Sie ein Bild. So geben dem Bild eine gewisse Polsterung auf beiden Seiten, so gibt es einen gewissen Spielraum für die Grafik zu zeigen.

Beispiel 5: Display-Informationen

Diese Technik macht Text unterhalb des Bildes auf Rollover erscheinen. Es bedient sich der Hintergrund-Bild in CSS-Eigenschaft wie in Beispiel 3, jedoch in diesem Fall bleibt das Hintergrundbild die gleiche. Der Unterschied ist, dass in regelmäßigen Zustand, der Text außerhalb des Bildschirms mit einem riesigen negativen Offset, die auf Rollover entfernt wird gekickt. Um den Text zu bekommen zu zeigen, bis unterhalb des Bildes statt oben drauf geben dem Anker eine Top-Polsterung der ein wenig größer als die Höhe des Bildes.

---

Autor Chris Coyier schreibt für CSS-Tricks , ein Blog mit Web-Design-Tipps, Tricks und Tutorials.

---