Wer liebt keine gute Liste? Wir verwenden sie ständig in unserem Markup für verschiedene Situationen. Heute betrachten wir einige einfache und praktische Beispiele, die Sie stehlen und in Ihrer eigenen Arbeit verwenden können.
Wir beginnen mit einer lustigen animierten vertikalen Liste, stylen eine Liste mit Miniaturbildern und Text, eine andere mit nur Bildern und schließlich eine geordnete Liste, bei der die Zahlen anders als der Rest des Typs sind. Hier gibt es eine Menge toller Dinge zu lernen, also springen wir rein!
HelvetiList
Für unsere erste Liste beginnen wir mit einem einfachen, minimalistischen, aber sehr attraktiven Design, das stark von der Schönheit der Typografie abhängt. Wir verwenden einige dünne Helvetica-Stile und werfen eine schwebende Animation im Schwebeflug auf.
Demo: Schauen Sie sich die Demo und den Code auf CodePen an.
HTML
Unser Markup hier ist einfach. Erstellen Sie ein Div (Sie möchten wahrscheinlich eine Klasse oder eine ID in einem Live-Projekt), geben Sie dann einen Header und eine ungeordnete Liste mit fünf Listenelementen ein.
CSS
Wie wir im Screenshot oben gesehen haben, verwenden die Listenelemente einen sehr dünnen Typ, subtile Trennzeichen und einen Hover-Status, der die Schrift vergrößert. Geben Sie zunächst dem div eine Breite und stellen Sie Ihre generischen h2-Stile ein.
Wenden Sie als Nächstes einen Listenstil vom Typ none an, um die Aufzählungszeichen aufzuheben und eventuell vorhandene Ränder oder Auffüllung zurückzusetzen. Für die eigentlichen Listenelemente habe ich einen leichten unteren Rand verwendet, der diesen kleinen Trenner liefert. Ich habe den Last-Child-Selector verwendet, aber es ist wirklich keine große Sache, wenn es einen Browser gibt, der das nicht erkennt und beschließt, einen zusätzlichen Rand an die Unterseite zu setzen.
Beachten Sie auch, dass ich beide Male die Schriftart festlegte, CSS-Kurzschrift und unterschiedliche Gewichte verwendete. Zum Schluss habe ich einige Verbindungsstile angewendet und den Übergang so eingestellt, dass die Schrift vergrößert und die Hintergrundfarbe im Hover geändert wird.
Miniaturbildliste
Ein wirklich übliches Format, das Sie für Listen sehen, ist Ihr grundlegendes Miniaturbild und Text. Setup ist eine großartige Möglichkeit, um eine ansonsten langweilige Liste von Absätzen interessant zu gestalten.
Dies ist ein äußerst vielseitiger Listenstil, den Sie für eine beliebige Anzahl von Projekten verwenden können. Mal sehen, wie es funktioniert.
Demo: Schauen Sie sich die Demo und den Code auf CodePen an.
HTML
Der HTML-Code ist etwas komplizierter. Jedes Listenelement muss drei Kinder haben: ein Bild, eine Überschrift und einen Absatz. Die Bilder, die ich verwende, sind 100px x 100px. Denken Sie daran, wenn Sie diese Größe anpassen möchten. Alles in allem ist dies alles noch sehr einfach, was Sie nicht im geringsten stören sollte.
CSS
Hier haben wir unsere Listenelemente nach links verschoben, einen Rahmen nur auf der rechten Seite gesetzt, die Standard-Link-Stile entfernt und meine eigenen eingerichtet und dann sowohl den Hover-Status als auch den aktiven Status gestaltet.
Große Nummern geordnete Liste
Vergessen Sie nicht, dass alle Listen keine ungeordneten Listen sind! Es gibt definitiv viele nützliche Anwendungen für geordnete Listen. Eine wirklich schwierige Sache bei geordneten Listen ist, die Zahlen anders zu formatieren als der andere Text. Mal sehen, wie das funktioniert.
Demo: Schauen Sie sich die Demo und den Code auf CodePen an.
HTML
Nun, wie ich das gebaut habe, wird super umstritten sein. Wie Sie sehen, füge ich die Zahlen manuell ein, obwohl HTML dies automatisch für Sie erledigt. Es gibt jedoch einen guten Grund dafür.
Um diese Idee zu beginnen, warf ich einen Absatz in die Listenelemente und codierte dann den Typ li und den Typ li> p auf unterschiedliche Weise. Es war jedoch ein totaler Albtraum zu versuchen, mit dieser Methode alles in Ordnung zu bringen. Um das Problem zu beheben, war das CSS letztendlich so chaotisch und unangenehm, dass ich es vollständig zugunsten dieser einfacheren Methode aufgegeben habe, die tatsächlich klares, einfaches CSS ermöglicht.
CSS
Wie Sie im nachstehenden Code sehen können, haben Sie hier die Standardnummern aufgehoben und dann meine Spannen auf absolut gesetzt, damit ich sie nach links von den Absätzen schieben könnte, was wiederum eine zusätzliche Auffüllung der Absätze erforderlich machte. Es ist vielleicht nicht die schönste Lösung, was den Code angeht, aber es ist die kürzeste und unkomplizierteste Möglichkeit, die ich ohne bizarre Positionsfehler finden könnte.
Fazit
Dort haben Sie fünf super einfache, aber absolut praktische Listenstile, die Sie kopieren und in Ihren eigenen Code einfügen können. Wenn Sie weitere Ideen für kreative Listen haben, die Sie teilen möchten, teilen Sie uns dies in den Kommentaren unten mit.