CSS/Anwendung und Praxis/Überschriften interessant gestalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Überschriften sind nicht nur kurze Beschreibungen eines Texts oder einer Webseite, sondern dienen auch als Blickfang und Anreiz zum Weiterlesen.[1] In diesem Artikel sehen Sie Anwendungsbeispiele, wie Sie Überschriften interessant gestalten können.

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Spielen mit der Schrift-Größe

Sie können ihre Überschriften durch die Einfügung von span-Elementen aufteilen und so per CSS unterschiedliche Stilvorgaben festlegen.

Beispiel: span-Elemente mit verschiedener Schriftgröße ansehen …
h2 {
  font-family: Garamond, serif;
  font-weight: normal;
  margin-bottom: 4em;
  text-align: center;
}
 
#eins {
  font-size: 350%;
}
 
#zwei {
  font-size: 540%;
}

Üblicherweise sind Überschriften fett und evtl. unterstrichen - hier wurde das Schriftgewicht auf normal gestellt und die Überschrift nur durch die Übergröße von 350%, bzw. 540% kenntlich gemacht. Die beiden Zeilen haben durch die unterschiedliche Schriftgröße die gleiche Breite.

Beispiel: span-Elemente mit verschiedener Schriftgröße ansehen …
h2 {
  position: relative;	
  font-size: 150%;
  font-family: Georgia, 'Comic Sans', serif;
  font-weight: normal;
  margin-bottom: 10em;
}
 
h2 span {
  position: absolute;
}
 
#eins {
  color: red ;
  font-size: 400%;
  top: 0em;
  left: 0;
}
 
#zwei {
  font-size: 800%;
  top: -0.1em;
  left: 1.5em;  
}
 
#drei {
  font-size: 400%;	
  color: blue;
  top: 0em;
  left: 4.5em;   
}
 
#vier {
  font-size: 200%;		
  top: 2em;
  left: 9em;   
}

Hier wurden die span-Elemente absolut positioniert; zur optischen Abhebung erhielt das Ampersand-Zeichen (&) eine Schriftgröße von 800%. Diese Idee und viele weitere Eindrücke finden Sie in diesem Artikel des Smashing Magazine. [2]

[Bearbeiten] Rotation und Spiegelungen mit transform

Die CSS-Eigenschaft transform ermöglicht es, Überschriften beliebig zu strecken, zu rotieren oder einzelne Teile zu verschieben.

Beispiel: Rotation von span-Elementen ansehen …
h2 {
  font-size: 300%;
  text-transform: uppercase;
  font-family: Georgia, serif;
  transform: scale(1,2);
}
 
#eins {
  color: red; 
  display: inline-block;
  transform: translate(0.1em,0.6em) rotate(100deg) scale(1,2);
  width: 2em;
  height: 1em;
  margin: 0;
  padding: 0;
  text-shadow: 1px 1px black;
}

In diesem Beispiel wurde die Höhe der Schrift durch transform: scale(1,2) verdoppelt. Die beiden 'O's sind innerhalb von span-Elementen, um sie per CSS ansprechen zu können. Sie werden ebenso gestreckt wie die anderen Buchstaben, dann aber mit transform:rotate() um 100 Grad gedreht und anschließend an die richtige Stelle verschoben. Dies funktioniert nur, wenn Sie dem span-Element anstelle des Standardwerts inline ein display: inline-block; zuweisen.

Das span-Element bekommt dann noch eine rote Textfarbe und zur Abhebung einen Textschatten.


Beispiel: Spiegelung von span-Elementen ansehen …
h2 {
  font-size: 300%;
  text-transform: uppercase;
  font-family: Georgia, serif;
  text-align: center;
  transform: scale(1,2);
}
 
span {
  color: red; 
  display: inline-block;
  transform: scale(-1, -1);
}

Sie können die Eigenschaft transform: scale() auch für eine Spiegelung verwenden, wenn Sie eine Achse mit dem Wert -1 skalieren.

[Bearbeiten] Textschatten und Hintergründe

Beispiel: 3D-Effekt ansehen …
main {
  display: block;     /* für IE */	
  background: linear-gradient( #003471, #448CCB 30%);
  width: 80%;
  height:500px;
  margin: 10px auto;
}
 
h2 {
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 5em; line-height: 0.5em;
  margin: 0.3em 0.3em 1em 0.3em;
  color: #5c82d9;
  text-shadow: 
    rgba(0,0,0,0.5) -1px 0, 
	rgba(0,0,0,0.3) 0 -1px, 
	rgba(255,255,255,0.5) 2px 2px, 
	rgba(0,0,0,0.3) -1px -2px;
}

In diesem Beispiel erhält die Überschrift durch einen Textschatten einen leichten 3D-Effekt. Der aus dem Dunklen ins Helle verlaufende Hintergrund verstärkt diesen Eindruck.

Beachten Sie, dass die Farben und Kontraste des Textes trotz der dunklen Hintergrundfarbe noch lesbar bleiben.

[Bearbeiten] Siehe auch:

CSS-Texteffekte:

SVG und Text


[Bearbeiten] Quellen

  1. Wikipedia: Überschrift
  2. smashing magazine: Benton Modern, A Case Study On Art-Directed Responsive Web Typography vom 27.05.2015

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML