logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


Tutorial Webseitenerstellung mit HTML 5 und CSS 3 / Teil 4 Hintergründe

Im vorherigen Schritt haben wir die Schriften formatiert, nun geben wir den Bereichen verschiedene Hintergründe (Farben).

Zur Verdeutlichung geben wir den verschiedenen Bereichen zusätzlich abgerundete Ecken und Schlagschatten via CSS.

Bitte in der Stylesheet-Datei folgendes Suchen:


hgroup h1 {
	font: 40px/54px HighlandGothicLightFLFRegular, "Lucida Sans Unicode", "Lucida Grande", sans-serif;

...und durch folgenden Code ersetzen


hgroup h1 {
	font: 40px/54px HighlandGothicLightFLFRegular, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-shadow: 2px 2px 5px #242124;
	-moz-border-radius-topleft: 40px;
    -moz-border-radius-topright: 40px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
     border-top-left-radius: 40px;
     border-top-right-radius: 40px;
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
     box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -o-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
	 background-color: rgba(240, 240, 240, 0.5);
}

Mit Text-Shadow vergeben wir dem Text einen Schatten

Mit dem Border-Radius runden wir die Ecken unterschiedlich ab.

Mit Box Shadow vergeben wir dem Bereich einen Schatten

Die vermeindlich doppelten Einträge sind für Crossbrowserkompatibilität und damit für die verschiedenen Browserversionen gesetzt. (Firefox, Opera, Webkit-Browser, IE)

Folgenden Code im body stylesheet suchen...


hgroup h2 {
	font: 14px/20px Colaborate-RegularRegular, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

...und durch folgenden Code ersetzen:


hgroup h2 {
	font: 14px/20px Colaborate-RegularRegular, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	-moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 40px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -o-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
	background-color: rgba(160, 160, 160, 0.5);
	border-top:5px solid #000;
	padding-left: 20px;
}

Folgenden Code suchen...


nav#global {
	margin: 30px 0 40px;
	width: 100%;
}

...und durch folgenden Code ersetzen


nav#global {
	margin: 30px 0 40px;
	width: 100%; 
	-moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 40px;
    -moz-border-radius-bottomleft: 40px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -o-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
	background-color: rgba(240, 240, 240, 0.5);
}
 

Folgenden Code suchen...


#wrapper {
margin: 20px 0;
width:960px;
padding:20px;
}

...und durch folgenden Code ersetzen


#wrapper {
    margin: 20px 0;
    width:960px;
    padding:20px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -o-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    text-shadow: 0 0 15px #fff, 0 0 15px #fff;
    background: #d5cea6; /* old browsers */
    background: -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); /* ie */


}

Folgenden Code suchen...


article {
	margin: 0 0 30px 0;
	padding: 20px;
}

...und durch folgenden Code ersetzen


article {
	margin: 0 0 30px 0;
	padding: 20px;
	border:1px solid #ccc;
	-moz-border-radius-topleft: 38px;
    -moz-border-radius-topright: 12px;
    -moz-border-radius-bottomright: 38px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 38px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 38px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -o-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
	background-color: rgba(199, 200, 207, 10);

}

Folgenden Code suchen...


aside {
	width: 260px;
	float: right;
	margin-bottom: 30px;
	padding: 20px;
	position: relative;
	z-index: 1;
}

...und durch folgenden Code ersetzen


aside {
	width: 260px;
	float: right;
	margin-bottom: 30px;
	padding: 20px;
	position: relative;
	z-index: 1;
	border:1px solid #ccc;
	-moz-border-radius-topleft: 38px;
    -moz-border-radius-topright: 12px;
    -moz-border-radius-bottomright: 38px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius: 38px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 38px;
    border-bottom-left-radius: 0px;
    box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -o-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
	background-color: rgba(199, 200, 207, 0.5);
}

Folgenden Code suchen...


footer section {
	width: 255px;
	float: left;
	margin: 20px  0 30px 30px;
	padding: 20px;
}

...und durch folgenden Code ersetzen


footer section {
	width: 255px;
	float: left;
	margin: 20px  0 30px 30px;
	padding: 20px;
	-moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 5px;
   -moz-border-radius-bottomright: 40px;
   -moz-border-radius-bottomleft: 40px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -o-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
    -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
	background-color: rgba(240, 240, 240, 0.5);
}
Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview

Dies wäre der 3. Teil des Tutorials indem wir der vorformatierten Seite des 2.Teils die Schriften hinzugefügt haben. Als nächsten Schritt werden nun den einzelnen Bereichen Hintergründe ohne Grafiken via CSS hinzufügen.

Tags

HTML5 META Artikel Doctype Header Footer