Wir haben in letzter Zeit eine Menge Spaß mit der gemacht :schweben Wähler. Von Button-Hover-Effekten für Anfänger bis zu fortgeschrittenen Hover-Tutorials und sogar zum Verwenden von Hover mit mehreren Hintergründen. Heute gehen wir weiter und lernen etwas über einen verwandten, aber ebenso fantastischen Selektor, der oft übersehen wird.
Mit :aktivkönnen wir den Status eines Objekts kontrollieren, während es angeklickt wird. Normalerweise hat dies die einfache Form, die Farbe eines Links zu ändern, während die Maus gedrückt wird. Wir werden jedoch etwas sehr viel interessanteres tun. Folgen Sie uns, während wir ein super cooles, reines CSS-Quizspiel für Präsidenten erstellen.
Was wir bauen
Die Grundidee hier ist ziemlich einfach. Wir haben ein Raster von acht Bildern mit dem Ziel, die abgebildeten Männer zu identifizieren, von denen jeder ein ehemaliger US-Präsident ist. Wenn Sie den Mauszeiger über ein Bild bewegen, wird es etwas nach unten verschoben, um weitere Anweisungen zu erhalten, die zum Klicken auffordern. Durch Klicken und Gedrückthalten wird das Bild weiter nach unten verschoben, um den Namen des angezeigten Präsidenten anzuzeigen.
Demo: Klicken Sie hier, um die Live-Version zu starten
Herunterladen: Klicken Sie hier, um die Quelldateien herunterzuladen
Pseudo-Klassen-Selektoren
Ein Pseudo-Klassenselektor können wir in CSS verwenden, um einen einfachen Selektor zu ändern. Wenn dies für Ihren Geschmack zu technisch klingt, machen Sie sich keine Sorgen, Sie verwenden diese bereits, ohne es zu wissen! Die, mit der Sie wahrscheinlich am besten vertraut sind, ist die :schweben Pseudo-Klassen-Selektor, mit dem Sie das Aussehen von etwas im Schwebeflug ändern können. Möglicherweise sind Sie auch mit ausgefalleneren Pseudo-Klassen-Selektoren wie z :erstes Kind.
In Bezug auf Links oder Anker gibt es vier dieser Pseudoklassen-Selektoren, mit denen Sie vertraut sein sollten. Hier sind sie mit Erklärungen für ihre Verwendung:
Wie Sie sehen können, ist unser häufig benutzter Schwebeflugwähler Teil einer netten kleinen Familie, die den Stil eines Links in nahezu jedem Zustand seiner Existenz bestimmen kann. Es ist jedoch wichtig anzumerken, dass dies sehr viel interessantere Werkzeuge wäre, wenn :hat besucht waren nicht so problematisch. Aufgrund von Sicherheitslücken beschränken Browser in der Regel, was Sie mit dieser Pseudoklasse tun können. Sie können beispielsweise die Farbe eines Links ändern, das Hintergrundbild des Links kann jedoch nicht geändert werden.
Aus diesem Grund wenden wir uns an :aktiv wenn wir mit einem reinen CSS-Klickereignis etwas wirklich Spaß machen wollen. Es ist nicht intuitiv zu klicken und zu halten, daher sollten Sie bei der Verwendung dieser Funktion sorgfältig vorgehen und den Benutzer immer eindeutig instruieren.
Genug der langweiligen Sachen, fangen wir mit unserem Projekt an!
Das HTML
Der HTML-Code für unser Projekt ist ziemlich einfach. Wir beginnen mit einer kurzen Einführung, die angibt, was das Spiel ist und wie es zu spielen ist. Hier stellen wir eine einfache Frage: "Wer waren die ersten acht US-Präsidenten?" Beachten Sie, dass dies alles in einem einfachen Container-div abgelegt wird.
Als Nächstes erstellen wir ein wiederverwendbares Modul zur Aufnahme unseres Bildes, das als eine Art visuelle Frage dient, und die Antwort, einen einfachen Absatz, der sich unter dem Bild versteckt. Das Konzept, wiederverwendbar zu sein, ist hier entscheidend. Wir möchten das für sieben andere Präsidenten wiederholen, und wir möchten natürlich nicht die Mühe machen, jedes Modul einzeln zu gestalten. Aus diesem Grund wenden wir eine Klasse (Präsident) an, die wir einmal formatieren können und diese Stile auf alles auswirken, auf das die Klasse angewendet wird.
Fortschrittskontrolle
Jetzt sollten Sie einige schöne Ränder haben, die den Inhalt vom Rand wegbewegen, und eine hübsche Überschrift, die nicht mehr die standardmäßige typografische Gestaltung verwendet.
Style die Präsidentenklasse
Nun fangen wir an, der Präsidenten-Klasse einen Stil hinzuzufügen, was einen großen Unterschied in unserem Layout machen sollte. Zunächst wollen wir sie alle nach links bewegen und ihre Abmessungen festlegen. Da wir die Bilder ein- und ausschieben, setzen wir den Überlauf auf "Verborgen", sodass aus unserer kleinen 200px-Box nichts herausbricht.
Als nächstes setzen wir die Marge auf 20px, dies ist keine willkürliche Zahl. Es ist der sorgfältig berechnete Wert, der vier Bilder pro Zeile in unserem Layout zulässt. Unsere Breite beträgt 960 Pixel, verteilt auf vier 200 Pixel breite Bilder, aber 4 * 200 entspricht 800, so dass noch 160 Pixel übrig bleiben. 160px / 4 Bilder haben einen Rand von 40px pro Bild, 20 links und 20 rechts.
Es gibt auch einige andere interessante Punkte. Wir werden später ein Z-Index-Voodoo hinzufügen, wodurch die Hintergrundfarbe tatsächlich den Antworttext überdeckt. Um dies zu berücksichtigen, habe ich eine RGBa-Hintergrundfüllung mit 20% verwendet. Ältere Versionen von IE mögen das nicht, daher erhalten sie einfach keine Hintergrundfüllung.
Ich setze auch den Cursor auf? Zeiger? was die kleine Hand erscheinen lässt, wenn wir über einem Präsidenten schweben. Schließlich fügte ich einen Schatten hinzu, damit unser Hintergrund ein wenig schöner aussieht. Dieser Teil ist vollständig optional.
Fortschrittskontrolle
An diesem Punkt sehen die Dinge etwas komisch aus, aber wir sind auf dem richtigen Weg. Unsere Präsidentenbilder werden eingeschlossen und abgeschnitten, was gut ist, aber der Hintergrundtext drückt sie tatsächlich nach unten, was wir nicht wollen. Stattdessen möchten wir, dass das Bild über den Text schwebt. Das schaffen wir im nächsten Schritt.
Korrigieren Sie die Textstile und die Stapelreihenfolge
Bevor wir damit beginnen, all diese Arbeit zu machen, wollen wir unseren Absatztext sehr schnell gestalten. Wenn wir länger warten, wird es hinter den Bildern versteckt und ist schwieriger zu beobachten.
Diese Stile sollten unseren gesamten Text viel besser aussehen lassen. Beachten Sie, dass das kleine Tag zwar standardmäßig voreingestellt ist, dass es jedoch manuell manuell überschrieben werden kann und sollte.
Den Text hinter die Bilder setzen
Wie bereits erwähnt, möchten wir nicht, dass unsere Absätze das Bild nach unten drücken, sondern sich dahinter verstecken. Um dies zu erreichen, setzen wir es mit absoluter Positionierung vom Fluss frei und bewegen es hinter dem Bild mit einem Z-Index von -1.
Damit ist alles genau dort, wo wir es wollen. Der Text versteckt sich hinter dem Bild und jedes Bild wird schließlich in seiner vollen Form angezeigt. Das Problem? Es gibt keine Möglichkeit, die Antwort zu sehen!
Bring es zum Leben
Nun, da wir alles genau dort haben, wo wir es haben wollen, ist es Zeit, die Interaktion hinzuzufügen. Lassen Sie uns darüber nachdenken, wie wir wollen, dass es funktioniert: Wir haben bereits den Standardzustand kodiert, also sind wir dort gut. Der nächste Schritt ist das Hover-Event. Dies sollte das Bild etwas anstoßen, aber nur ein wenig, gerade genug, um die erste Textzeile anzuzeigen. Beim Klick wollen wir das Bild noch weiter herunterdrücken.
Dies alles muss natürlich mit ein paar schönen Übergängen passieren, daher stellt sich heraus, dass unser erster Schritt darin besteht, diese auf den Bildern zu erstellen. Wie immer benötigen wir eine Million verschiedene Versionen, um alle verschiedenen Browser berücksichtigen zu können:
Wenn diese Übergänge vorhanden sind, wird jedes Mal, wenn wir die Ränder unserer Bilder ändern, der Übergang animiert. Unser nächster Schritt ist also die Definition des Hover-Ereignisses mit unserem bevorzugten Pseudo-Klassenselektor.
Dies fügt dem oberen Rand unseres Bildes ein wenig mehr Rand hinzu, so dass der Benutzer das sieht, wenn er darüber schwebt.
Dies ist ein kleiner Tipp, um die Antwort zu erhalten. Wenn wir hier die vollständige Antwort gezeigt hätten, hätten wir wahrscheinlich ein Problem mit zufälligen Enthüllungen. Der Klick dient als konkretere Möglichkeit, um Intentionalität sicherzustellen.
Unser letztes Stück CSS ist das, worüber wir hierher gekommen sind, um etwas zu lernen: den aktiven Pseudo-Klassenselektor. Durch die Implementierung dieses kleinen, aber mächtigen Schlussstücks kommt unser gesamtes Trivia-Spiel zusammen.
Wenn nun ein Benutzer auf ein Bild klickt und die Taste gedrückt hält, wird das Bild des Präsidenten nach unten verschoben und sein Name wird angezeigt. Damit sind wir alle fertig!
Fazit
Nachdem Sie dieses Tutorial durchgelesen haben, sollten Sie eine Menge toller Sachen über einige der beliebtesten Pseudoklassen-Selektoren kennenlernen und wissen, wie man sie benutzt, um wirklich interessante Ergebnisse zu erzielen. Wir kombinierten den Hover und die aktiven Selektoren, um ein reines CSS-Trivia-Spiel zu erstellen, bei dem der Benutzer zuerst schwebt und dann klickt, um eine verborgene Nachricht zu sehen.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, ob Sie etwas gelernt haben. Schauen Sie sich auch die Live-Demo an. Können Sie alle acht Präsidenten erfolgreich benennen?