CSS kann viele wirklich großartige Bildtricks ziehen: Größenmanipulation, Entsättigung, sogar Unschärfe. Eine Einschränkung, auf die wir stoßen, ist, dass Sie ein Bild nicht wirklich in mehrere Teile aufteilen können. Wenn Sie beispielsweise ein Foto halbieren und die Trennung animieren möchten, können Sie dies mit reinem CSS nicht wirklich tun. Könntest du?
Heute werden wir eine Umarbeitung vornehmen, die es uns ermöglicht, diesen Trick ohne viel JavaScript oder zusätzliche Dateien zu erreichen. Mal sehen, wie es funktioniert.
Sneak Peak: Demo starten
Hat Tipp an Kyle Foster
Vor kurzem hat der Entwickler Kyle Foster ein nettes kleines jQuery-Plugin mit einem Effekt erstellt, der mir sehr gefällt (hier gezeigt). Wenn der Benutzer den Mauszeiger über ein Bild bewegt, wird es horizontal halbiert und getrennt, um eine verborgene Nachricht anzuzeigen. Hier ist ein Screenshot seiner Demo:
Wie Sie sehen, ist es ein tolles kleines Stück UI. Wie ich es immer tue, wenn ich auf so etwas stoße, habe ich darüber nachgedacht, wie ich nur mit CSS etwas Ähnliches erreichen kann. Das Problem ist, dass CSS ein solches Bild nicht wirklich teilen lässt. Ich wusste, dass mehrere Hintergrundbilder für die Lösung geeignet waren, aber ich wollte nicht für jedes Foto, das diesen Effekt verwendete, zwei separate Bilder einbetten. Glücklicherweise können wir dies mit ein bisschen Bild mit etwas Einfallsreichtum schaffen. Lesen Sie weiter, um zu sehen wie.
Schritt 1: Formatieren Sie Ihr Bild
Mit CSS können wir mehrere Hintergrundbilder auf ein einzelnes Element anwenden. Interessanterweise können wir diese Funktion verwenden, um dasselbe Hintergrundbild mehrmals anzuwenden und jede Instanz auf einzigartige Weise zu positionieren. In Anbetracht dieser Informationen bietet sich eine Lösung für unser Problem an.
Der Trick, dies zu erreichen, besteht darin, Ihr Bild in Photoshop zu halbieren, bevor Sie es einbetten. Schauen Sie sich das Beispiel unten an, um zu sehen, was ich meine. Es sieht ein bisschen komisch aus, aber es gibt uns die Möglichkeit, genau das zu tun, was wir brauchen.
Der Arbeitsablauf, um dies zu tun, läuft folgendermaßen ab (Feineinstellung der Dimensionen):
- Erstellen Sie ein Bild, das 300 Pixel breit und 300 Pixel hoch ist
- Schneiden Sie das Bild quer durch die Mitte und platzieren Sie die beiden Hälften auf verschiedenen Ebenen.
- Gehe zu Leinwandgröße in Photoshop und vergrößern Sie die Leinwand um 375 Pixel auf 300 Pixel.
- Platzieren Sie die untere Hälfte des Fotos oben auf der Leinwand.
- Platzieren Sie die obere Hälfte des Fotos unten auf der Leinwand.
Das hört sich nach Schmerz an, aber wenn Sie erst einmal darüber nachdenken, wie es funktioniert, geht es sehr schnell. Sie können sogar eine Aktion aufzeichnen, die dies in wenigen Sekunden für Sie erledigt. Grundsätzlich haben wir es möglich gemacht, dass eine Datei sowohl oben als auch unten in unserem Bild angezeigt wird. Es kann diese Funktion ausführen, da es gut aneinander anpasst: Wenn zwei aufeinander gestoßen werden, fließt das Bild nahtlos von einem zum anderen. Machen Sie sich keine Sorgen über den riesigen weißen Streifen in der Mitte, der einfach versteckt wird.
Schritt 2. Das Markup
Nun, da wir eine gute Vorstellung davon haben, wie dies funktionieren wird, lassen Sie uns das aufschreiben. Denken Sie daran, dass wir möchten, dass eine Bildunterschrift angezeigt wird. Deshalb fügen wir ein Absatz-Tag in ein div ein.
Dieses div hat zwei Klassen: offenbaren und stecken. Die? Enthüllen? In der Klasse werden wir einen großen Teil des wiederholbaren Codes platzieren, den wir für alle ähnlichen Elemente ausführen möchten. Der Stöpsel? Die Klasse enthält den spezifischen Code, der sich auf das oben gezeigte Plug-Foto bezieht.
Schritt 3. CSS-Starter
Um es vorweg zu nehmen, hier ist das grundlegende CSS, das ich in der Demo verwenden werde. Der wirklich wichtige Teil ist die "Enthüllung". Code, der die Größe unseres Containers festlegt.
Schritt 4. Mehrere Hintergrund-CSS
Denken Sie daran, dass unser Startbild 300 x 300 Pixel betrug, was unserer Größe entspricht. Dies bedeutet, dass wir diesen Container mit Bildbereich füllen können, ohne dass der weiße Balken in unserem JPG-Bild angezeigt wird.
Dazu setzen wir drei Hintergründe auf unser Element, die jeweils durch ein Komma getrennt sind. Die ersten beiden sind dasselbe Plug-Bild und die dritte ist einfarbig. Auf der einen Seite sind wir Art von Wenn Sie mehrere Bilder verwenden, muss der Browser jedoch nur in einer Datei geladen werden, sodass unsere http-Anforderungen niedriger sind, als wenn wir zwei unterschiedliche Bilder verwendet hätten (es ist im Grunde wie bei der Verwendung von Image-Sprites).
Die Zahlen hinter den Hintergründen stehen für Positionswerte. Die erste Zahl ist der horizontale Versatz und die zweite ist der vertikale Versatz. Wir haben unser erstes Bild mit einem positiven Wert von 150 Pixeln und der zweite mit einem negativen Wert von 225 Pixeln ausgeglichen. Beachten Sie, dass 150 + 225 gleich 375 ist, was der vollen Höhe unseres JPG entspricht.
Beachten Sie auch, dass es sehr wichtig ist, die Hintergründe festzulegen keine Wiederholungansonsten funktioniert das überhaupt nicht.
Schritt 5. Übergang
Wenn wir über dem Element schweben, schieben wir die zwei Instanzen unseres Fotos voneinander weg, um eine Bildunterschrift sichtbar zu machen. Wir möchten sicherstellen, dass dies reibungslos geschieht. Fügen Sie also einen Übergang hinzu.
Schritt 5. Hover Styles
An diesem Punkt ist alles harte Zeug fertig.Alles, was wir tun müssen, ist, jede Instanz des Bildes aus der Mitte nach außen zu verschieben, wenn der Benutzer über das Element fährt. Wir tun dies, indem wir diese Positionswerte wie folgt anpassen:
Wenn jetzt ein Hover-Ereignis auftritt, rutscht die erste Instanz des Bildes um 60 Pixel nach unten und die zweite Instanz um 60 Pixel nach oben. So sieht das aus:
Schritt 6. Die Beschriftung
Damit wird unser scheinbar unmöglicher Effekt ziemlich einfach! Vergessen Sie jedoch nicht, wir haben jetzt diese nervige Bildunterschrift, mit der Sie arbeiten können. Da wir unser Foto mit CSS-Hintergrundbildern einbetten, wird der Text tatsächlich über dem Hintergrund angezeigt, was wir gar nicht wollen. Mit ein wenig mehr Markup könnten wir ein zusätzliches div erzeugen und den Text woanders behalten, was gut funktioniert.
Wir können unseren Markup jedoch auf ein Minimum beschränken und einfach fälschen, wenn wir die Deckkraft des Textes verändern. Mit dieser Methode machen wir die Beschriftung einfach unsichtbar, bis der Benutzer über das Bild fährt und diese dann eingeblendet wird. Hier ist der Teil von CSS, den wir all dies tun müssen.
Schritt 7. Schäumen, Spülen, Wiederholen
Das ist so ziemlich alles, was dazu gehört. Wir haben ein System eingerichtet, das problemlos auf verschiedene Elemente erweitert werden kann. Hier werden wir dies schnell auf drei Punkte anwenden.
Jetzt können wir für jede Version ein ähnliches CSS verwenden, wobei die gleichen Positionierungswerte auf der ganzen Linie angewendet werden, während die Hintergrundbilder gemischt werden.
Schau mal!
Unsere Arbeit ist beendet, jetzt ist es Zeit, sich zurückzulehnen und zu sehen, was wir gebaut haben. Überprüfen Sie es, indem Sie dem Link unten folgen. Hinterlasse einen Kommentar und lass mich wissen, was du denkst.
Demo: Klicken Sie hier, um zu starten
