CSS/fertige Layouts/Template3

Aus SELFHTML-Wiki
< CSS‎ | fertige Layouts(Weitergeleitet von CSS/Templates/Template3)
Wechseln zu: Navigation, Suche

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.


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


Besonderheiten beim Design[Bearbeiten]

Die Hintergrundfarben und Schatten sind direkt in der CSS-Datei definiert und können leicht geändert werden.

Die grafischen Elemente neben den Menüpunkten und den Überschriften werden ohne Grafiken, sondern nur durch CSS {border-left: 5px solid blue;} erzeugt.

Das Banner (engl. ribbon) um die Überschrift oben links wird durch 2 Pseudoelemente ganz ohne Hintergrundgrafiken erzeugt und kann so leicht verändert werden:

.ribbon{
	margin: 30px 0 50px;
	position: relative;
	background: #333;
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: 0px 1px 3px rgba(0,0,0,.2);
	padding: 10px 15px;
	clear: both;
	text-align: center;
	padding: 10px 9px 10px 10px;
	width: 35%;
	margin-left: -10px;
}
 
.ribbon::before{
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -10px;
	left: -11px;
	content: "";
	border-bottom: 10px solid transparent;
	border-right: 10px solid rgb(0, 80, 116);
}
 
.ribbon::after{
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -10px;
	right: -10px;
	content: "";
	border-bottom: 10px solid transparent;
	border-left: 10px solid rgb(0, 80, 116);
}	

Responsivität[Bearbeiten]

Bei einem Viewport mit einer geringeren Breite als 950px wird das Layout schmäler, bis es sich untereinander anordnet, damit nur nach unten gescrollt oder gewischt werden muss.

Das Dropdownmenü wandert bei weniger als 620 Pixeln Breite nach unten und kann dann über den dann sichtbar werdenden Navigations-Button "☰" (vorher: {display:none;}) direkt erreicht werden.