Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Ribbons sind im Web ein sehr beliebtes Gestaltungselement und die Umsetzung mit CSS hat einige Vorteile. Einerseits eignet sich die CSS-Grafik für den Einsatz auf hochauflösenden Displays (HiDPI, Retina), andererseits kann dem Ribbon eine flexible Breite in Prozent zugewiesen werden. Das Zielelement kann somit im Responsive Webdesign verwendet werden und passt sich flexibel der Displaybreite an.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

CSS-Umsetzung des Ribbon

Mit folgendem HTML/CSS-Code wird der Ribbon hergestellt. Ich habe die drei Bestandteile des Elements in Rot, Grün und Blau eingefärbt, damit ihr schneller erkennt welcher Codeabschnitt welchen Effekt erzeugt.

Grundstruktur des Ribbons
Grundstruktur des Ribbons

HTML-Code

Der HTML-Code ist sehr übersichtlich. Text kann innerhalb von ribbon-fold eingefügt werden.


<div class="ribbon">
  <div class="ribbon-fold"></div>
</div>

CSS-Code

Der CSS-Code sieht so aus:


.ribbon {
  width: 450px;
  position: relative;
  background:red;
  height: 80px;
  margin:50px auto;
}

.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -25px;
  border: 40px solid green;
  z-index: -1;
}

.ribbon::before {
  left: -75px;
  border-right-width: 60px;
  border-left-color: transparent;
}

.ribbon::after {
  right: -75px;
  border-left-width: 60px;
  border-right-color: transparent;
}

.ribbon .ribbon-fold:before, 
.ribbon .ribbon-fold:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: blue transparent transparent transparent;
  bottom: -25px;
}

.ribbon .ribbon-fold:before {
  left: 0;
  border-width: 25px 0 0 25px;
}

.ribbon .ribbon-fold:after {
  right: 0;
  border-width: 25px 25px 0 0;
}

Live-Beispiel anzeigen

Gestaltete Variante

Mit Text, harmonischen Farben und einem leichten Verlauf im Vordergrund, sieht es doch gleich noch besser aus.

Ausgearbeitete Version des Elements mit Text und Farbverläufen
Ausgearbeitete Version des Elements mit Text und Farbverläufen

Live-Beispiel anzeigen

Links / Quellen:

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 8 Kommentare

  1. Kai
    schrieb am 23.10.2013 um 15:57 Uhr:

    Hey Jonas,

    der Link zum generator ist leider nicht mehr aktuell.
    http://www.css3d.net/ribbon-generator/

    Müsstest du auch vielleicht in Deiner Sammlung http://best-web-design-tools.com/resources/3d-ribbon-generator/ auch anpassen :9

    Liebe Grüße

    Kai

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 25.10.2013 um 13:44 Uhr:

      Vielen Dank für den Hinweis.

      Antworten
  2. Tarek
    schrieb am 09.03.2013 um 22:07 Uhr:

    Hallo,

    Weiß hier jmd. wie man solche Ribbons mit runden Ecken macht ? Also so wie in dieser Website :
    http://from-the-couch.com

    Die verwenden natürlich Bilder aber ich würde das ganze gerne nur mit CSS umsetzen habe aber bisher noch keine Tutorials finden können und auch schon versucht ähnliches in google zu finden. Alles aber bisher ohne Erfolg.

    Wäre super wenn mir jmd. sagen könnte ob das überhaupt nur mit CSS umsetzbar ist.
    Danke im Voraus

    Antworten
  3. Viktoria
    schrieb am 20.02.2013 um 09:06 Uhr:

    Vielen Dank für den Tipp. Ich habe gerade ausprobiert und festgestellt, dass der Ribbon in IE8 (und vermutlich in IE9) nicht funktioniert.

    Weiß jemand, was ich machen kann, damit :after und :before auch in IE8 und höher funktionieren können?

    Vielen Dank im Voraus

    Antworten
  4. MundoSelecto
    schrieb am 17.01.2013 um 11:04 Uhr:

    Danke für den Tipp!

    Antworten
  5. Sebastian
    schrieb am 09.01.2013 um 10:50 Uhr:

    Cooler Tipp. Auch wenn ich es grad nicht brauche, wird aber mal abgespeichert :)

    Antworten
  6. Sebastian
    schrieb am 08.01.2013 um 14:20 Uhr:

    Sehr interessanter Artikel und so simpel, danke dafür. Werde ich demnächst mal ausprobieren.

    Antworten

Schreibe einen Kommentar zu MundoSelecto Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →