Equal Height Columns mit CSS3 Gradient

0 | 6391 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Equal Height Columns mit CSS3 Gradient" mit Ihrem Wissen!

Anzeige Hier werben

Sollten bisher die Hintergrundfarben in einem mehrspaltigen Seitenlayout die gleiche Höhe, unabhängig vom Inhalt simulieren, musste man zu kleinen Tricks greiffen.

Bei zweispaltigen Websites, aufgeteilt in zum Beispiel content und sidebar, kommt dafür bisher zum Beispiel die Faux Columns Technik in Frage bei der der Hintergrund als Bild in die Seite eingefügt wird.

Viel einfacher und stringenter lässt dich das Problem mit CSS3 gradient lösen.

Zur Erklärung werden wir hier eine dreispaltige Website erstellen. Die jeweiligen Spalten werden durch unterschiedliche Farben hervorgehoben. Ziel ist es, das sich die Hintergrundfarbe aller drei Spalten immer der längsten Spalte anpasst.
Im Beispielbild wurden den Containeren gepunktete Linien verpasst um ihre eigentliche Größe anzuzeigen.

Der HTML-Code für das Beispiel ist möglichst kurz gehalten:

Bild zu Equal Height Columns mit CSS3 Gradient
Beispiel 1
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title>Equal-Height-Columns mit CSS3 Gradient</title>
    <style>
    </style>
</head>
<body>
    <div class="clearfix" id="content-wrapper">
        <div id="leftside">
        <p>
        </p>
        </div>
        <div id="content">
        <p>
        </p>
        </div>
        <div id="rightside">
        <p>
        </p>
        </div>
    </div>
</body>
</html>

Einfach und übersichtlich. Die Absätze sind im Beispiel mit etwas Text gefüllt. Die Klasse clearfix dient dazu den content-wrapper auf die Größe der innenliegenden div's aufzuziehen, da diese per float aus dem Elementfluss herausgenommen wurden.
Jetzt bauen wir nach und nach das CSS für unsere dreispaltige Website auf.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
    body {
        width: 940px;
        margin: 100px auto;
        background: #F0F0F0;
    }

    /*
     * Clearfix
     */
    .clearfix:after { /* Firefox, IE8, Opera, Safari etc. */
        content: ".";
        display: block;
        height: 0;
        clear: both;
         visibility: hidden;
    }
    
    * +html .clearfix {
        display: inline-block;
    }
    
    * html .clearfix {
        height: 1%;
    }
</style>

Damit ist die Grundarbeit bereits getan. Wir haben einen body mit der Breite 940px, der 100px von der Oberkante abgesetzt ist und sich per auto mittig positioniert. Die Breite von 940px ergibt sich aus den im Beispiel verwendeten Werten. Dazu später mehr.
Die clearfix-Klasse kann einfach aus dem Beispiel kopiert werden.

Jetzt erweitern wir den style-Block noch um die Grund-Styles für die Content-Bereiche.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<style>
    #leftside {
        padding: 0 5px;
        float: left;
        width: 200px;
    }
    
    #content {
        padding: 0 5px;
        float:left;
        width: 500px;
    }
    
    #rightside {
        padding: 0 5px;
        float: left;
        width: 200px;
    }
</style>

Alle div's erhalten ein padding um den Text ein wenig von den Seiten abzusetzen und eine fixe Breite. Danach reihen wir unsere Testseite per float: left; von Links nach Rechts auf.

Jetzt fügen wir noch die Hintergrundfarben für die einzelnen Bereiche per gradient ein. (Erstmal nur für den Firefox)

 
HTML
1
2
3
#content-wrapper {
    -moz-linear-gradient(left, #615D5A 210px, #8EB830 210px, #8EB830 720px, #C14E39 720px); 
}

Die Anwedung ist für den Firefox denkbar einfach. Zuerst wird per left die Seite angegeben von der aus der gradient startet, dann geben wir an wie weit wir den Bereich mit der vollen Farbe füllen möchten. Da wir hier keine Verläufte zwischen den einzelnen Bereichen möchten, schließen wir den darauf folgenden Farbbereich Pixelgenau an. Das letzte Wertepaar aus Farbe und Distanz dient als Endpunkt für den eigentlich Farbverlauf, sodass der restliche Bereich bis zum ende des Containers mit der gleichbleibenden Farbe aufgefüllt wird. Im mittleren Bereich lassen wir eine Farbe in die gleiche Farbe verlaufen und erhalten somit den gleichbleibenden Effekt. Die Pixelwerte ergeben sich aus der kummulierten Breite der Bereiche und ihrem Innenabstand.

