Es gibt einen allgemeinen Trend zu kleineren Spaltenlisten. in Homepage-Layouts. Tech-Startups und Landing-Pages nutzen diesen Effekt insbesondere, um Funktionen in ihren Produkten zu fördern. Es ist jedoch ein netter kleiner Layout-Layout-Stil für jeden Zweck. Die Verwendung von Symbolen in Ihrem Design löst die üblichen Vorlagenentwürfe für eine faszinierende Listendarstellung auf.
In diesem Tutorial möchte ich Ihnen zeigen, wie Sie benutzerdefinierte CSS3-Webfonts als Symbol im HTML-Code verwenden können. Wir erstellen eine sehr einfache Startup-Website mit dem zweispaltigen Listenansatz. Das gesamte CSS ist sehr unkompliziert, obwohl Sie einige Eigenschaften möglicherweise etwas erforschen müssen. Dieser Effekt ist bei allen standardkonformen Browsern nativ und wird unter OS X oder Windows einwandfrei dargestellt.
Live Demo - Quellcode herunterladen
Schriftarten herunterladen
Ich empfehle Designern immer, sich den Entypo-Zeichensatz anzuschauen, der Open Source ist und kostenlos heruntergeladen werden kann. Das Paket enthält Schriftarten aller 4 Hauptdateitypen sowie Desktop-Versionen für die Installation auf Mac oder PC. Es hat auch ein separates Icon-Pack für Social Media-Buttons. Wir brauchen nur die Entypo-Web-Schriftfamilie, die in ein neues Verzeichnis namens Schriftarten kopiert wird. Hier ist die Liste der Dateien, die ich enthalten habe:
- entypo.eot
- entypo.svg
- entypo.ttf
- entypo.woff
Ich werde später zeigen, wie man dies mit CSS einbinden kann. Stellen Sie nur sicher, dass alles ordnungsgemäß organisiert ist und auf der Seite angezeigt werden kann. Auch meine Demo hat einen kleinen Bilderordner für die BG-Effekte, aber sie sind für das gesamte Layout nicht relevant. Laden Sie einfach eine Kopie meiner Demo herunter, wenn Sie alle Ressourcen zusammen haben möchten.
Zuerst sollten wir uns ansehen, wie die Seite aufgebaut ist, und den Plan, alles perfekt auszurichten.
HTML planen
Wir müssen nicht den gesamten HTML-Code der Seite abdecken, sondern nur die wichtigen Teile. Der erste Abschnitt ist mein Header-Bereich, der einen Link zur relativen CSS-Datei sowie einige eindeutige Google Webfonts enthält. Beachten Sie, dass unser lokales CSS3 @Schriftart Die Deklaration wirkt sich nicht auf diese Schriftarten von Drittanbietern aus.
Es ist hier nicht zu viel Außergewöhnliches, sodass wir uns direkt in den Körperabschnitt bewegen können. Ich benutze eine äußere Hülle div mit einem internen #Inhalt Container. Dieser enthält den gesamten Innenseitenabschnitt sowie die zweispaltigen Listenelemente. Das gesamte Objekt befindet sich tatsächlich in einer ungeordneten Liste mit der ID #Eigenschaften.
Ich habe ein hinzugefügt .clearfix Klasse auf das äußere UL-Element, so dass der Container den restlichen Inhalt der Seite nach unten drückt. Da alle internen Listenelemente schwebend sind, benötigen wir eine Methode, um das Boxmodell in Schach zu halten. Ebenso jedes Listenelement .Merkmal enthält sowohl eine Spanne als auch eine kleinere Überschrift.
Der Bereich verwendet unsere Piktogrammsymbole, um ein bestimmtes Design direkt neben dem Text anzuzeigen. Wir haben die Möglichkeit, weitere Klassen hinzuzufügen, so dass ein Listenelement die gesamte Seite umfassen kann. Feature-Elemente sind nur das grundlegendste Containerobjekt, bei dem wir zwei Einträge pro Zeile haben. Sie werden auch feststellen, dass der Symbolbereich sowohl eine Klasse für die spezielle Schriftfamilie als auch eine Klasse für den angezeigten Symboltyp hat.
Diese sekundäre Klasse ist hilfreich, wenn sich das Symbol an einer fremden Stelle befindet. Wenn etwas zu groß oder zu klein oder unpraktisch positioniert ist, kann diese direkte Klasse leichter manipuliert werden. Außerdem ist das Durchlaufen des HTML-Codes ein einfacher Prozess. Die letzten Codes befinden sich in meinem styles.css Datei und es ist sicherlich nicht zu kompliziert.
Spaltenstile mit CSS
Das erste interessante Stück, das Sie bemerken werden, ist ganz oben in meiner Datei. Hier verwenden wir eine neue CSS3-Zeichensatz-Deklaration, um die Symbolzeichensätze einzurichten. Durch die Verwendung eines einzigen Familiennamens können wir alle vier verschiedenen Dateitypen gleichzeitig importieren.
Das zusätzliche Schriftgewicht und Schriftstil Eigenschaften sind nicht notwendig - aber unbedingt wert. Es schadet nicht, anzugeben, dass unsere neue Schriftart standardmäßig nicht fett oder kursiv ist. Wenn Sie viele CSS3-Webfonts verwenden möchten, sollten Sie diese Vorlage auch speichern.
Dies ist ein weiterer interessanter Code, den ich im HTML-Code nicht angezeigt habe. Grundsätzlich habe ich einen Absatz von Intro-Text eingerichtet, der mit den neueren CSS3-Eigenschaften und den entsprechenden Herstellerpräfixen in zwei Spalten aufgeteilt ist. Beachten Sie, dass dies nichts mit der Auflistung der Symbole zu tun hat. Es handelt sich jedoch um eine andere Methode zum Generieren von Spalteninhalt auf Ihren Seiten.
Jetzt habe ich alle Codes für die Hauptpiktogrammliste.In meiner Piktogrammklasse verwenden wir die neue Familie 'EntypoRegular' mit einer Standardgröße von 8em. Die Symbole sind ursprünglich sehr klein, daher müssen wir sicherstellen, dass sie groß genug sind, um direkt neben einem Textblock mit Unterüberschriften platziert zu werden.
Jedes von den .Merkmal Artikel ist auf eine Breite von 420 Pixeln begrenzt und enthält einige interne Polsterungen. Die Leerzeichen zwischen den einzelnen Spalten geben der ungeordneten Liste eine volle Breite von 100%. In den Listenelementen sind die Piktogramme mit relativer Positionierung nach links verschoben. Sie werden vielleicht überrascht sein, wie einfach es ist, jedes Symbol an der richtigen Stelle zu halten, mit ein paar kleinen Ergänzungen.
Der letzte Codeblock ist eine Sammlung aller verschiedenen Symbolklassen. Ich habe jedes bei 12em einzeln bemessen, da einige Symbole größer oder kleiner erscheinen als andere. Mit diesem System können Sie jeden einzelnen Satz von Symbolen lokalisieren, um die Darstellung zu ändern. Da sie relativ zum Container positioniert sind, können Sie auch die Eigenschaften left / right / top / bottom verwenden, um die Ausrichtung zu erleichtern.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Obwohl dies kein besonders schwieriges Tutorial ist, können die verschiedenen Schritte zum Erstellen einer Spaltenliste sehr zeitaufwändig sein. Sie müssen die perfekte Symbolschriftart bestimmen und Ihren geschriebenen Text so planen, dass er genau zu Ihnen passt.
Diese Demo sollte einen guten Ausgangspunkt bieten, um den Ball ins Rollen zu bringen. Verbringen Sie ein bisschen Zeit mit dem Brainstorming Ihrer eigenen Ideen und wie Sie dieses Design in ähnliche Layouts anwenden können. Wenn Sie Anmerkungen oder Fragen haben, können Sie diese gerne im Diskussionsbereich für Kommentare mit anderen teilen.