Die Verwendung einer bildbasierten Schriftart kann eine lustige und schnelle Möglichkeit sein, Symbole in Ihrer Site zu implementieren. Dies ist ein sehr einfacher Prozess, der Ihnen die vollständige Freiheit gibt, Ihre Icons jederzeit neu zu skalieren.
Heute verwenden wir die ausgezeichnete Pictos-Schriftart, um eine einfache Webseite zu erstellen, die Ihnen einen Eindruck von dem Prozess vermittelt.
Verwenden einer Schriftart für Symbole
Der Design-Deal dieser Woche enthält die fantastische Pictos-Schrift, die 96 minimale Symbole enthält, die sich perfekt für das Webdesign eignen. Das Tolle an dieser Schriftart ist, dass Sie nicht nur eine Druckversion erhalten, sondern auch einen Ordner mit verschiedenen Formaten, die Sie auch im Web verwenden können.
Dies bedeutet, dass wir @ font-face leicht verwenden können, um die Pictos-Schriftart in eine Website einzubetten und dann die Symbole anstelle von Bildern zu verwenden. Nur für den Fall, dass Sie ein bisschen unklar sind, wie das gemacht wird, wollte ich ein kurzes Tutorial erstellen, das Sie durch eine grundlegende Implementierung der Schriftart führt.
Auch wenn Sie CSS noch nicht kennen, sollte dies ein Kinderspiel sein. In gewisser Weise ist es tatsächlich einfacher als mit Bildern zu arbeiten! Lass uns anfangen.
Grundlegendes HTML und CSS
Als Erstes möchten Sie ein einfaches Starter-Kit mit einer HTML-Datei und einer CSS-Datei starten. Mit dem folgenden Code beginne ich normalerweise.
CSS
Für kleine Projekte wie dieses mag ich es nicht, mich mit großen Resets zu beschäftigen. Wenn Sie etwas umfangreicheres bevorzugen, fügen Sie es bitte hinzu.
Body CSS
Für den Textkörper müssen wir lediglich die Grundschriftgröße einstellen und ein Hintergrundbild anwenden. Ich wollte etwas subtiles, aber attraktives, also habe ich natürlich bei Subtle Patterns vorbeigeschaut und die "subtilen Sommersprossen" heruntergeladen. Textur. Diese Website ist erstaunlich und wird schnell zu einer der wichtigsten Stationen für schnelle Designressourcen.
Sie müssen nur die heruntergeladene Datei auf den Hintergrund anwenden und sie so einstellen, dass sie sich wiederholt.
Intro Absatz
Als erstes fügen wir der Seite einen Intro-Absatz hinzu. Wir werden uns vorstellen, dass wir eine Seite für eine Web-App namens "Anchorrr" erstellen. Fügen Sie dazu den folgenden HTML-Code ein.
Wie Sie sehen, gibt es hier nicht viel, nur einen Container mit einem div, der eine Kopfzeile und einen Absatz enthält. Lassen Sie uns dies so gestalten, dass es schön aussieht.
Intro Absatz CSS
Um diesen Abschnitt zu gestalten, wenden Sie zunächst eine Breite und einen Rand auf den Container an. Wir gebrauchen Auto Ränder, um den Behälter im Körper zu zentrieren und Überlauf versteckt um zu helfen, die Schwimmer, die wir benutzen, zu räumen.
Als nächstes wenden wir eine Breite an Intro div und schweben Sie es nach links. Ich habe ein bisschen Abkürzung für die verwendet Schriftart Eigenschaft, um die Dinge schön und prägnant zu halten. Beachten Sie, dass die Zeilenhöhe hat keine zugehörige Einheit, lesen Sie hier mehr darüber.
Wie Sie in der Vorschau oben sehen können, hatte ich tatsächlich einen Link in meiner Version, der ein bisschen mehr Styling erforderte:
Der große Anker
Als Nächstes möchten wir ein großes Bild eines Ankers hinzufügen, der sich zufällig in unserer Pictos-Schrift befindet. Als erstes müssen wir die Schrift in unser CSS einbetten, den Anker in unseren HTML-Code einfügen und ihn schließlich in CSS formatieren.
Betten Sie die Pictos-Schriftart ein
Glücklicherweise enthält die Schrift einen speziellen Ausschnitt für diese Aufgabe, so dass unsere Arbeit hier unglaublich minimal ist. Sie müssen lediglich die Schriftartendateien in Ihren Projektordner verschieben und die folgenden in Ihre CSS-Datei einfügen.
Fügen Sie den Anker in Ihren HTML-Code ein
Wie beim Einbetten der Schrift könnte das Einfügen des Zeichens nicht einfacher sein. Alles, was wir tun müssen, ist, durch die Zeichentabelle unten nach dem gewünschten Bild zu suchen und diesen Buchstaben in einen Absatz in unserem CSS einzugeben.
Wie Sie sehen, kann der Anker über das Kleinbuchstabe "a" implementiert werden. in der Schrift. So implementieren wir dies in unserem HTML-Code.
Einfach richtig? Anfangs wird es nur als Kleinbuchstabe angezeigt (a?), Also gehen wir zu unserem CSS über, um es zu stylen.
Style den Anker
Um aus unserem einfachen Buchstaben ein Symbol zu machen, müssen Sie sicherstellen, dass die Schriftart auf die zuvor eingebettete Pictos-Schriftart eingestellt ist. Da es sich tatsächlich um einen Typ handelt, mit dem wir arbeiten, können wir den Anker vertikal über die positionieren Zeilenhöhe Eigentum. Ich habe mit verschiedenen Werten herumgespielt, bis ich etwas gefunden habe, das richtig aussah.
Ich habe auch ein paar CSS3-Zauber angewendet, um den Anker schön aussehen zu lassen. Ein wenig RGBa erlaubte mir, den Anker etwas transparent und weiß zu machen Text-Schatten gibt einen Hinweis auf einen Letterpress-Effekt.
Damit sieht unser Top-Bereich ziemlich gut aus! Unser Anker ist vorhanden und funktioniert einwandfrei.
Trennlinie
Bevor wir mit dem nächsten Abschnitt beginnen, möchte ich eine klare visuelle Unterteilung mit einer durchgezogenen Linie erstellen. Da der Inhalt, den wir gerade angelegt haben, alles in einem schönen Container verpackt ist, ist dies mit einem einfachen Rand relativ einfach zu bewerkstelligen.
Wie bei dem Ankersymbol habe ich das kombiniert untere Grenze mit einem Schatten, um ihm etwas mehr Dimension zu verleihen.
Das Ergebnis ist eine einfache und effektive Trennung zwischen unseren beiden Abschnitten.
Hinzufügen der drei Spalten
Der nächste Abschnitt enthält drei Textspalten und simuliert typische Merkmale. Abschnitt auf einer Web-App-Site. Natürlich möchten wir auch einige visuelle Hinweise mit einschließen, und unsere Pictos-Schriftart ist das perfekte Werkzeug dafür.
HTML-Funktionen
Der erste Schritt hier ist die Implementierung des grundlegenden Markups für unsere drei Spalten. Wir werden drei Absätze verwenden und jeweils mit einem h3 das wird die Icons halten. Ich habe mich ein paar gute Briefe ausgesucht, die ich verwenden kann. Sie können Ihre eigenen für einen anderen Effekt auswählen.
Jede Kolonne erhält dieselbe Klasse, sodass wir sie alle zusammen gestalten können. Die letzte Spalte fügt eine zusätzliche Klasse hinzu, sodass wir die Margen leicht abschneiden können.
Features: Grundlegendes CSS
Um mit dem Feature-Abschnitt CSS zu beginnen, benötigen wir nur ein paar super grundlegende CSS-Werte wie zuvor. An diesem Punkt sollte dies alles einen Sinn ergeben.
Beachten Sie, dass ich die Pictos-Schriftart erneut implementiert habe, jedoch nur auf der h3 Stichworte.
Features: Spalten-CSS
Ich kann die Breite dieser Seite beliebig einstellen, was die Implementierung von Spalten etwas kompliziert machen kann. Rastersysteme verwenden Werte wie 960px, da sie leicht in mehrere Spaltenvarianten unterteilt werden können.
Das Erstellen eines eigenen Säulensystems im laufenden Betrieb ist jedoch ziemlich einfach. Ich habe dieses Thema in einem kürzlich erschienenen Artikel behandelt. Wir werden diese Technik unten verwenden.
Grundsätzlich beginnen wir mit 100% Breite. Wenn wir möchten, dass eine rechte Marge von 4% auf zwei der Spalten angewendet wird, bedeutet dies einen Rückgang auf 92%. Wir teilen das durch drei Spalten und erhalten ungefähr 30.66667%, was unsere Spaltenbreite ist. Dadurch werden automatisch drei Spalten über die Breite des Containers verteilt.
Wie Sie in der Vorschau unten sehen können, waren unsere Kolumnen ziemlich großartig. Jedes ist mit einem kleinen Symbol versehen, was die Seite interessanter erscheinen lässt.
Die Demo
Damit ist unsere Webseite fertig. Mit nur CSS konnten wir schöne Icons problemlos implementieren, es sind keine Bilder erforderlich! Wie Sie sich vorstellen können, kann die Verwendung dieser Technik für eine wirklich große Site eine enorme Zeitersparnis bedeuten. Der beste Teil ist, sobald Sie die Schriftart einmalig geladen haben, können Sie sofort loslegen und können problemlos auf alle darin enthaltenen Symbole zugreifen.
Live Demo: Hier klicken
Fazit
Zusammenfassend lässt sich sagen, dass die Verwendung einer bildbasierten Schriftart wie Pictos ein großer Trick für das Platzieren von Symbolen auf Ihrer Website ist, mit sehr geringem Aufwand. Verwenden Sie einfach @ font-face, um die Schriftart einzubetten, und fügen Sie die Symbole wie jeden anderen Text ein.
Wenn Sie sich für die Pictos-Schriftart interessieren, besuchen Sie die Seite mit den Angeboten. Aber schnell, unser Angebot endet am Montag, dem 25. Juli!