Blog

Mein Kollege Till aus der Grafik hat euch in einem seiner letzten Blogposts gezeigt wie man mit Photoshop einen Banner mit vielen Einsatzmöglichkeiten erstellt. Ich zeige euch heute wie man als Frontend-Developer diesen Banner auch einfach mit CSS3 realisieren kann.

Schauen wir uns zunächst an, wie der Banner aussehen soll. Sein fertiges Ergebnis sah damals folgendermaßen aus. Das sollte mit CSS3 realisierbar sein.

Zunächst brauchen wir entsprechende HTML-Container die wir stylen können. Das Grundgerüst sieht also folgendermaßen aus:

<div class="wrapBanner">
    <div class="containerBanner">
        <div class="itemRibbon itemLeft"></div>
        <p>joocom</p>
        <div class="itemRibbon itemRight"></div>
    </div>
</div>

Nun können wir das ganze mit CSS3 stylen. Wenn man sich den Banner genauer anschaut, wird man feststellen, das dieser aus Rechtecken und Dreiecken besteht. Dreiecke lassen sich bekanntlicherweise auch gut mit CSS realisieren. Deswegen werden die DIV-Container normal mit den Farben gestylt und bekommen zusätzlich über die Pseudoelemente :before und :after die entsprechenden Dreiecke um den Banner zu komplettieren.

.wrapBanner {
    position: relative;
    margin: 50px;
    padding: 0px;
    width: 600px;
    text-align: center;
}

.containerBanner {    
    width: 500px;
    height: 75px;
    margin-left: 50px;
    background: #27BDB4;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.containerBanner p {
    color: #FFFFFF;
    font-family: Verdana, Arial;
    font-size: 30px;
    font-weight: bold;
    line-height: 75px;
}

.containerBanner:before {
    position: absolute;
    left: 50px;
    bottom: -20px;
    width: 0;
    height: 0;
    border-top: none;
    border-right: 70px #197270 solid;
    border-bottom: 20px transparent solid;
    content: "";
}

.containerBanner:after {
    position: absolute;
    right: 50px;
    bottom: -20px;
    width: 0;
    height: 0;
    border-top: none;
    border-left: 70px #197270 solid;
    border-bottom: 20px transparent solid;
    content: "";   
}

.itemRibbon {
    position: absolute;
    width: 120px;
    height: 75px;
    background: #27BDB4;
    z-index: -2;
}

.itemRibbon.itemLeft {
    top: 20px;
    left: 0px;    
}

.itemRibbon.itemLeft:before {
    position: absolute;
    top: 0px;
    left: -29px;
    width: 0px;
    height: 0px;
    border-top: 0px transparent solid;
    border-right: 30px #27BDB4 solid;
    border-bottom: 37.5px transparent solid;
    content: "";
}

.itemRibbon.itemLeft:after {
    position: absolute;
    bottom: 0px;
    left: -29px;
    width: 0px;
    height: 0px;
    border-top: 37.5px transparent solid;
    border-right: 30px #27BDB4 solid;
    border-bottom: 0px transparent solid;
    content: "";
}

.itemRibbon.itemRight {
    top: 20px;
    right: 0px;   
}

.itemRibbon.itemRight:before {
    position: absolute;
    top: 0px;
    right: -29px;
    width: 0px;
    height: 0px;
    border-top: 0px transparent solid;
    border-left: 30px #27BDB4 solid;
    border-bottom: 37.5px transparent solid;
    content: "";    
}

.itemRibbon.itemRight:after {
    position: absolute;
    bottom: 0px;
    right: -29px;
    width: 0px;
    height: 0px;
    border-top: 37.5px transparent solid;
    border-left: 30px #27BDB4 solid;
    border-bottom: 0px transparent solid;
    content: "";   
}

Und so sieht nun die HTML-Version des Banners aus. Bis auf die weißen Linien im Banner nahezu identisch. Das Beispiel kannst Du Dir hier auch bei jsfiddle anschauen.