Websites sind zu einem Medium geworden, um Informationen mit der ganzen Welt auszutauschen. Dies hat sich geändert, um Medien wie Fotos und Videos einzubeziehen. Text auf einer Webseite ist jedoch immer noch die vorherrschende Wahl für das Web-Publishing. Dies würde bedeuten, dass die Strukturierung von Absätzen, Sätzen und Text auf der Seite einen großen Einfluss darauf haben kann, ob ein Besucher beschließt, zu lesen und zu lesen, was er zu sagen hat.
In diesem Tutorial möchte ich ein paar CSS-Tipps zum Erstellen von kreativen Absatz- oder Textentwürfen geben. Lesbarkeit und Schriftartauswahl hängen oft direkt mit dem Design selbst zusammen. Das Einfügen von Texteffekten wie Drop Caps, Hervorhebungen und erkennbare Hyperlinks unterscheidet sich jedoch von anderen Inhalten der Seite. Werfen Sie einen Blick auf meine Live-Demo, um zu sehen, was wir zu bauen versuchen.
Live Demo - Quellcode herunterladen
Allgemeine Seite einrichten
Ich habe einen typischen HTML5-Doctype zusammen mit einem festen Center-Inhaltsbereich erstellt. Die Absatzstile sollen zusammen mit anderen Seitenelementen angezeigt werden, z. B. einer Benachrichtigungsbox oder einer Blockquote. Sie können viel schriftlich sagen, ohne sekundäre Header auf der Seite zu verwenden.
Mein Stylesheet ist ziemlich einfach mit einer Reihe von CSS-Resets und deren Positionierung. Jedes Absatzelement ist mit einem zusätzlichen Rand am unteren Rand mit Ems versehen. Sie können auch sehen, wie ich das h1-Tag mit horizontalen Rändern erstellt habe, die gleichmäßig in der Mitte positioniert sind.
Ich habe mich für "Helvetica Neue" entschieden. als primäre Schrift über die gesamte Seite. Dies ist eine serifenlose Alternative zu Helvetica, sollte jedoch die Auswahlmöglichkeiten für bestimmte Seitenelemente nicht einschränken.
Bevor wir uns mit den Effekten befassen, lohnt es sich, das HTML zu überdenken. Schauen Sie sich einige der Klassennamen und die verschiedenen Elemente an, die ich in den einzelnen Abschnitten für unterschiedliche Zwecke verwendet habe.
Absatz Drop Caps
Das erste, was Sie wahrscheinlich bemerken werden, ist der große Brief, der im ersten Absatz abgelegt wurde. Dieses Absatzelement verwendet eine Klasse von .zuerst die direkt an den Drop-Cap-Effekt gebunden ist. Schriftsteller beziehen dieses Kapital oft in Büchern und Druckwerken ein - aber es ist auch für Artikel im Web von Vorteil.
Sie werden feststellen, dass auf diesen abgespeckten Kapitaleffekt zwei Selektoren angewendet werden. CSS hat eine Pseudo-Klasse :erster Brief die den ersten Buchstaben in einem Element anvisiert. Beachten Sie, dass dies nicht funktioniert, wenn Ihr Absatz ein anderes Element vor dem Text enthält (z. B. ein Miniaturbild). Wenn Sie ein Bild im Absatz-Absatz benötigen, verwenden Sie anstelle des HTML-Tags img einen CSS-Hintergrund :erster Brief Selector können wir die Drop-Cap mit der Klasse auf jeden Absatz anwenden .zuerst.
Aber mit einer anderen Klasse .dropcap Wir könnten den Effekt anwenden, indem wir den Buchstaben gezielt in ein Spannelement einwickeln. Dies würde als erscheinen L im HTML-Dokument. Für CMS-Engines wie WordPress ist es am einfachsten, ein Design zu erstellen, das das unterstützt .zuerst Klasse, die an jeden ersten Absatz Ihrer Beiträge oder Seiten angehängt wird (oder beides).
Ich habe auch einen alternativen Drop-Cap-Effekt entworfen, der einen dunkleren Hintergrund um den Buchstaben selbst erzeugt. Beachten Sie, dass diese alternative Zeichenkappe die Helvetica Neue-Familie verwendet, während die ursprüngliche Zeichenkappe in Georgia oder eine andere Serifenschriftart geändert wird. Dies nimmt den Dialekt, den wir oft in gedruckten Büchern finden, auf den digitalen Bildschirm.
Im zweiten Absatz der Seite wird nun eine Klasse von verwendet .größer Dies erhöht einfach die Schriftgröße und Zeilenhöhe des gesamten Absatzes. Einige Websites ziehen es vor, den ersten Absatz zu vergrößern, um sich vom Rest der Seite zu unterscheiden. Sie können auch versuchen, die Großbuchstaben mit einem größeren Text zu kombinieren, um die Aufmerksamkeit der Menschen zu erregen.
Interne Zitate
Artikel, die Zitate einer anderen Person enthalten, verwenden häufig Blockzitate und ähnliche Elemente. Pull-Anführungszeichen unterscheiden sich geringfügig, da sie Text direkt aus dem Artikel selbst verwenden. Dies wird häufig gemacht, um einen Punkt oder eine Phrase hervorzuheben, der für das übergeordnete Thema des Inhalts von entscheidender Bedeutung ist.
Mein Pull-Zitat-Design ist dem, was Sie hier bei Design Shack finden, sehr ähnlich. Es verwendet einen etwas dunkleren Hintergrund sowie CSS3-Box-Schatten, um schicker zu wirken. Der interne Anführungszeichen-Text ist auch größer, um sich von den vielen anderen Absätzen zu unterscheiden. Es ist wichtig, diese Pull-Anführungszeichen auf die linke oder rechte Seite der Seite zu verschieben, damit sie nicht als reguläre Block-Anführungszeichen angezeigt werden.
Bei Verwendung des HTML5-Blockquote-Elements können oft andere interne Elemente eingefügt werden. Einige Blockquotes enthalten mehrere Absätze und sogar ein Zitat für das Zitat. Der Designstil verwendet viel Polsterung und Ränder, um Platz zwischen den regulären Absätzen zu schaffen. Der linke Rand ist wie eine Markierung, mit der Leser sofort erkennen können, dass sich die Blockquote von den anderen umgebenden Absätzen unterscheidet.
Anpassen von Symbolen
Obwohl dies ein winziger Spezialeffekt ist, werden Besucher beim Durchlesen von Inhaltsseiten auffallen. HTML-Entitäten werden verwendet, um Symbole in Ihrem Text anzuzeigen. Diese Entitäten könnten beispielsweise mit Font Awesome angepasste Symbole anzeigen oder Sie können typische HTML-Symbole anzeigen.
In meinem Beispiel habe ich das kaufmännische Und-Zeichen mit einem Element für die Umbruchspanne erstellt. Dadurch wird die Schriftfamilie in Gabriela geändert, die mehr Serifenbild verwendet. Ein generisches Spanelement mit der Klasse .fancyamp kann diese Schriftfamilie auf die Entität anwenden, ohne den anderen Text zu beeinflussen. Ich habe es auch etwas größer gestaltet, damit ich mich von den umliegenden Buchstaben abheben kann.
Aber denken Sie nicht, dass dieser Effekt nur für Et-Zeichen verwendet werden kann. Copyright-Symbole, Fraktionen und andere HTML-Objekte können von diesem stilisierten Design profitieren. Sie können sogar andere Texteffekte in Betracht ziehen, beispielsweise kursive Fettdrucke oder das Aktualisieren der Textfarbe.
Links und hervorgehobene Töne
In den ersten Absätzen finden Sie hervorgehobenen Text und einen schlauen Anker-Link. Beide haben einige zusätzliche Polsterungen, da beide Hintergrundfarben verwenden.
Für die Anker-Links habe ich eine grüne Farbpalette gewählt, obwohl Sie mit jeder beliebigen Farbmischung arbeiten können, die am besten zu Ihrem Layout passt. Der hinzugefügte Hintergrundeffekt beim Schweben der einzelnen Links hilft Besuchern sofort zu erkennen, sobald sie sich auf etwas befinden. Der Linktext wird dunkler, sodass er sich vom hellgrünen Hintergrund abhebt.
Da ich die linke und rechte Seite mit Padding versehen habe, werden die negativen Ränder verwendet, um seltsamen Leerzeichen entgegenzuwirken, wenn Sie die einzelnen Links auf und ab bewegen. Es gibt auch Polsterung auf der .Markieren Klasse aber da braucht man keine :schweben Design ist der zusätzliche Platz nie wirklich wahrnehmbar.
Wenn ein hervorgehobener Texteffekt nicht ausreicht, können Sie immer sekundäre Klassen für Absatzbenachrichtigungen erstellen. Meine Klasse .beachten Ändert die Textfarbe drastisch, um sie an den helleren Gelbton im Hintergrund anzupassen. CSS3 verwenden Text-Schatten Eigenschaft hilft bei der Lesbarkeit. Sie können auch Klassen für Hinweisboxen in anderen Farbschemata wie Grün oder Blau erstellen.
Live Demo - Quellcode herunterladen
Schließen
Ich würde nicht empfehlen, all diese Effekte auf jeder Seite Ihrer Website zu integrieren. Es ist jedoch ratsam, diese Stile im Voraus zu planen und alles zu testen, bevor Sie Ihrem Stylesheet Code hinzufügen.
Besucher sind so an traditionelle Effekte gewöhnt, dass Sie mit diesen Untertönen ein Publikum wirklich fesseln können. Fühlen Sie sich frei, eine Kopie meines Tutorial-Codes herunterzuladen und zu sehen, welche anderen Ideen Sie zu diesen Absatzeffekten hinzufügen können.