Kennst du irgendwelche guten Kartentricks? Hoffentlich werden Sie es nach heute tun! Wir werden einige einfache und attraktive Spielkarten mit reinem CSS erstellen. Dann lernen wir, wie Sie jede Karte gezielt anregen und animieren, um noch mehr Spaß zu haben.
Auf dem Weg werden wir sehen, wie man vor und nachher die Karten mit minimalem Markup aufbaut. Lass uns anfangen!
Starten Sie die Live-Demo oder laden Sie den Quellcode herunter.
Eine Karte erstellen
Die erste Aufgabe auf unserer Liste ist offensichtlich der Bau einer Karte. Wir werden dies mit minimaler Auszeichnung und ohne Einbetten von Bildern durchführen. Unmöglich sagst du? Nein! Mal sehen, wie es funktioniert.
Erstellen Sie zunächst ein neues HTML-Dokument und fügen Sie ein grundlegendes div mit zwei Klassen ein: Karte und suitdiamonds.
Jetzt ist es Zeit, etwas auf die Karte zu setzen. Wir werden alles der Einfachheit halber zu einem Ass machen. Alles, was Sie brauchen, ist ein Absatz mit einem "A".
Beachten Sie dabei, dass mein gesamtes Ziel hier minimaler, wiederverwendbarer Code ist. Beachten Sie, dass ich Klassen und keine IDs verwendet habe. Das ist natürlich so, weil Klassen wiederverwendbar sind. Es gibt auch einen Grund, warum der Klassenname hier nicht nur "Diamanten" ist, was wir später sehen werden. Wenn wir uns weiter mit unserem CSS beschäftigen, stelle ich fest, wo ich Selektoren aneinander reihe und eine fast modulartige Codebasis erschaffe, um Wiederholungen zu reduzieren.
Card CSS
Ob Sie es glauben oder nicht, das ist alles, was wir für unsere Karte brauchen. Alles andere wird mit CSS abgezogen. Um hier zu beginnen, benötigen wir einige grundlegende Seitenstile, gefolgt von unseren Karte Klassenstile.
Wie Sie sehen können, sind die Kartenstile ziemlich einfach. Wir machen die Karte weiß, runden die Ecken ab, legen einen Schatten usw. an. Außer der relativen Positionierung ist nichts zu schade.
Jetzt machen wir unser? A? etwas attraktiver aussehen. Auch hier nicht viel, nur Textausrichtung und Schriftstile.
Wir sollten an diesem Punkt ziemlich gut abschneiden, schauen wir uns mal an, was wir haben:
Es sieht aus wie eine Karte, oder? Es fehlt etwas? die Anzüge! Diamanten, Herzen, Keulen, Pik; Sie müssen Anzüge haben. Das wird schwierig, wenn wir uns von Bildern fernhalten wollen, aber ich habe ein paar Tricks im Ärmel.
CSS anpassen
Da wir unserer Seite keine zusätzlichen Markierungen hinzufügen möchten, möchten wir dies natürlich tun Vor und nach dem um die Anzug-Symbole einzufügen Glücklicherweise erkennen die meisten Standard-Browser eine Vielzahl von Symbolen. Wenn Sie sich CopyPasteCharacter ansehen, werden Sie genau das finden, was Sie für ein Kartenspiel benötigen.
Wie Sie sehen können, haben wir hier einen Diamanten mit davor und danach eingefügt (also haben wir zwei). Als nächstes müssen wir dies in allen vier Farben wiederholen:
Wenn Sie schnell sind, werden Sie feststellen, dass eines dieser Symbole auf jeder Karte auf dem Kopf stehen sollte. Dies wäre mit einer CSS-Transformation einfach genug, aber da wir die Karte niemals auf dem Bildschirm auf dem Kopf sehen, denke ich, dass dies ein unnötiger Teil der Realität ist, der den Ausführungscode nicht wert ist.
Alles, was wir bisher getan haben, ist das Erstellen der Symbole. Wir müssen sie noch richtig formatieren und positionieren. Normalerweise würde dies ein dauern Tonne von Selektoren, da wir vier Anzüge haben, von denen jede eine Vorher-Nachher-Version hat. Wir waren jedoch klug und benutzten das Wort "Anzug". in jedem Klassennamen. Dies bedeutet, dass wir problemlos alle Anzugklassen gleichzeitig anvisieren können. Dann müssen wir nur die Vorher- und Nachher-Klassen separat formatieren. Genial!
Was zum Teufel? Wenn Sie das noch nie zuvor gesehen haben, ist es etwas ganz Besonderes mit einem Namen, den ich gerne sage, weil er klüger klingt als ich wirklich bin: der beliebiger Teilwertattributwert-Wähler. Ich erkläre das hier ausführlich, aber im Grunde können Sie Teile eines Attributs anvisieren und alles übernehmen, was diesen Teil gemeinsam hat.
Damit haben wir eine komplette Karte! Es ist ziemlich beeindruckend, wenn man bedenkt, dass unser Markup so kurz ist.
Eine Hand von Karten
Wir haben nur eine einzige Karte auf unseren Tisch gelegt, aber wir haben den Stil für alle vier Farben angegeben. Lassen Sie uns eine Hand erstellen? von Karten, um sie alle zu zeigen. Hier ist das Markup:
Das ist so ziemlich das Gleiche wie zuvor, nur dass wir diesmal ein Wrapper-Div mit einer "Hand" haben. Klasse und wir haben alle vier Anzugklassen verwendet. Für unsere Handklasse brauchen wir nicht viel Styling. Wir verwenden jedoch schwimmt auf unseren Karten, was bedeutet, dass wir einen klaren Fix für das Karteneltern benötigen, das ist das Hand-Div. Hier ist der Code von Nicolas Gallagher, zusammen mit einem einfachen Hover für die Karten.
Das ist es! Jetzt haben wir uns ein kleines Kartenset aus reinem CSS und HTML zusammengestellt. So sehen sie aus:
Verbreite sie
Nun, da wir unsere Karten erstellt haben, wollen wir etwas Spaß damit haben. Was ich möchte, ist, eine einzige Karte zu haben, die sich in der vollen Hand befindet. In dem aufgefächerten Formular sollten die Karten nicht gerade sein, wie wir es oben gesehen haben, sondern gedreht, als würden Sie sie in der Hand halten.
HTML
Der HTML-Code, der dies abruft, ist ziemlich genau das, was wir zuvor gesehen haben. Nur diesmal einen "Spread" hinzufügen? Klasse zum Container div.
CSS
Um das abzubrechen, braucht man zwar ein bisschen CSS, aber es ist alles ziemlich einfach, seine Gedanken zu fassen. Zunächst werden wir unseren Container etwas genauer beschreiben. Legen Sie dazu eine Höhe, Breite und einen Positionierungskontext für die Spread-Klasse fest.
Nächster. Positionieren Sie die Karten absolut so, dass sie alle relativ zum Spread div aufeinander liegen. Setzen Sie die Positionswerte zurück und richten Sie einen Übergang für diese Positionswerte ein, damit die Änderungen animiert werden.
Jetzt müssen wir eine Reihe von Schwebeflugzuständen einrichten, die jede Karte manuell in dem gewünschten Array positionieren. Wir machen dies mit CSS3-Transformationen, die auf jede Farbe ausgerichtet sind, mit unterschiedlichen oberen und linken Werten. Letztendlich waren dies viele Versuche und Irrtümer. Glücklicherweise habe ich diese Arbeit für Sie erledigt, hier ist der Code, den Sie benötigen.
Wenn sich die Karten in der ausgebreiteten Form befinden, möchte ich einen weiteren Hover-Status, der jede Karte subtil hervorhebt. Wir können dies tun, indem wir den zuvor angewendeten Box-Schatten dunkler machen.
Sehen Sie es in Aktion!
Nun, da wir alle mit dem Code fertig sind, ist es Zeit, das Live-Beispiel noch einmal zu betrachten. Als Bonus warf ich noch eine dritte Hand, die immer größer wird, wenn Sie über eine Karte fahren.
Demo: Klicken Sie hier, um zu starten.
Was wirst du mit ihnen machen?
So haben Sie es, reine CSS- und HTML-Spielkarten. Um ehrlich zu sein, ich habe keine Ahnung, was ich mit ihnen machen soll, aber es hat Spaß gemacht, sie zu bauen. Wenn Sie tolle Ideen haben, wie Sie diese verbessern oder auf spielerische Weise einsetzen können, schreiben Sie unten einen Kommentar und lassen Sie es mich wissen!