CSS/fertige Layouts/Design03

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Firmenseite in sachlichem Blau im 3-Spalten-Layout mit der Navigation links.

Beispiel: Design 03
ScreenshotScreenshotScreenshot


Besonderheiten[Bearbeiten]

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[Bearbeiten]

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:

Beispiel
@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);
 }
 ... 
}
In der Mobildarstellung werden alle Seiteninhalte untereinander platziert.

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[Bearbeiten]

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:

Beispiel
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);
}
Im ersten Regelsatz werden die Angaben für h1 mit einem genauen Selektor überschrieben, damit z.B. die Textfarbe nichtvom später folgenden h1-Regelsatz übernommen wird.

Ü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.

Siehe auch[Bearbeiten]

Hinweis

Urheberrecht: Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.