Alle neueren Eigenschaften, die sich aus den CSS3-Spezifikationen ergeben, waren bei der Konstruktion fortschrittlicherer UI-Designs äußerst hilfreich. Die Webseiten haben eine dramatische Überarbeitung der Methoden erfahren, mit denen typische Layoutstile erstellt werden. Insbesondere die Typografie und die Schaltflächen- / Formularelemente werden am stärksten überarbeitet - und da mehr Entwickler Open-Source-Projekte starten, scheint kein Ende in Sicht.
In diesem Tutorial möchte ich Ihnen zeigen, wie wir einige Beispielüberschriften in eine grundlegende Webseite integrieren können. Ich verwende hauptsächlich CSS3-Effekte in der oberen Navigationsleiste zusammen mit der Typografie auf der Seite. Alle diese Techniken sollten in die neueren, standardkonformen Webbrowser übernommen werden. Außerdem gibt es so viele verschiedene Designtechniken, die Sie kopieren und in jedem Projekt anwenden können. Überzeugen Sie sich selbst und sehen Sie sich meine Live-Demo an, um eine Vorstellung davon zu bekommen, was wir zu bauen versuchen!
Live Demo - Quellcode herunterladen
Fertig machen
Ich erstelle eine einfache index.html-Webseite mit dem HTML5-Doctype. Wir brauchen nur ein paar Ressourcen für das Styling, nämlich ein einzigartiges Stylesheet styles.css zusammen mit einigen Google-Webfonts. Viele Leute gehen davon aus, dass diese Ressourcen Ihre Seitenladegeschwindigkeit verlangsamen, und während wir einige Dokumente über HTTP anfordern, sollte die Verbindung über eine gute Verbindung nicht mehr als ein paar hundert Millisekunden dauern.
Jetzt werden die Seitenüberschrift und der Inhalt der Inhalte mithilfe eines Containerklassensystems aufgeteilt. Die Navigationsleiste sollte 100% der Seitenbreite umfassen, der innere Inhalt liegt jedoch bei 1050 Pixeln. Dadurch bleiben alle Inhalte auf der Seite zentriert, unabhängig von der Bildschirmauflösung. Wir behalten den Header in einem HTML5 nav Element für mehr semantische Stile.
Es sollte darauf hingewiesen werden, wie der Überschriftentext im HTML-Code zuerst angezeigt wird, obwohl er auf der rechten Seite der Navigation angezeigt wird. Obwohl wir das so formatieren könnten, als würde die Überschrift kommen nach dem In der Navigation müssen Suchmaschinen-Crawler sicherstellen, dass der Seitentitel an erster Stelle steht, sodass er auf der Seite höher eingestuft wird. Wenn das Fenster kleiner wird, werden die Navigationslinks unter der Überschrift angezeigt, sodass die Überschriften reagieren und die Überschrift in der Hierarchie an erster Stelle stehen sollte.
Die inneren Listenelementverknüpfungen werden mit dem Text durch einen Text getrennt em Etikett. Diese kleineren Unterüberschriften sind schöne Effekte für eine Navigation, wenn genügend Platz vorhanden ist. Sie können Besuchern ein zusätzliches Gefühl dafür vermitteln, was auf jeder Seite zu sehen ist, ohne übermäßig konfrontativ zu wirken.
Innerer Körperinhalt
Ich habe nicht viele neue Inhalte in den Körper eingefügt, seit wir uns auf Typografie konzentrieren. Es gibt jedoch 3 verschiedene Überschriftenstile, die nach Wichtigkeit von h1-h3 nach oben drücken. Einige Designer können bei Bedarf auch h4 und sogar h5 verwenden. Bei Copyfitting-Typografie geht es darum, die Inhalte auf der Seite eng zusammenzufügen. Es geht darum, Ihre geschriebenen Wörter zu planen und andere Medien (Bild, Video usw.) in diesen Kontext einzupassen.
Ich denke, einer der coolsten Effekte, die Sie hinzufügen können, ist ein Pull-Quote- oder Blockquote-Design. Beachten Sie, dass dies zwei sehr unterschiedliche Ideen sind und sehr unterschiedlichen Zwecken dienen. In unserem Demo-Beispiel verwende ich die CSS-Tricks-Anführungszeichenstile, um zu demonstrieren, wie Inhalte aus Bereichen der Seite dupliziert werden können. Diese sehen in Blogbeiträgen oder Artikeln im Internet, in denen Sie bestimmte Sätze oder Sätze hervorheben möchten, hervorragend aus.
Blockquotes sind ein weiterer interessanter Designmechanismus, der auf fast jeder Seite gut aussehen kann. Diese beziehen sich nicht auf den Inhalt des Beitrags, sondern zitieren normalerweise einen anderen. Die Zitate können von früheren Kunden, Kollegen oder wirklich jemandem stammen, um ehrlich zu sein. Codrops hat kürzlich einen Artikel zum Erstellen moderner Blockzitate veröffentlicht, der eine Reihe großartiger Ideen für Webdesigner enthält.
Manövrieren mit CSS3
Das HTML-Markup ist sehr standardisiert und typisch für das, was Sie auf einer Webseite erwarten würden. Die komplexeren Interessenbereiche befinden sich im CSS-Stylesheet, in dem Sie Übergangseffekte und zahlreiche andere großartige CSS3-Eigenschaften anwenden können. Wir sollten zunächst einen Blick auf die Dokumentseitenstruktur werfen.
Das .Verpackung Klasse sollte auf jeden Behälter in einem anderen Behälter geliefert werden. So vergrößert unsere Navigationsleiste beispielsweise die gesamte Breite der Seite, aber der gesamte Inhalt ist in einem Wrapper-Div enthalten. Der äußere #topnav Container verwendet eine Reihe von CSS3-Eigenschaften, die mit dem Farbwähler rgba () gekoppelt sind. Dies gilt speziell für Webentwickler, die Alpha-Transparenz in Farbtönen verwenden möchten.
Wir können diesen Effekt nicht nur im Hintergrund sehen, sondern auch im Schatten der Box. Dieser Effekt funktioniert gut, wenn Sie eine feste statische Navigation verwenden, die die Seite nach unten scrollt und dem Besucher folgt.
Der Seitenkopf verwendet eine Reihe animierter Eigenschaften, wenn Sie den Mauszeiger über den Anker-Link bewegen. Dies gilt auch für die vielen Navigationselemente, die ebenfalls Alpha-Transparenz verwenden. Einige ältere Browser unterstützen die typischen Herstellerpräfixstile nicht, es gibt jedoch Lösungen für alle Browser.
Der Kopfstil passt so gut, weil wir die Navigationsleiste auf eine festgelegte Höhe fixieren können und dann die Zeilenhöhe Eigenschaft zum vertikalen Platzieren von Text. In diesem Szenario schwebt also unser Seitenlogo immer in der Mitte, auch wenn wir das Browserfenster verkleinern. Sobald die Navigation herunterfällt, ändern wir die Höhe der Linie, sodass alles entsprechend passt. CSS3-Animationseffekte bieten dem Benutzer lediglich ein angenehmeres Frontend-Erlebnis.
Responsive Trends
Ein Großteil der Body-Inhalte kann bereits mit Inhalten umgehen, die auf Mobilgeräte reagieren. In den letzten Jahren wurden zahlreiche Artikel über responsives Webdesign geschrieben. Das Anpassen Ihrer Typografie für Desktop- und mobile Plattformen ist möglicherweise eine der besten Ideen, denen Sie folgen könnten. Auf diese Weise kann jeder von jedem Gerät mit Internetzugang auf Ihre Informationen zugreifen.
Beachten Sie, wie ich Übergangseffekte sowohl für die Listenelemente als auch für die Ankerlinks eingefügt habe. Außerdem wählen wir alle Eigenschaften aus, die sich im Laufe der Zeit animieren sollen, was wirklich nicht notwendig ist, aber fantastisch aussieht. Wenn das Navi unter die Kopfzeile fällt, werden alle Ränder und Zeilenabstände mithilfe von animierten Übergängen neu angepasst. Diese Effekte werden natürlich nur Besuchern angezeigt, die moderne Webbrowser verwenden, die CSS3-Übergänge unterstützen. Aber es lohnt sich in Bezug auf eine erfolgreiche Benutzererfahrung.
Ich habe tatsächlich zwei verschiedene Medienabfragen eingerichtet, wenn der Bildschirm auf zwei verschiedene Bereiche trifft. Erst wenn wir etwas unter 800px fallen, entfernen die Navigationslinks einige ihrer Ränder. Dadurch werden die Links enger zusammengezogen, wodurch Platz gespart wird und sie nicht zu schnell fallen. Nachdem wir unter 700px gegangen sind, wechselt das Navi unterhalb der Kopfzeile und wir passen uns an die neuen Werte für die Zeilenhöhe an.
Dieses responsive Design kann auf verschiedene Arten gehandhabt werden. Sie können die Nav-Links einfach ausblenden und für Mobilbenutzer an einen Toggle-Link gebunden halten. Ich halte diese Methode für besser, um alle typografischen Stile beizubehalten, ohne die Benutzerfreundlichkeit zu beeinträchtigen. Der gesamte Überschriftenbereich ist für eine einzigartige, angepasste Typografie reif und wird sicherlich einen Blickpunkt für die Benutzer darstellen.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Ich hoffe, dass dieses Tutorial einen tieferen Einblick in die Gestaltung von Webseiten mit CSS3 bietet. Typografie ist nach wie vor die wichtigste Facette eines Layouts. Das Internet ermöglicht es Menschen, in sehr kurzer Zeit digitale Informationen auf der ganzen Welt zu senden. Webdesigner erledigen die Arbeit von Boten und Kurieren mit etwas ansprechenderer Ästhetik.
Wenn Ihnen die Demo-Seite gefällt, können Sie auch eine Kopie meines Quellcodes herunterladen. Sie dürfen diesen Code ohne Lizenz als gemeinfrei verwenden. Sie können diese Stile für jedes kommerzielle oder sonstige Projekt bearbeiten und kopieren. Wenn Sie online mehr Ressourcen hinzufügen, können neuere Designer nur noch einen Schritt weiter gehen. Wenn Sie Fragen oder Anmerkungen haben, teilen Sie uns dies bitte im Post-Diskussionsbereich mit.