CSS/Anwendung und Praxis/Ribbons

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter einem Ribbon (engl. für Band) versteht man einen farbig abgesetzten Hintergrund, meist für eine Überschrift oder ein Zitat. In diesem Tutorial lernen Sie, wie Sie solche Ribbons ohne externe Hintergrundbilder nur mit Hilfe von CSS (und im letzten Beispiel mit SVG) realisieren können.

Anwendungsbeispiele[Bearbeiten]

3D-Effekt[Bearbeiten]

Beispiel: Hintergrundband mit 3D-Effekt ansehen …
main {
  box-shadow: 0 0 0.1em #666;
}

h2 {
  color: white;
  background: hsl(13, 96%, 49%) ;
  box-shadow: 0.1em 0.1em 0.1em 0 hsl(0, 0%, 50%) ;
  padding: 0.2em 0.2em 0.2em 2em;
  width: 10em;
  margin-left: -1.05em;
  position: relative;
}

h2::before {
  content: "";
  position: absolute;
  display: block;
  height: 0;
  width: 0;
  top: 1em;
  left: -0.6em;
  border-style: solid;
  border-width: 0.6em;
  border-color: transparent hsl(13, 96%, 35%) transparent transparent;
  z-index: -1;
}
Die Seite erhält einen Schatten als 3D-Effekt.

Die Überschrift wird mit einem Band hinterlegt, das um den linken Rand des Texts geknickt wird. Dieses Dreieck ist nicht im HTML-Code vorhanden, sondern wird mit dem Pseudoelement ::before erzeugt.

Das Pseudoelement erhält eine Höhe und Breite von 0, aber einen rechten Rand von 0.6em Breite. Dies erzeugt das Dreieck, das mit einem negativen z-index hinter das Band gelegt wird. Die dunklere Farbe erzeugt ebenfalls einen räumlichen Effekt.


Flaggen-Effekt[Bearbeiten]

Beispiel: Hintergrundband mit Flaggen-Effekt ansehen …
h2::after {
  content: "";
  position: absolute;
  display: block;
  height: 0;
  width: 0;
  top: -0.2em;
  right: -0.25em;
  border-style: solid;
  border-width: 1em;
  border-color: transparent white transparent transparent ;
}
Die Überschrift h2 erhält ein weiteres Pseudoelement ::after, das ein weißes Dreieck erzeugt.

Dieses wird über den rechten Rand gelegt, damit es wie ein Wimpel oder eine Flagge aussieht.

Zusätzlich wurde der Überschrift noch ein text-shadow gegeben.
Beispiel: Hintergrundband mit Flaggen-Effekt ansehen …
h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 0;
  left: -27px;
  top: 12px;
  border-width: 20px 10px;
  border-style: solid;
  border-color: red red red transparent;
  z-index: -2;
}

h2::after {
  content: "";
  position: absolute;
  display: block;
  height: 0;
  width: 0;
  top: 1em;
  left: -0.6em;
  border-style: solid;
  border-width: 0.6em;
  border-color: transparent firebrick transparent transparent;
  z-index: -1;
}
Das Pseudoelement ::before erzeugt ein 20px breites, aber 0px hohes Rechteck, dessen Form nur von den oberen, rechten und unteren Rändern erzeugt wird. Der linke Rand ist transparent und bildet deshalb das ausgeschnittene Dreieck.
Das 2. Pseudoelement ::after erzeugt das Dreieck mit dem dunkleren Schattenwurf.
Beachten Sie: Für das Elternelement h2 darf kein Wert für z-index festgelegt werden, da sonst der negative z-index für die Pseudoelemente nicht wirkt.

Sie können durch die Verwendung von Container-Elementen die Anzahl der erzeugten Pseudo-Elemente vervielfältigen. Ein sehr anschauliches, farbig illustriertes Beispiel finden Sie auf kulturbanause.de: Flexible Ribbons mit CSS [1]. Auch die im Netz verfügbaren Generatoren verwenden Wrapper- und Container-Elemente.

Pergament Rolle (mit SVG)[Bearbeiten]

Beispiel: Hintergrundband mit inline SVG-Grafik ansehen …
<h2>
<svg width="600" height="100" viewBox="0 0 600 100">
  <defs>
  <style>
    .banner {
      fill: beige;
      stroke: black;
      stroke-width: 1px;
    }
    text {
      text-anchor: middle;
      font-size: 30px;
    }
  </style>		
  </defs>  
  <path class="banner" id="aussen" d="M15,15 q65,25 130,20 l-50,10 v30 q-40,0 -80,-15 l60,-12 z m130,20 l-50,10 v10 h50z" />  
  <use  class="banner" xlink:href="#aussen" x="0" y="0" transform="translate(590,0) scale(-1,1)"/>
  <rect class="banner" x="95" y="45" width="400" height="45"/>
  <text x="300" y="80">Überschrift</text>
</svg>
</h2>
In diesem Beispiel wird innerhalb der h2-Überschrift ein svg-Element platziert. Das Banner besteht aus einem path-Element, dass anschließend mit use noch einmal gespiegelt dargestellt wird. Der Hintergund wird mit einem rect-Element gezeichnet, über das dann die Überschrift als Text platziert wird.


Stile und Farben werden innerhalb des svg-Elements in einem style-Bereich zusammengefasst.

Quellen[Bearbeiten]

  1. * kulturbanause.de: Flexible Ribbons mit CSS

Weblinks[Bearbeiten]

Generatoren:


Beispiele: