Heute werden wir sehen, ob wir ein einzelnes Bild, das über HTML eingefügt wurde, nehmen und es so aussehen lassen, als würde ein Stapel von Bildern nur mit CSS aussehen. Der Schlüssel: Pseudoelemente.
Auf dem Weg werden wir sehen, wie ein solches Projekt schnell zu unordentlichem Code führen kann und wie wir das mit einigen DRY-Codierverfahren bekämpfen können.
Die Herausforderung
Ich habe mir einige der erstaunlichen Inhalte auf unserer neuen Downloadseite, Pixels Daily, angesehen und ein tolles kleines kostenloses PSD namens Stacks gefunden, mit dem Sie schnell und einfach einen Stapel polaroidartiger Bilder in Photoshop erstellen können.
Wie Sie sehen, ist dies ein ziemlich attraktiver Effekt. Sobald ich es sah, wollte ich sofort versuchen, es mit CSS zu schaffen. Dies ist jedoch eine schwierige Situation, da mehrere Ebenen übereinander angeordnet sind und wir die Markierungen nicht mit drei Bildern für jedes Galerieelement überschneiden möchten. Wie können wir diese Illusion durchführen und gleichzeitig unser HTML-Markup minimieren?
Es stellt sich heraus, dass die Antwort, die ich suchte, in Pseudoelementen liegt. Dies ist ein perfekter Anwendungsfall, um die Magie von vorher und nachher darzustellen. Lass uns anfangen.
Das HTML
Um unseren ersten Stapel zu erstellen, brauchen wir nur ein div mit einem Bild darin. Das ist alles! Der Rest der ausgefallenen Fußarbeit wird alles über CSS erledigt. Stellen Sie sicher, dass Sie das? Stackone? Klasse zum Div.
Hier haben wir die Klasse anvisiert, die unser oberstes Image enthält, und dann das: before-Pseudo-Element ohne Inhalt implementiert. Dadurch wird dem Dokumentenfluss effektiv ein weiterer Eintrag hinzugefügt, mit dem wir arbeiten können. Jetzt stylen wir es so, wie wir unser vorheriges Bild gemacht haben:
Das Wichtigste dabei ist, dass wir nicht wirklich mit einem Bild arbeiten. Ich könnte ein anderes Bild laden, aber es wäre eine schlechte Idee, wenn man bedenkt, dass wir Stapel von drei machen. Für jedes einzelne Bild in der Galerie möchten wir nicht drei Bilder laden! Glücklicherweise können wir, da der größte Teil der Oberfläche der Pseudoelemente verborgen ist, einfach eine durchgehende Farbe verwenden und trotzdem den gewünschten Effekt erzielen.
Positionierung
An diesem Punkt sehen die Dinge nicht so gut aus. In der Tat haben wir unser Image wirklich durcheinander gebracht!
Wie Sie sehen, stört unser Pseudoelement das Bild. Um dies zu beheben, müssen wir einen Positionierungskontext hinzufügen und ihn dann mit z-index nach hinten schieben. Ich habe hier die verschiedenen Stilklassen aufgeteilt, so dass Sie klar sehen können, was bei jedem Block vor sich geht.
Durch die Verwendung der absoluten Positionierung können wir unser Bild an die ursprüngliche Position des Originalbilds verschieben. Wie gesagt, der Z-Index drückt das Bild dann in den Hintergrund, was bei den Interferenzen hilft, die wir zuvor erhalten haben. Schließlich haben wir auf einen Transformationseffekt geworfen, um die unordentliche Rotation, die Sie in der ursprünglichen PSD von Stacks sehen, zu ziehen.
Fortschrittskontrolle
An diesem Punkt sieht alles gut aus! Unser zweites Foto (naja, gefälschtes Foto) sitzt gut unter unserem ersten und hat genug Drehung, um es voneinander zu unterscheiden. Noch eins und wir sind zu Hause frei.
Das zweite Pseudoelement
Wie Sie sich vermutlich vorstellen können, müssen Sie, um ein drittes Foto zum Stapel hinzuzufügen, das: after-Pseudo-Element verwenden. Dies funktioniert genau so, wie wir es gerade getan haben, sodass Sie nicht im Detail durchgehen müssen. Die Hauptunterschiede sind eine andere Hintergrundfarbe, Position und Drehung.
Fortschrittskontrolle
Würdest du dir das anschauen? Wir haben unseren ersten Bildstapel fertiggestellt! Es ist ein ziemlich schicker Effekt, wenn man bedenkt, dass nur ein Bild verwendet wird.
Ein fehlerhafter Workflow
Da die ursprüngliche PSD mehrere Bildstapel zur Auswahl hatte, wollte ich dasselbe mit CSS-Klassen tun. Um dies zu tun, könnten wir den gesamten Code einfach kopieren und in einen neuen "stacktwo" einfügen. Klasse und ändern Sie die Rotation / Positionierung für die Pseudoelemente. Bam: Du hast dir einen neuen Stapel.
Hier ist das Problem: Ich habe dies mit sage und schreibe acht verschiedenen Stapeln gemacht und das Ergebnis war ein schrecklicher Codeklumpen.Im Ernst, es war hässlicher als ein tabellenbasiertes Layout von 1997. Das Problem ist natürlich, dass ich mich immer wieder wiederhole. Mehr als die Hälfte meines Codes besteht aus reiner Redundanz. Ich kann nicht in gutem Gewissen so schreckliche Praktiken an Sie weitergeben.
DRY CSS
Andy Hunt und Dave Thomas prägten den Begriff? DRY? in Bezug auf das Programmieren, was für "sich nicht wiederholen" steht. CSS ist keine rein programmierte Sprache, sondern eine Style-Sheet-Sprache. Wenn wir es jedoch wie eine Programmiersprache behandeln und die Konzepte der DRY-Codierung anwenden, erhalten wir ein viel besseres Ergebnis.
Mal sehen, ob wir diese Praktiken anwenden können, um unseren Code ein wenig kürzer und erweiterbarer zu machen.
Versuchen wir das noch einmal
Wenn wir eine Reihe von Klassen erstellen und unserem aktuellen Pfad folgen, wird unser CSS unhandlich. Auf Anhieb müssen wir jede Klasse einzeln deklarieren und dann jeder einen großen Code Code übergeben. Und dies ist noch bevor wir uns den Pseudoelementen nähern, die unseren Code buchstäblich verdreifachen werden!
Da ein Großteil der Stile gemeinsam genutzt wird, müssen wir unseren Code einschränken und einige dieser Stile in einem Deklarationsblock platzieren.
Dies nimmt unsere Kernstile und wendet sie auf alle Starterklassen gleichzeitig an viel besser als sich immer und immer wieder zu wiederholen. Als optionaler nächster Schritt könnten Sie mit Ihren Selektoren noch schicker werden.
Beachten Sie, dass alle unsere Klassen mit den gleichen fünf Buchstaben beginnen: "stack". Mit diesen Informationen können wir das herausziehen beliebiger Teilwertattributwert-Wähler und zielen auf alle Klassen ab, die mit dieser Zeichenfolge aus fünf Buchstaben beginnen.
Wie schick ist das? Diese eine Auswahl richtet sich an alle diese Klassen für uns! Noch besser: Wenn wir uns entscheiden, acht weitere Stack-Klassen zum Mix hinzuzufügen, funktioniert dieser Selector immer noch einwandfrei.
Lassen Sie uns dies auf die Probe stellen und sehen, wie kurz wir unseren Code machen können. Der Schlüssel hier ist, alles zu finden, was wiederholt wird, und es zu versuchen, es nur einmal zu verwenden. Wie Sie sehen, habe ich mit den Deklarationen begonnen, die nur auf den Stack angewendet werden können. Klassen. Dann wechselte ich zu Stilen, die zusammen mit den Elementen Vorher und Nachher auf die Stapelklassen angewendet werden konnten. Ich habe es noch einmal eingegrenzt und einen Deklarationsblock nur für die Styles before und after eingerichtet. Schließlich endete ich mit der anderen Farbe, die wir für: vor dem Unterricht verwenden.
Was wir hier gemacht haben, ist buchstäblich Hunderte von Codezeilen genommen und auf einen kleinen Raum komprimiert. Das ist fantastisch für Wartung, Ladezeiten und Ihre allgemeine Vernunft! Es ist ein bisschen schwierig, sich zunächst mit DRY-Prinzipien zu beschäftigen, aber wenn Sie erst einmal fertig sind, werden Sie nie zurückschauen.
Andere Stapel
Von hier aus wird jeder Stack ziemlich eindeutig sein, so dass wir den Rest einzeln codieren müssen. Ein kleiner Sass oder weniger würde ein gehen lange Es geht mir darum, diesem Teil zu helfen, aber ihr habt es satt, über das Wunder der Präprozessoren zu schimpfen, also habe ich es den langen Weg gemacht.
Browser-Kompatibilität
In meinen Tests war die Browser-Kompatibilität hier eigentlich ziemlich beeindruckend.In Safari, Firefox, Chrome, Opera und IE9 + sollte alles gut funktionieren. Für IE7 erhalten Sie eine einfache Bildergalerie ohne den ausgefallenen Stapeleffekt, den ich für völlig akzeptabel halte, da dies eine rein ästhetische Note ist, die abgerundeten Ecken ähnelt.
IE8 ist der knifflige, weil er teilweise genug Material unterstützt, um wirklich alles zu vermasseln. Sie können entscheiden, wie Sie an dieses Problem herangehen möchten, aber Sie haben einen schrecklichen, schmutzigen Hack verwendet, um nur IE8 anzuvisieren. Dies bedeutet, \ 9 an beliebige IE8-Stile anzuhängen. Mit dieser Technik habe ich einfach die: before und: after Elemente versteckt, so dass der IE8 eine einfache Bildergalerie wie IE7 erhält.
Bei den ausgefallenen Selektoren neigt IE8 dazu, gestolpert zu werden. Unterstützt wird IE8 vorher und nachher, solange Sie sich an die Ein-Doppelpunkt-Syntax halten. Wenn Sie die Klassen mit Kommas auflisten, anstatt den Attributwert-Selektor zu verwenden, sollten Sie IE8 dazu bringen, den Stack-Effekt auszuführen.
Fazit
Wir haben heute viel gepackt. Wir bauten eine coole Image-Stack-Illusion, lernten die Implementierung von Vorher und Nachher und besprachen dann die besten Vorgehensweisen für das Codieren unter Verwendung einer DRY-Mentalität. Ich hoffe du hast etwas gelernt und hatte so viel Spaß wie ich!
Halten Sie ein Auge auf PixelsDaily in den kommenden Tagen, um einen fantastischen kostenlosen Download zu erhalten, der den gesamten Quellcode für dieses Lernprogramm sowie acht beeindruckende Bildstapel enthält, die Sie in Ihren Projekten verwenden können.