CSS/Tutorials/Überschriften interessant gestalten

Aus selfHTML
Zur Navigation springenZur Suche springen

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Ü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.

Anwendungsbeispiele

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.

span-Elemente mit verschiedener Schriftgröße {{#BeispielUrl:Beispiel:CSS-Überschrift-1.html}}
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.

span-Elemente mit verschiedener Schriftgröße {{#BeispielUrl:Beispiel:CSS-Überschrift-2.html}}
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]

Rotation und Spiegelungen mit transform

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

Rotation von span-Elementen {{#BeispielUrl:Beispiel:CSS-Überschrift-3.html}}
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.


Spiegelung von span-Elementen {{#BeispielUrl:Beispiel:CSS-Überschrift-4.html}}
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.

Textschatten und Hintergründe

3D-Effekt {{#BeispielUrl:Beispiel:CSS-Überschrift-5.html}}
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.

Zentriert mit Rand

Eine Überschrift kann auch durch eine Randlinie gestaltet werden, wobei eine früher übliche Unterstreichung im Internet häufig als Link missdeutet wird und daher aus der Mode gekommen ist.

Eine Umrandung der Überschrift ist mit der border-Eigenschaft möglich, stößt aber auf das Problem, das eine mittige Anordnung der Überschrift nur auf Desktop-Monitoren wirklich sinnvoll ist, während sie auf Mobilgeräten eventuell sogar über mehrere Zeilen geht. Da die Elemente h1-h6 Blockelemente sind erstrecken sie sich über die gesamte verfügbare Breite, sdoass ein Rand unter Umständen viel Leerraum umfassen würde.

Damit nur die (möglichst kurze) Überschrift umrandet wird, empfihelt sich der Einsatz eines span-Elements, das als Inline-Element zentriert werden kann und nur die benötigte Breite des Inhalts einnimmt. Eine elegantere Lösung ist die Verwendung der intrinsischen Abmessung max-content :

    {{#fornumargs:nr|name|{{#vardefine:class|}}{{#vardefine:classext|}}{{#vardefine:ext|-Extended}}
  • [[Datei:Iconset{{#var:ext}}.png|alt={{#explode:{{#var:classext|{{#var:class|leer+Leer}}}}|+|-1}}|{{#explode:{{#var:classext|{{#var:class|leer+Leer}}}}|+|-1}}]]
  • {{#vardefine:class}}{{#vardefine:classext}}}}


zentrierte Überschrift mit Rand {{#BeispielUrl:Beispiel:CSS-Überschrift-zentriert.html}}
h1 {
	border: thin solid;
	padding: 0.25em;
	margin-left: auto;
	margin-right: auto;
	max-width: -webkit-max-content;  /* für Safari */	
	max-width: -moz-max-content;     /* für Firefox */
	max-width: max-content;
	text-align: center;
}


Achtung!

Die Eigenschaft max-content ist derzeit (Stand: Dez 2019) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Siehe auch:

CSS-Texteffekte:

SVG und Text


Quellen

Weblinks