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

Es gehört zu den Standard-Disziplinen eines Webdesigners den Übergang zwischen verschiedenen Seitenbereichen attraktiv zu gestalten. Ein häufig gesehenes Stil-Element ist dabei die Zick-Zack-Linie, die insbesondere im Retro-Look und in Verbindung mit Ribbons gerne eingesetzt wird. Normalerweise wird dafür ein grafisches Pattern gestaltet und horizontal gekachelt, doch es geht auch mit CSS3.

Schulungen von kulturbanause

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

Zick-Zack-Linie: Photoshop vs. CSS3

In vielen Bereichen ersetzt CSS3 die Arbeit mit Photoshop. Doch es gibt immer Vor- und Nachteile, die es abzuwägen gilt.

  • Schnellere Umsetzung
  • Performanter, da keine Grafik geladen werden muss
  • Optisch nicht so detailliert wie eine Lösung mit Hilfe einer Grafik
  • Wird nur in modernen Browsern angezeigt. Alte Browser zeigen einen geraden Übergang.

Live-Demo

Die nachfolgende Abbildung ist ein Live-Beispiel. Wenn ihr keine Zick-Zack-Linie seht, unterstützt euer Browser keine CSS3 Gradients und/oder background-size.

Demo öffnen

HTML/CSS3-Code

Mit folgendem Code lässt sich der Übergang realisieren. In HTML wird nur ein Container-Element benötigt.


<div id="demo"></div>

In CSS arbeiten wir hauptsächlich mit dem Pseudoelement :before.


body {
	background: #b29e7f;
	margin: 0;
}

#demo {
	width: 100%;
	height: 150px;
	position: relative;
	background: #045B76;
}

#demo::before {
	content: '';
	position: absolute;
	bottom: -30px;
	left: 0;
	right: 0;
	height: 60px;
	background-size: 24px 48px;
	background-repeat: repeat-x;
	background-image: -webkit-linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), -webkit-linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
	background-image: -moz-linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), -moz-linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
	background-image: linear-gradient(45deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%), linear-gradient(315deg, transparent 34%, #045B76 34%, #045B76 66%, transparent 66%);
}

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 – 12 Kommentare

  1. Jascha
    schrieb am 09.03.2016 um 20:21 Uhr:

    Kann ich den Effekt bei einem Div-Container auch oben und unten anwenden ?

    Antworten
  2. Alexander
    schrieb am 11.10.2013 um 10:30 Uhr:

    servus miteinand,

    Danke für diese Erläuterung, und dem Beispiel Code. Da ich gerade an einem Projekt arbeite, wo der Hintergrund eine Pinnwand ist, kommt dieser Code super an.

    Ich habe eine Frage dazu.
    Wie bekomme ich das umgekehrt hin (dass die Zacken oben sind)? Beiße mir gerade die Zähne dran aus. Ich habe den Code in der php Datei doppelt eingefügt. Aber statt demo habe ich es „oben“ umbenannt.

    Gruß Alexander

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 11.10.2013 um 10:43 Uhr:

      Hallo Alexander, der Effekt basiert auf einem linearen CSS-Farbverlauf. Drehe hier einfach die Winkel.

      Antworten
      • Alexander
        schrieb am 11.10.2013 um 11:29 Uhr:

        servus Jonas,

        Danke für die schnelle Antwort. Ich habe unterdessen das etwas anders gelösst.Statt diesen code

        #oben {
        width: 100%;
        height: 150px;
        position: relative;
        background: #045B76;
        }

        habe ich diesen genommen.

        #oben {
        width: 100%;
        height: 20px;
        position: relative;
        background: rgb(4, 91, 118);
        margin-top: -20px;
        margin-bottom: 20px;
        }

        Jetzt nur noch die Farben ändern und alles sollte perfekt sein.

        Ja, alles OK :D

        Gruß Alexander

  3. gezackter Übergang zickzack Hintergrund mit css3 | CSS3.de
    schrieb am 28.07.2013 um 22:19 Uhr:

    […] der Farben sollten dabei gezackt sein. Eine Lösung hierfür hatte ich schon einmal beim Kulturbanausen mit linear-gradient gesehen. Hier die Umsetzung: #css3gezackt { /* body */ text-align: center; […]

    Antworten
  4. Max
    schrieb am 17.06.2013 um 12:52 Uhr:

    Muss es nicht heißen #demo:before?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 17.06.2013 um 13:12 Uhr:

      Beide Schreibweisen funktionieren und sind korrekt.

      Antworten
  5. Felix
    schrieb am 31.10.2012 um 20:55 Uhr:

    Super Tipp! So etwas kann man gebrauchen. Vielen Dank!
    Sind die beiden Seiten in der CSS mit -webkit und -moz wirklich erforderlich?

    Antworten
  6. Nico
    schrieb am 30.10.2012 um 19:15 Uhr:

    Ist ja cool^^ Danke für den Hinweis :)

    Antworten
  7. Linktipp: Zick-Zack-Linien mit CSS3 | pixelstrol.ch
    schrieb am 30.10.2012 um 10:13 Uhr:

    […] Zick-Zack-Linien mit CSS3 […]

    Antworten
  8. Stefan
    schrieb am 30.10.2012 um 09:36 Uhr:

    Genialer Tipp, sowas habe ich mich schon öfters gefragt wie ich solche Zick-Zack-Muster erstellen kann, mit einfachen Mitteln und vor allem so das ich als Laie das auch hinbekomme. :)

    Danke dafür, wird dann zu gegebener Zeit ReBloggt. :D

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 30.10.2012 um 09:44 Uhr:

      Hallo Stefan, vielen Dank für dein Feedback und den Hinweis auf den Rechtschreibfehler :) Ist alles korrigiert.

      Antworten

Kommentar zu dieser Seite

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.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

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 →