Da im gradient nahezu beliebig viele Wertepaare angegeben werden können, lassen sich so auch sehr einfach bestimmte Layouts verwirklichen.

Zum Beispiel: einfache weiße Content-Bereiche auf grauem Hintergrund mit schwarzen Trennstrichen.

Bild zu Equal Height Columns mit CSS3 Gradient
Beispiel 2
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
#content-wrapper {
    background: -moz-linear-gradient(left, 
                    #FFFFFF 220px, 
                    #000000 220px,  
                    #000000 222px, 
                    #FFFFFF 222px,  
                    #FFFFFF 742px,
                    #000000 742px,
                    #000000 744px,
                    #FFFFFF 744px);     
}

Treibt man das ganze noch weiter, lassen sich auch etwas komplexere Layouts verwirklichen. Zum Beispiel ein dreispaltiges, dreifarbiges Layout mit schwarzen Trennstrichen und prozentualen Breiten.

Bild zu Equal Height Columns mit CSS3 Gradient
Beispiel 3
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
content-wrapper {
    background: -moz-linear-gradient(left,
                    #615D5A 20%, 
                    #FFFFFF 20%, 
                    #FFFFFF 22.4%, 
                    #000000 22.4%,  
                    #000000 22.6%, 
                    #FFFFFF 22.6%,  
                    #FFFFFF 25%, 
                    #8EB830 25%, 
                    #8EB830 75%, 
                    #FFFFFF 75%,
                    #FFFFFF 77.4%,
                    #000000 77.4%,
                    #000000 77.6%,
                    #FFFFFF 77.6%,
                    #FFFFFF 80%, 
                    #C14E39 80%);
}

Bis jetzt sieht das ganze noch nach einer netten Spielerei aus, allerdings bietet die Methode für moderne Browser eine echte Alternative mit handfesten Vorteilen.
Angenommen wir wollen eine zweispaltige Website erstellen, die zentriert und durch einen Schatten vom Hintergrund abgehoben, platziert werden soll. Bisher würde man das per Faux Columns und enstprechend einem Bild für den Schatten lösen. Das Bild erzeugt allerdings einen Request und sorgt damit für eine Verzögerung beim Seitenaufbau.
Den Request kann man sich sparen, indem man die hier gezeigte Methode verwendet und das Layout per CSS3 erzeugt.

Bild zu Equal Height Columns mit CSS3 Gradient
 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
content-wrapper {
    padding: 10px;
    background: -moz-linear-gradient(left,
                rgba(255,255,255,.0) 0px,
                rgba(0,0,0,.5) 10px,
                #FFF 10px,
                #FFF 725px,
                #000 725px,
                #000 727px,
                #FFF 727px,
                #FFF 969px,
                rgba(0,0,0,.5) 969px,
                rgba(255,255,255,0) 979px
                );
} 

Der Internet Explorer unterstützt den gradient vor der Version 9 nicht, weswegen ein Fallback für IE-Nutzer in die Website eingebaut werden muss. Trotzdem lohnt es sich das Layout entsprechend aufzuziehen und die Seite damit für die Zukunft zu rüsten.

Die Auszeichnung des gradient verhält sich bei Chrome und Safari etwas anders. Das Prinziep ist aber das gleiche. Deswegen hier nur ein kleines Beispiel für eine zweispaltige Website, bei der der Farbübergang bei 75% stattfindet.

 
HTML
1
2
3
4
5
6
7
8
content-wrapper {
    -webkit-gradient(linear, 
            left top, 
            right top, 
            from (#E2A123), 
            color-stop(.75, #E2A123), 
            color-stop(.75, #8EB830));
}

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "Equal Height Columns mit CSS3 Gradient" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Equal Height Columns mit CSS3 Gradient" hier bearbeiten.

Mitarbeiter