Das heutige Projekt wird Spaß machen. Wir erstellen eine einfache HTML / CSS-Demoseite und fügen dann eine Schaltfläche hinzu, mit der der Benutzer das Farbschema der Seite zwischen den folgenden Zuständen umschalten kann: Tag und Nacht. Wenn die Farben wechseln, werden auch verschiedene andere Elemente auf der Seite angezeigt.
Das wirklich Tolle daran ist, dass wir das alles nur mit CSS machen können. Auf dem Weg werden wir lernen, wie man ein CSS-gesteuertes Klickereignis erstellt und wie man Pseudo-Elemente zur Bearbeitung von Seiteninhalten verwendet.
Was wir bauen
Im Grunde haben wir eine sehr einfache Phase, die zwischen zwei Zuständen umgeschaltet werden kann. Der Standardzustand mit einem? Tag? Thema, das einen hellen Hintergrund und dunklen Text verwendet. Der zweite Staat mit einer "Nacht"? Thema mit dunklem Hintergrund und hellem Text. Mit einem Klick können Sie zwischen den beiden wechseln.
? Das dunkle und das helle Thema werden auch unterschiedliche Schlagzeilen und Hintergrundbilder anzeigen.?Ich bin nicht mit einfachen Farbwechseln zufrieden, ich wollte diese Idee noch weiterführen, also werden wir auch ein paar andere Dinge ändern. Das dunkle und das helle Thema werden auch unterschiedliche Schlagzeilen und Hintergrundbilder anzeigen.
Wieder einmal, um nur zu zeigen, werden wir diese ganze Magie ohne einen einzigen Tropfen JavaScript ausführen. Lass uns anfangen.
Schritt 1. HTML-Seite
Als Erstes erstellen wir unsere Testseite. Hier muss nicht viel sein, nur ein paar grundlegende Elemente, mit denen wir in unserem CSS herumspielen können. Wie Sie sehen, habe ich eine Überschrift, drei Absätze und ein Bild verwendet.
Das wirklich Seltsame ist hier das leere? Headerimage? div. Normalerweise würde ich hier nur ein Bild werfen, aber wenn wir dieses Bild in unserem CSS austauschen möchten, müssen wir das Foto als Hintergrundbild einfügen.
Schritt 2. Starter-CSS
Bevor wir uns einarbeiten und bestimmte Teile unseres Markups gestalten, haben wir eine Menge Einstellungen zu erledigen. Zuerst werden wir verwenden Border-Box-Dimensionierung um unsere Größenbeziehungen etwas einfacher zu handhaben. Dadurch wird das CSS-Boxmodell so geändert, dass die spezifische Breite eines Objekts tatsächlich Auffüllen und Rahmen umfasst.
Als Nächstes habe ich einen Übergang zu allem auf der Seite hinzugefügt. Das ist sicher nicht Empfohlen für seriöse Webseiten, aber für unsere lustige kleine Demo ist dies der perfekte Weg, um sicherzustellen, dass der Übergang der Lichter ein / aus animiert ist.
Zum Schluss habe ich einfach die Größen und Füllungen für die Seitencontainer definiert. Beachten Sie das, wenn wir verwenden möchten Höhe: 100% auf der Main Klasse, dann müssen wir sicherstellen, dass sowohl der Textkörper als auch der HTML-Code die gesamte Seitenhöhe einnehmen.
Schritt 3. Überschrift CSS
Nun ist es an der Zeit, die spezifischen Elemente auf der Seite zu gestalten. Wir fangen mit unserer Schlagzeile an. Zentriere es, gib ihm eine Schriftfamilie und wandle es in Großbuchstaben um. Als Nächstes werden die Dinge interessant: Verwenden Sie ein Pseudo-Element, um das Wort "On" hinzuzufügen. Nach dem Text, den wir in unser HTML eingefügt haben.
Pseudo-Elemente wirken auf den ersten Blick etwas kompliziert, aber es ist wichtig, genau zu verstehen, was hier passiert. Im Wesentlichen erstellt unser HTML-Code eine Überschrift mit dem Wort "Lights". und unser CSS springt dann ein und fügt das Wort "On" hinzu.
Eine vollständige Erklärung der Pseudo-Elemente finden Sie im Low Down on: Before und: After in CSS.
Schritt 4. Absatz CSS
Als nächstes sind die drei Absätze unter der Überschrift. Diese sollten nach links verschoben werden, auf ein Drittel der Breite des übergeordneten Elements gesetzt und dann gelöscht werden. Es gibt auch ein paar visuelle Verbesserungen, aber alles ist ziemlich unkompliziert.
Schritt 5 Großes Foto-CSS
Um die Demo-Seite abzuschließen, weisen Sie dem Hintergrundbild ein Hintergrundbild zu headerimage klassifizieren und die Abmessungen definieren. Wie üblich greife ich ein Bild von LoremPixel.
Fortschrittskontrolle
Zu diesem Zeitpunkt sollte Ihre Seite wie in der Abbildung unten aussehen. Insgesamt ist es nicht sehr beeindruckend? noch!
Schritt 6 Lichtschalter HTML
Nun, da wir eine Demo haben, mit der wir arbeiten können, ist es Zeit, einen "Lichtschalter" zu installieren. Das ist eine fantastische Möglichkeit zu sagen, dass wir eine Schaltfläche verwenden, die einige Stile auf der Seite ändert. Der Trick, um dies mit reinem CSS zu erreichen, wird in einem früheren Beitrag weitgehend beschrieben.
In diesem Beitrag haben wir gelernt, wie man eine Checkbox entführt und unserem Willen unterwirft.Es ist nicht die semantischste Technik, aber es ist definitiv eine tolle Gelegenheit, damit herumzuspielen. Um diese Gruppe in Gang zu setzen, fügen Sie am oberen Rand des Hauptteils Ihres HTML-Codes eine Beschriftung und ein Kontrollkästchen hinzu.
Schritt 7 Lichtschalter CSS
Im Wesentlichen verbergen wir das Kontrollkästchen selbst und gestalten das Label wie eine Schaltfläche. Der Grund dafür ist, dass in HTML die Beschriftung für ein bestimmtes Kontrollkästchen genauso wie die Box selbst angeklickt werden kann, um den Status Aus / Ein umzuschalten.
Um dies auszuschalten, setzen Sie die Etikettenanzeige auf "blockieren", und legen Sie Höhe, Breite, Hintergrundfarbe, Textausrichtung, Schriftart und Rand wie folgt fest. Beachten Sie auch, dass ich die Position auf "Fest" gesetzt habe. Dadurch bleibt der Lichtschalter sichtbar, wenn Sie die Seite nach unten scrollen. Beim Schweben ändern wir einfach die Farben.
Zum Abschluss verwenden wir die absolute Positionierung auf der Checkbox selbst und drücken sie in das Niemandsland, um sie effektiv vor der Seite zu verbergen.
Fortschrittskontrolle
Dies gibt uns eine kleine Schaltfläche, die auf der linken Seite der Seite ausblutet. Hier ist eine Ansicht der beiden Staaten, die wir eingerichtet haben:
Schritt 8 Ändern Sie die Hintergrundfarbe
Jetzt, da wir unseren Lichtschalter eingerichtet haben, ist es an der Zeit, ihn in unserem CSS anzuvisieren und das?: Checked? Zustand. Das wahre Voodoo ist, dass wir andere Selektoren anpacken können und auf unserer Demoseite fast alles ändern können, wenn Sie auf die Schaltfläche klicken. Beginnen wir mit dem Ändern der Hintergrundfarbe der Seite:
Hier haben wir die verwendet benachbarter Geschwisterkombinator, die sich auf irgendeinen? main? Klasse, die unmittelbar unserem geprüften Lichtschalter folgt. Dadurch wird die Hintergrundfarbe effektiv dunkel, wenn der Schalter ausgeschaltet ist.
Der Trick
Der skurrile Teil hier ist, dass Sie den zweiten Selektor irgendwie an das Kontrollkästchen binden müssen, weil es wirklich alles einen komplizierten (und wahrscheinlich ziemlich ineffizienten) Selektor ausmacht. Zum Beispiel konnten wir nicht einfach den Körper packen, sondern mussten einen Geschwister-Selektor verwenden, der die Beziehung zwischen dem Kontrollkästchen und einem anderen Element definierte. Sie können dies auch mit der Kinderkombinator, was wir im nächsten Schritt sehen werden.
Schritt 9 Vieles Zeug ändern!
Nun, da wir wissen, wie der Lichtschalter verwendet wird, um Elemente auf der Seite zu ändern, können wir verrückt werden. Hier ändere ich die Textfarbe, Hintergrundfarbe und sogar das Hintergrundbild zu einem Nachtfoto! Ich habe auch das geändert h2: nach zu lesender Text? Aus? so dass die Überschrift zwischen "Lights On" wechseln. und? Lichter aus? wie Sie mit dem Toggle spielen. Ziemlich cool!
Dies gibt uns ein schönes dunkles Thema, das der Benutzer zur Aktivierung auswählen kann.
Sehen Sie es live
Unsere ganze harte Arbeit hat sich gelohnt, nicht die Zeit, um die Früchte unserer Arbeit zu sehen. Klicken Sie auf den Lichtschalter links, um den Effekt zu sehen. Fork die Demo auf CodePen und zeig uns, wie du es noch besser machen könntest!
Demo: Klicken Sie hier, um zu starten.
Fazit
Wir haben heute mit sehr wenig Aufwand viele ausgefallene CSS-Tricks gemacht. Wir haben ein Klickereignis erstellt, indem wir ein Kontrollkästchen entführten, wechselnde Pseudoelemente verwendeten und das Gesamtbild einer Seite umschalten.
Wie immer danke fürs Lesen. Ich hoffe, Sie haben auf dem Weg ein paar Dinge gelernt, die ich immer mache!