kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Flexible Ribbons mit CSS

Zuletzt aktualisiert am 8 Kommentare , ,

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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:

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

8 Kommentare

  1. Sebastian

    Verfasst am 8. Januar 2013 um 14:20 Uhr.

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

    Antworten
  2. Sebastian

    Verfasst am 9. Januar 2013 um 10:50 Uhr.

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

    Antworten
  3. MundoSelecto

    Verfasst am 17. Januar 2013 um 11:04 Uhr.

    Danke für den Tipp!

    Antworten
  4. Viktoria

    Verfasst am 20. Februar 2013 um 9: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
  5. Tarek

    Verfasst am 9. März 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
  6. Kai

    Verfasst am 23. Oktober 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.