Accentsconagua
Share
In diesem Tutorial erstellen wir einen saisonalen Adventskalender mit CSS Grid, SVG und einer Handvoll festlichem Jubel! Beginnen wir mit einem Blick darauf, worauf wir hinarbeiten, um die Tage anzuklicken, um zu sehen, was sich darunter befindet:
Für dieses Tutorial benötigen Sie eigentlich nicht viel, nur einen Code-Editor (zur Vereinfachung von CodePen) und ein paar grundlegende HTML- und CSS-Kenntnisse. Sie werden Ich brauche ein paar festliche Bilder - ich habe Illustrationen von dem sehr talentierten Masastarus von Envato Elements (sie sind Vektor und absolut perfekt dafür):
Glückliche Kinder, die Weihnachten feiern
Gruppe von Kindern und WeihnachtsbaumFür unseren Adventskalender verwenden wir 25 Rasterobjekte. einen für jeden Tag vor Weihnachten und einen weiteren, der eine Titelgrafik enthält. Auf kleinen Bildschirmen sieht es ungefähr so aus:
Und das auf größeren Bildschirmen:
Das türkisfarbene Gitterelement wird unsere Titelgrafik enthalten.
Zum Anstoß benötigen wir 25 Elemente in einem Container. Fügen wir also etwas HTML hinzu:
Spitze: Aufgrund der wiederholten Natur dieses Markups verwenden Sie möglicherweise eine Templatiersprache wie HAML. Mit HAML können Sie über 24 Elemente in einer Schleife abspeichern, damit Sie nicht jedes einzelne ausschreiben müssen. Der folgende kleine Ausschnitt kompiliert genau das, was Sie oben sehen:
% section.grid-1% div.title - (1… 24) .each do | i | % div : class => "day - # i"
Wenn wir noch mehr Elemente in diesen Divs verschachteln, werden Sie die Zeit schätzen, die HAML Ihnen erspart!
Lassen Sie uns nun einige grundlegende Stile hinzufügen, um unser Raster einzurichten. Wir beginnen mit der Zuweisung Anzeige: Raster; zu unserem Containerelement. Nach einigen Dimensionen definieren wir dann die Gitterelemente.
/ * mobiles erstes gitterlayout * / .grid-1 display: grid; Breite: 96%; Max-Breite: 900px; Marge: 2% auto; Rastervorlagen-Spalten: Wiederholung (3, 1fr); Raster-Vorlage-Zeilen: Auto; Gitterlücke: 25px;
Wir sind als erstes mobil geworden, und Sie werden sehen, dass wir zunächst nur drei Spalten definieren. Wir werden sofort eine Medienanfrage verwenden, um größere Bildschirme zu ermöglichen.
Rastervorlagen-Spalten: Wiederholung (3, 1fr); gibt uns drei Spalten mit jeweils gleicher Breite (1fr-Einheit)Raster-Vorlage-Zeilen: Auto; ist eigentlich der Standardwert, aber es gibt an, dass die Zeilen keine bestimmte Höhe haben, die ihnen zugewiesen wird. Wir können beliebig viele hinzufügen, und sie wachsen mit dem Inhalt.Gitterlücke: 25px; definiert unsere Dachrinnen.Das ist wirklich alles, was wir brauchen. Grid kann von hier aus alles erledigen, wenn wir es verlassen, aber wir möchten genauer festlegen, wo wir jedes Gitterelement platzieren. Aus diesem Grund verwenden wir Gitterbereiche.
Wir können jedem Bereich des von uns definierten Gitters einen Namen zuweisen und ihn auch visuell schreiben:
Gitter-Schablonenbereiche: "t t t" d23 d20 d12 d2 d14 d4 d5 d22 d16 d1 d7 d9 d10 d11 d18 d13 d3 d15 d1 d6 d17 d8 d21 d21
Hier benennen wir den ersten Bereich, der drei Spalten in der ersten Zeile umfasst t (wo wir den Titel platzieren werden). Dies ist möglicherweise nicht der hilfreichste Name, wird aber vorerst die Arbeit erledigen. Jeder der anderen Bereiche erhält einen Namen, der den Tagesnummern entspricht, und wie Sie sehen, können wir sie beliebig platzieren. Die Möglichkeit, „zufällig“ so zu gestalten, ist perfekt für einen Adventskalender.
Durch das Hinzufügen einer Medienabfrage können wir das Layout für größere Bildschirme (sehr einfach) ändern.
/ * media query * / @media only screen und (min-width: 500px) .grid-1 grid-template-column: repeat (6, 1fr); Gitterschablonenbereiche: "tt d2 d7 d8" "t t d4 d11 d12" t t d19 d9 d13 d1 d24 d24 d21 d20 d21 d20 d24 d24 d5 d22 d22 d22 d14 d10 d15 d15
Mit dieser Medienabfrage stellen wir fest, dass wir für Rasterfenster, die breiter als 500px sind (beliebige Zahl), das Raster so ändern, dass es sechs Spalten enthält: Rastervorlagen-Spalten: Wiederholung (6, 1fr);.
Und wir können die Anordnung der Artikel völlig neu definieren und die Tage dort platzieren, wo wir Lust haben. Sie werden feststellen, dass der Titelblock jetzt drei Spalten und drei Zeilen oben links belegt und d24 einen Bereich von 2 × 2 belegt, um ihm mehr Bedeutung zu verleihen. Dies wird deutlich, wenn wir im nächsten Schritt unsere Gitterelemente den Gitterbereichen zuordnen.
Im Moment können wir nichts von dem, was wir getan haben, sehen, also fügen wir den Rasterelementen provisorische Stile hinzu, um die Dinge sichtbar zu machen.
Abschnitt div background: # 2e313d; Polsterung: 40px;
Schau mal:
Benötigen Sie eine Grundierung auf Rasterflächen? Erfahren Sie in diesem Anfänger-Tutorial mehr über das Ganze:
Jetzt müssen wir unsere Rasterelemente den Bereichen zuordnen, die wir festgelegt haben. Wir machen das wie folgt:
/ * einzelne Elemente * / .title Gitterfläche: t; .day-1 grid-area: d1; .day-2 grid-area: d2; .day-3 grid-area: d3; …
Sie können unsere sehen div.title wurde der Netzfläche zugewiesen t, und jeder Tag wurde einem entsprechenden Bereich zugeordnet. Es gibt nichts zu sagen, was Sie nicht zuordnen können .Tag 3 zu Netzfläche: d16; Natürlich entscheiden wir uns einfach, die Dinge auf diese Weise zu organisieren. Wie sieht es aus??
Das ist die Grundstruktur, die alle sortiert ist. Jetzt müssen wir unsere CSS-Türen erstellen. Wir werden zwei Divs in jedes Gitterelement einfügen - einen für die Vorderseite der Tür, einen für den Rücken - beide mit einem anderen Div umwickelt, und wir werden einen Checkbox-Hack verwenden, um die gesamte Sache umzudrehen, wenn es ist angeklickt.
Zunächst fügen wir jedem Gitterelement ein Label, ein Kontrollkästchen und die Divs hinzu:
Wieder müssen Sie dies für alle 24 Rasterobjekte tun. Dies ist ein sperriger Block aus sich wiederholenden Markup-Zeilen mit einer Länge von 245 Zeilen. HAML könnte hilfreich sein. So würde das aussehen:
% div : class => "day - # i"% label% input : type => "Ankreuzfeld" .door .front # i .back
Mit leicht angepasster Polsterung sehen alle Kontrollkästchen jetzt aus:
Bereite dich vor; Was kommt, ist wohl das komplexeste Stück dieses ganzen Builds. Es ist ein großes Stück und sehr wenig funktioniert, ohne dass das Ganze anwesend ist. Wir werden uns mit 3D-Transformationen etwas bewegen.
Zuerst blenden wir die Kontrollkästchen aus und geben an, dass wir eine bestimmte Perspektive auf unsere Etiketten anwenden möchten (Perspektive: 1000px; behandelt das). Verwandlungsstil: preserve-3d; besagt, dass untergeordnete Elemente des Labels nicht in einer flachen Ebene, sondern in einem 3D-Raum angezeigt werden. Anschließend verwenden wir einige Flexbox-Stile, um sicherzustellen, dass das Etikett den gesamten für es verfügbaren Bereich ausfüllt.
Einige Stile auf der .Tür Element (das die Vorder- und Rückseite enthält), legen Sie den Übergangszeitpunkt fest und ordnen Sie die Dinge weiter auf:
/ * Türstile * / .grid-1 Eingabe Anzeige: keine; Beschriftung Perspektive: 1000px; Verwandlungsstil: preserve-3d; Cursor: Zeiger; Anzeige: Flex; Mindesthöhe: 100%; Breite: 100%; Höhe: 120px; .door width: 100%; Verwandlungsstil: preserve-3d; Übergang: alle 300ms; Rand: 2px gestrichelt transparent;
Okay, jetzt konzentrieren wir uns auf die Vorder- und Rückseite unserer Tür.
.Tür div Position: absolut; Höhe: 100%; Breite: 100%; Sicht nach hinten: versteckt; Anzeige: Flex; Ausrichten-Elemente: Mitte; Inhalt rechtfertigen: Mitte; .door .back Hintergrundfarbe: # 2e313d; umwandeln: RotateY (180 Grad);
Das .Tür div Wahlschalter zeigt auf beide .Vorderseite und das .zurück divs. Wir verwenden es, um jedes zu 100% der Breite und Höhe des zu machen .Tür Container und absolut links oben positioniert. Die Flexbox-Regeln stellen sicher, dass der Inhalt (die Anzahl) zentral ausgerichtet ist und die Sicht nach hinten: versteckt; Die Regel stellt sicher, dass keines der Gesichter sichtbar ist, wenn ihre Rückseite auf uns gerichtet ist. Das ist wichtig, da wir uns dann auf das konzentrieren .zurück und legen Sie es mit um umwandeln: RotateY (180 Grad);.
All dies hat zu einem ziemlich coolen Effekt geführt. Wir werden den aktivierten Status des Kontrollkästchens verwenden, um die Gesichter zu überblenden. Wenn wir auf das Etikett klicken (das den gesamten Rasterbereich ausfüllt), wird das Kontrollkästchen deaktiviert und das Kontrollkästchen deaktiviert, auch wenn es nicht angezeigt wird. Abhängig von diesem Zustand ändern wir, in welche Richtung .Tür ist mit Blick auf.
label: hover .door border-color: # 385052; : markiert + .door umwandeln: drehenY (180 Grad);
Die erste Regel gibt uns einen Schwebezustand. Die zweite Regel verwendet einen benachbarten Selektor, also wenn a .Tür Dem Element ist unmittelbar ein a vorangestellt : geprüft Element drehen wir es um 180 Grad auf der Y-Achse (wir drehen es um). All dies gibt uns unsere grundlegende Türfunktionalität!
Lassen Sie uns die Dinge schön aussehen lassen. Das erste Visual, das wir einfügen werden, ist unsere Titelgrafik. Mit den glücklichen Kindern, die Weihnachten feiern, nahm ich den Titel, änderte die Details und speicherte eine SVG-Datei.
Spitze: Für detaillierte Vektoren wie diese gehen Sie in Illustrator zu Objekt> Pfad> Vereinfachen… und Sie können die Komplexität reduzieren. Durch das Trimmen der Anzahl der Kurven und Punkte können Sie die Dateigröße erheblich verringern, ohne den Gesamteffekt zu stark zu beeinträchtigen.
Es gibt einige Möglichkeiten, dieses Bild der Seite hinzuzufügen, aber ich habe gerade ein img Tag in unserem Markup:
Einige Stile verleihen unserem Bild einen fließenden Charakter und richten es innerhalb des Rasterbereichs zentral aus:
.Titel Anzeige: Flex; Ausrichten-Elemente: Mitte; Inhalt rechtfertigen: Mitte; .title img width: 90%; Höhe: Auto;
Um den leeren Hintergrund zu verbessern, fügen wir dem Körper ein weiteres SVG (den Schneefall und die Wolken) über CSS hinzu:
body hintergrund: url (snow-bg.svg) keine Wiederholung der oberen Mitte # 82d8cb; Hintergrundgröße: Cover;
Jede unserer 24 Türen muss auch ein Bild hinter sich haben. Wir könnten dies auf verschiedene Weise tun, aber in diesem Fall speichern wir eine Reihe von SVG-Dateien und fügen sie über CSS als Hintergrund hinzu. Für jede Tür haben wir, nachdem wir ihren Netzbereich definiert haben, eine Regel für die Tür .zurück Gesicht:
.Tag-6 Gitterfläche: d6; .day-6 .back background: url (snowflake.svg);
Das gibt uns das:
Ziemlich gut! Jetzt müssen wir diese Bilder nur mit ein paar allgemeinen Regeln aufräumen.
Zunächst einmal müssen diese Hintergrundbilder nur einmal angezeigt werden, so dass wir ein hinzufügen keine Wiederholung. Sie müssen auch zentral und richtig skaliert sein.
.Tür. Rückseite Hintergrundgröße: enthalten; Hintergrundposition: Mitte Mitte; Hintergrundwiederholung: keine Wiederholung; Hintergrundfarbe: # 2e313d; umwandeln: RotateY (180 Grad);
Etwas Grenzradius hinzugefügt zu .Tür und .Tür div gibt uns eine freundliche Ästhetik. Und schließlich verknüpfen wir die Schrift Kalam in Google-Schriftarten, um das letzte typografische Detail zu verbessern:
Styles:
/ * hinzugefügt .door div * / font-family: 'Kalam', kursiv; Farbe: # 385052; Schriftgröße: 2em; Schriftdicke: fett; Text-Schatten: 1px 1px 0 rgba (255, 255, 255, 0,2);
Das über die Dinge zusammenpackt! Natürlich ist dies wirklich nur für den Wert von Neuheiten und das Üben von CSS-Grid (der Status jeder Tür wird nicht für die nächste Browsersitzung oder ähnliches gespeichert), aber wir haben mit einigen Markups und Stilen einen langen Weg zurückgelegt.
Support ist ein letzter Punkt zu erwähnen; Es gibt einige Aspekte dieses Tutorials, die noch keine vollständige Browserunterstützung bieten. Einige Tipps zum Umgang damit finden Sie in den unten stehenden Ressourcen.
Ich hoffe, Ihnen gefällt das Tutorial und es macht Spaß, die Tage zu zählen!
