CSS/fertige Layouts/Design03
Firmenseite in sachlichem Blau im 3-Spalten-Layout mit der Navigation links.
- Download: ZIP-Datei (78kB, Prüfsumme: )
Inhaltsverzeichnis
Besonderheiten
Die Hintergrundfarben und Schatten sind direkt in der CSS-Datei definiert und können leicht geändert werden. Die Icons oben rechts sind SVG-Grafiken, die ebenfalls anders gestaltet werden können.
Responsivität
Auf schmalen Bildschirmen werden alle Elemente der Seite untereinander angezeigt und können durch Scrollen erreicht werden.
Bei breiteren Viewports können Elemente nebeneinander angeordnet werden, bis bei einer Breite von mehr als 60em das Layout in einem dreispaltigen Raster angeordnet wird. Dabei sollen die Elemente unterschiedliche Höhen haben, sich aber dem benötigten Platz der Nachbarelemente automatisch anpassen. Hierfür eignet sich das gar nicht mehr so neue, von allen aktuellen Browsern unterstützte, Grid-Layout perfekt.
mobil: mittel: breit: HEAD HEAD HEAD HEAD HEAD HEAD NAVI NAVI NAVI NAVI INTRO INTRO INTRO INTRO INTRO NAVI SPAL1 SPAL2 SPAL1 SPAL1 SPAL2 NAVI SPAL1 SPAL2 SPAL2
Eigentlich könnte man dieses ASCII-Raster gleich in grid-template-areas einfügen. Da die Unterseiten aber ein anderes Markup haben, ist es besser für jedes Element Größen, und wenn nötig auch Positionen festzulegen.
Auch auch dies geht mit nur wenigen Zeilen CSS:
@media (min-width: 30em) {
main {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
}
nav {
grid-column: 1 / 2;
}
#intro {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
article {
grid-column: 2 / 3;
}
.spalte img {
width: 50%;
float: left;
margin-right: 0.5em;
}
}
@media (min-width: 50em) {
main {
grid-template-columns: repeat(3, 1fr);
}
...
}
Erst ab 30em Viewportbreite greift eine media query, die das main-Element zu einem grid-Container mit 2 Spalten macht.
Eigentlich benötigt man keine weiteren Festlegungen: Kindelemente werden automatisch in das Raster eingefügt. Mit den Eigenschaften grid-column und grid-row können sie Spalten und Reihen überspannen.
Ab 50em Breite greift eine erneute media query, sodass ein 3-Spalten-Layout entsteht.PS: auch das Kontaktformular wurde mit grid gestaltet!
grafische Elemente mit CSS zeichnen
Die grafischen Elemente neben den Menüpunkten und den Überschriften werden ohne externe Grafiken, sondern nur durch CSS {border-left: 5px solid blue;} erzeugt.
Das Banner (engl. ribbon) um die Überschrift oben links wird durch zwei Pseudoelemente ganz ohne Hintergrundgrafiken erzeugt und kann so leicht verändert werden:
header a h1,
header a p {
color: white;
border-left: 0;
padding: 0;
display: table;
}
.ribbon {
display: inline-block;
position: relative;
margin: 2em 0 2em -1.5em;
padding: 0.5em 1em;
background: #4e7a92;
box-shadow: 0px 1px 3px rgba(0,0,0,.8);
}
.ribbon::before{
display: block;
width: 1.5em;
height: 0;
position: absolute;
bottom: -1.5em;
left: 0em;
content: "";
border-bottom: 1.5em solid transparent;
border-right: 1.5em solid rgb(0, 80, 116);
}
Überschriften und Absätze sind sonst immer 100% breit, durch display: table; und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig.
Dann erhält das Banner mit ::before ein Pseudoelement. Es hat keinen Inhalt, auch keine Höhe, aber einen rechten blauen Rand mit 1.5 Breite. Er wird als Dreieck dargestellt, da der untere Rand transparent ist.
Mit box-shadow verstärkt ein Schatten der Eindruck von räumlicher Tiefe.
