HTML 8 Vorbereitung
Hintergrundbilder background-image Werte: URL (Standort des Bildes) none inherit Standard: none Gilt für: alle Elemente Vererbung: nein => URL ist relativ zur Stylesheet-Datei anzugeben! 2
Hintergrundbilder body { } background-color: #BBE09F; background-image: url (../img/kohl_a.jpg); zur Sicherheit auch immer eine Hintergrundfarbe mit angeben, falls das Bild nicht angezeigt werden kann! 3
Hintergrundkacheln background-repeat Werte: repeat repeat-x repeat-y no-repeat inherit Standard: repeat Gilt für: alle Elemente Vererbung: nein 4
Hintergrundkacheln Background-Image des body-tags entfernen Im titlepage -div das Bild kohl_b.gif als Hintergrundbild einfügen Das Bild nur horizontal wiederholen lassen! Wiederholung auf vertikal bzw. keine Wiederholung setzen 5
Hintergrundposition background-position Werte: Längenmaß Prozentwert left center right top bottom inherit Standard: 0% 0% (identisch mit left top) Gilt für: alle Elemente Vererbung: nein 6
Hintergrundposition paarweise angeben { background-position: left top; } { background-position: right center; } Längenmaße { background-position: 200px 50px; } Prozentual { background-position: 15% 100%; } 7
Übung 01 body: Bild kohl_c_obenlinks.gif in die obere, linke Ecke body: Bild kohl_c_obenrechts.gif in die obere, rechte Ecke body: Bild kohl_c_obenrechts.gif in die rechte Ecke und 100px von der oberen Kante entfernt platzieren body: Bild kohl_c.gif mittig auf der Seite platzieren body: Bild kohl_c.gif horizontal mittig und 85px vertikal nach unten verschieben #titlepage: Bild kohl_c.gif hinzufügen und horizontal mittig und 75px vertikal nach unten verschieben 8
Hintergrund festsetzen background-attachment Werte: scroll fixed local inherit Standard: scroll Gilt für: alle Elemente Vererbung: nein 9
Fortsetzung der Übung 01 body: Eigenschaft background-attachment mit dem Wert fixed hinzufügen #titlepage: Hintergrundbild fixieren 10
Hintergrundangaben in Kurzschrift background Werte: HG-Farbe HG-Bild HG-Wiederholung HG-Fixierung HG-Position Standard: siehe einzelne Eigenschaften Gilt für: alle Elemente Vererbung: nein 11
Hintergrundangaben in Kurzschrift body { background-color: #BBE09F; background-image: url(../img/kohl_c.gif); background-repeat: no-repeat; background-position: center 85px; background-attachment: fixed; } Kurzschrift: body { background: #BBE09F url(../img/kohl_c.gif) no-repeat center 85px fixed; } 12
Fortsetzung der Übung 01 Kurznotation auf body-tag anwenden Kurznotation auf #titlepage-div-tag anwenden 13
Farbverläufe 14
Farbverläufe einsetzbar bei allen Elementen, wo auch CSS-Bilder möglich sind background-image list-style-image Linearer Farbverlauf background-image: linear-gradient(white, orange); 15
Farbverläufe einsetzbar bei allen Elementen, wo auch CSS-Bilder möglich sind background-image list-style-image Aber: Browserpräfixe beachten -moz-linear-gradient: Firefox -ms-linear-gradient: IE > 9 -o-linear-gradient: Opera > 11.10 -webkit-gradient: ältere Webkit-Browser und Safari 5 -webkit-linear-gradient: Chrome Angabe ohne Browserpräfix background-image: linear-gradient(white, orange); 16
Farbverläufe einsetzbar bei allen Elementen, wo auch CSS-Bilder möglich sind background-image list-style-image Aber: Browserpräfixe beachten div { background-image: -ms-linear-gradient(white, orange); /* IE10 */ background-image: -moz-linear-gradient(white, orange); /* Firefox*/ background-image: -o-linear-gradient(white, orange); /* Opera 11.10+ */ background-image: -webkit-linear-gradient(white, orange); /* Chrome 10+*/ background-image: -webkit-gradient(linear,center top,center bottom,from(white),to(orange)); /* Safari <=5 */ background-image: linear-gradient(white, orange); /* W3C */ } 17
18 www.colorzilla.com/gradient-editor
http://www.cssmatic.com 19
Farbverläufe - Richtung bestimmen Richtungsangabe durch Schlüsselwörter top (Standardwert) bottom left right background-image: linear-gradient(white, orange); background-image: linear-gradient(bottom, white, orange); 20
Farbverläufe - Richtung bestimmen 21
Farbverläufe - Richtung bestimmen Richtungsangabe in Grad 0deg - left 90deg - bottom 180deg - right 270deg - top background-image: linear-gradient(0deg, white, orange); background-image: linear-gradient(35deg, white, orange); 22
Farbverläufe - Übergänge bestimmen Ende einer Farbe in % angeben background-image: linear-gradient(white, orange 40%); background-image: linear-gradient(bottom, white, orange 60%); 23
Farbverläufe - 2+ Farben background-image: linear-gradient(white, orange, red); background-image: linear-gradient(45deg, white 30%, orange 60%, red 75, white); 24
Farbverläufe Radialer Farbverlauf background-image: radial-gradient(white, orange); Elliptischer Farbverlauf background-image: radial-gradient(center, ellipse, white, orange); Radialer Farbverlauf background-image: radial-gradient(center, circle, white, orange); 25
Farbverläufe Radialer Farbverlauf mit Größenangabe background-image: radial-gradient(50px 50px, white, orange); Radialer Farbverlauf mit Größenangabe background-image: radial-gradient(50px 10px, white, orange); 26
Farbverläufe Weitere Schlüsselwörter: closest-side: nächstgelegene Seite farthest-side: am weitesten entfernte Seite closest-corner: nächstgelegen Ecke farthest-corner: am weitesten entfernte Ecke contain: wie closest-side cover: wie farthest-corner radial-gradient(40px 10px, circle farthest-side, white, orange, red, purple, blue, black); 27
Farbverläufe - Wiederholung sich wiederholende Farbverläufe: repeating-radial-gradient repeating-linear-gradient radial-gradient(blue, orange 20px, red 40px); repeating-radial-gradient(blue, orange 20px, red 40px); 28
Farbverläufe 29
Fortsetzung der Übung 01 Einen Farbverlauf anstatt des Hintergrundbildes für das body-tag verwenden 30
Mehrere Hintergrundbilder - 2
Mehrere Hintergrundbilder Mehrere Hintergrundbilder oberstes Element ist das erste angegebene Bild folgende Bilder liegen immer eine Ebene tiefer background-image: url(images/sushi_1.png), url(images/sushi_2.png), url(images/sushi_3.png) ; background-repeat: no-repeat; background-position: bottom center, top right, top left ; 32
Mehrere Hintergrundbilder 33
Übung 02 Größe des Hintergrundbildes: background-size Skalierung der Hintergrundbilder 2 Werte: Breite und Höhe des Hintergrundbildes Angabe in px, % beibehalten der Proportionen mit contain oder cover contain : Bild wird auf die Größe des Inhaltsbereiches skaliert cover : Bild bedeckt gesamten Bereich, wird aber bei Bedarf beschnitten Beispiel: background-size: 20px 40px; background-size: 100% 100%; background-size: contain; background-size: cover; 34
Größe des Hintergrundbildes: background-size Safari unterstützt contain und cover erst ab Version 5 Firefox < 3.6 benötigt -moz-background-size Safari 3 und 4 benötigt -webkit-background-size 35