Lektion 16 - Vorschau auf CSS3

Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 16 - Vorschau auf CSS3

Beitrag von Admin » Di 19. Aug 2014, 11:25

Das W3C

Im Laufe des Kurses hast du bereits festgestellt, das es gravierende Unterschiede zwischen der Darstellung in verschiedenen Browsern gibt. Das W3C ist eine Organisation aus Mitgliedern der Browserhersteller und einzelnen unabhängigen Entwicklern. So ist die Firma Microsoft wie auch Google, Macintosh, Mozilla und Opera darin vertreten. Diese Organisation hat sich gebildet um allgemeingültige Webstandards festzulegen, die jeder Browser anzeigen können muss.

Diese Entwicklung ist ständig im Fluss. Jedes Unternehmen, dass einen Webbrowser veröffentlicht, versucht sich durch besonders gute Innovationen von seinen Konkurrenten abzuheben. So werden unsere Browser immer weiter entwickelt mit neuen Funktionen für Darstellung und Sicherheit erweitert.

Die zurzeit gültigen Standards sind hmtl 4 und CSS2. Diese werden jedoch in Kürze von html 5 und CSS3 abgelöst. Dies geschieht natürlich nicht über Nacht und viele Anwender halten an alte Browser fest, sodass es immer eine lange Übergangsphase in dieser Ablösung gibt. Es gibt in der Tat noch Leser, die den Internet Explorer 6 verwenden. Microsoft hat seine Unterstützung eingestellt, sodass er eigentlich nicht mehr verwendet werden sollte und jeder mindestens auf den Internet Explorer 7 gewechselt haben sollte. Leider gibt es nach wie vor Nutzer, die das nicht wollen - aus welchen Gründen auch immer.

Für Webdesigner sollte jedoch die Regel gelten:

Wenn der Hersteller den Browser nicht mehr unterstützt, braucht der Webdesigner das auch nicht unterstützen!

Auf diese Weise ist es zwar lästig für jemanden der einen Uraltbrowser verwendet eine Seite anzusehen, die sein Browser nicht korrekt anzeigen kann, er hat jedoch die Möglichkeit sich jederzeit einen aktuellen, sicheren und moderneren Browser zu installieren.

Bedenke, dass du deine Seite grundsätzlich für die gängigen Browser gleich schön und nutzbar machen musst. Denn das ist die Kunst des Webdesigners, die seine Arbeit so wertvoll macht. Das gilt vor allem, wenn du die neuen Standards einsetzt.

An dieser Stelle möchte ich dir einige Neuerungen der Standards vorstellen:

Die Neuerungen werden von KompoZer noch nicht unterstützt. KompoZer unterstützt CSS2 und html4. Alle anderen Formatierungen löscht er gnadenlos aus der CSS. Du musst sie in einem externen Stylesheet mit Texteditor anlegen und das Stylesheet in deine html-Seite importieren.

Neuerungen von CSS2 zu CSS3

Hintergrundbilder positionieren

Im CSS2 Standard konntest du ein Hintergrund links, rechts, zentriert, oben unten positionieren. Mit CSS3 ist es nun möglich, das Hintergrundbild pixelgenau zu positionieren.

Code: Alles auswählen

background-image: url(pfad-zum-bild.png) 100px 50px no repeat scroll
Pfad zum Bild, Position von link und von oben, Wiederholung, bewegt sich mit der Seite.

So sieht das Beispiel aus: Hintergrundbild festpositioniert

Die Positionierung von top, bottom, center, left und right können alle Browser auch der IE bereits ab Version 4.0.

Mehrere Hintergrundbilder einfügen

Bislang war es nicht möglich, mehrere Hintergrundbilder in einem Element darzustellen. Aber auch dies ist jetzt möglich, sodass viele Elemente wegfallen können, die bislang eingefügt und verschachtelt wurden nur um Hintergrundbilder darzustellen.

Code: Alles auswählen

background: url('bilder/oben.png') scroll no-repeat 0 0, 
            url('bilder/template.png') fixed no-repeat center bottom #09F;
So sieht das Beispiel aus: Beispiel multiple Hintergrundbilder

Fügst du mehrere Bilder ein, musst du das unterste Bild zuerst nennen, denn dieses wird von allen Browsern angezeigt. Du kannst so viele Bilder einfügen, wie du möchtest, sie werden durch ein Komma voneinander getrennt. Am Schluss fügst du noch eine Hintergrundfarbe ein, sollten die Bilder nicht angezeigt werden können, wird immer die Farbe angezeigt.

Größe eines Hintergrundbildes

Die Größe eines Hintergrundbildes kannst du nun auch über CSS variieren. Bislang war es nur möglich, ein Hintergrundbild in seiner ursprünglichen Größe einzufügen. Unterstützt wird diese Formatierung von:

Code: Alles auswählen

background-image: url(bilder/oben.png);
height: 250px;
width: 350px;
-moz-background-size:50%;
-webkit-background-size:25%;
background-size:10%;
So siehts aus: Größe Hintergrundbild

prefix
  • -moz-
    -o-
    -webkit-
Farbverlauf

Der Farbverlauf konnte bislang nur per wiederholende Grafik eingefügt werden. Das geht jetzt auch per CSS.

Da diese Funktion noch sehr neu ist und jeder Browserhersteller seine eigene Methode erfunden hat, muss man für jeden Browser den entsprechenden Prefix eingeben. Zuerst gibst du an, dass du kein Hintergrundbild hast, das der Hintergrund mit der Seite scrollt, keine Wiederholung Position 0px von links und 0px von oben. Der Verlauf wird als Hintergrundbild gewertet.

Dann folgt die Form des Farbverlaufes. Der Neigungsgrad des Verlaufs in deg (Grad) und die Farben, aus denen der Verlauf besteht, folgen in Klammern gesetzt.

Code: Alles auswählen

background: none scroll no-repeat 0 0;
background-image:-moz-linear-gradient(-90deg,#995b5b, #ffd5cf);
background-image:-webkit-gradient(linear, top left, bottom left, from(#995b5b), to(#ffd5cf));
background-image:-webkit-linear-gradient(-90deg,#995b5b,#ffd5cf);
background-image:-o-linear-gradient(-90deg,#995b5b,#ffd5cf);
background-image:-ms-linear-gradient(-90deg,#995b5b,#ffd5cf);
background-image:linear-gradient(-90deg,#995b5b,#ffd5cf);
prefix
  • -ms-
    -moz-
    -o-
    -webkit-
So sieht das Beispiel aus: Beispiel Linearer Verlauf

Box-Shadow

Code: Alles auswählen

div {
-webkit-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
}
Der Box-Shadow, gibt einem Element eine Schattierung, die du ganz nach deinen Vorstellungen einstellen kannst. Bislang war dies nur mit Hilfe von Grafiken möglich, wie du in Lektion 3 gelernt hast.

Der Box-Shadow wird mit 4 Attributen dargestellt:
  • 1. Horizontaler Versatz
    2. Vertikaler Versatz
    3. Weichzeichnerradius
    4. Schattenfarbe.
prefix
  • -moz-
    -webkit-
Hier findest du das Beispiel zum Box-Shadow. Boxshadow
Du kannst jedem Element einen Box-Shadow geben.

Border-Radius

Code: Alles auswählen

div {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
Der Border-Radius rundet die Ecken eines Elementes ab. Z.B. sind die Ecken der Stylesheet-Beispiele in diesem Kurs abgerundet.

Den Radius fügst du mit einer Angabe in Pixel hinzu. Je größer der Wert, desto größer die Rundung.

Du kannst auch jede Ecke mit einem Radius versehen. z.B.

Code: Alles auswählen

div {
border-radius: 10px 0 10px 0;
-moz-border-radius: 10px 0 10px 0;
-webkit-border-radius: 10px 0 10px 0;
}
Leider funktioniert dies nicht in jedem Browser. Der IE kann nur alle oder keine Ecke abrunden.

prefix
  • -moz-
    -webkit-
Hier kannst du dir die beiden Beispiele anschauen. Border-Radius

Text-Shadow

Die Formatierung eines Text-Schattens wird vom IE bislang noch nicht unterstützt. Geplant ist die Unterstützung im IE 10.
prefix
  • -ms-
    -moz-
    -o-
    -webkit-
Ein Textschatten wird mit 4 Attributen formatiert:
  • 1. Versatz horizontal z.B. nach links 2px
    2. Versatz vertikal z.B. nach oben 2px
    3. Weichzeichner z.B. um 2px
    4. Schattenfarbe z.B. schwarz

Code: Alles auswählen

.schatten {
color: yellow;
-moz-text-shadow: 2px 2px 2px #000000;
-webkit-text-shadow: 2px 2px 2px #000000;
-o-text-shadow: 2px 2px 2px #000000;
}
Hier ist mein Beispiel für Textschatten.

Text in Spalten
Mit CSS3 ist es in Zukunft möglich Text in spalten zu formatieren.
Die Syntax des ist so verschlüsselt:

1. column-count = Anzahl der Spalten
2. column-gap = Abstand zwischen den Spalten.
3. column-rule = Linie zwischen den Spalten (Breite, Art, Farbe)

Hier findest du ein Beispiel für Spaltentexte.

Code: Alles auswählen

div.columns {
    -moz-column-count:2; /* Firefox */
    -moz-column-gap:7em;
    -moz-column-rule:4px dashed #adf;
    -webkit-column-count:2; /* Safari, Chrome */
    -webkit-column-gap:7em;
    -webkit-column-rule:4px dashed #adf;
    column-count:2; /* Opera, IE, W3C Standard */
    column-gap:7em;
    column-rule:4px dashed #adf;
    border:4px solid #adf;
    padding:10px;
}
prefix
  • -moz-
    -webkit-
Transformation

Über CSS3 ist es nun möglich, Elemente zu drehen.

Die Syntax des setzt sich aus diesen Attributen zusammen:
transform-rotate = drehen in Gradwinkel,
transform-scale = über XY Achsen in Werten wie em vergrößern bzw. verkleinern
transform-translate = verschiebt das Element in X bzw. Y Richtung
transform-skew = schert das Element. Der Winkel wird in X und Y Grad definiert.

Code: Alles auswählen

div {
transform:rotate(7deg);
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);
}
prefix
  • -ms-
    -moz-
    -o-
    -webkit-
Hier findest du ein Beispiel für Transformationen

Abschluss-Übung

Gestalte eine Webseite:
  • Die Menüleiste sollte 4 Links beinhalten, wobei ein Link 2 Unterpunkte besitzen sollte, der zu zwei verschiedenen Galerien führt. Verwende hierfür die Klappmenü-Technik.
  • Gestalte zwei Galerien: 1 CSS basiert und 1 mit Javascript-Unterstützung
  • Gestalte ein kleines Feedback-Formular, worin der Besucher anhand einer Skala (von z.B. Note 1-6 oder Punkte 1-10) deine Seite bewerten soll.
  • Verwende mindestens 3 CSS2 Eigenschaften, die du in der Lektion 15 kennengelernt hast.
  • Verwende für das Template die hier in der Übung kennengelernten CSS3 Eigenschaften.
Ich wünsche dir viel Spaß beim Ausprobieren der neuen Formatierungsmöglichkeiten!

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von kp2709 » Mo 22. Sep 2014, 17:19

hallo zusammen,
nach langer zeit will ich mich auch mal wieder melden :P ! in meiner sinnloser kurzen freizeit versucht ich was zum generieren und das ist rausgekommen :o :shock: :o
http://reikuma27.reikuma.bplaced.de/web ... index.html

bitte um zuckerbrot und peitsche
lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 206
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von anke » Mo 22. Sep 2014, 17:39

Hallo Kurt

da hast du dich ja richtig ins Zeug gelegt ;) ein paar Kleinigkeiten muss ich jedoch anmerken. Prüfe bitte einmal die Navigation. Schreibfehler solltest du auf jeden Fall vermeiden. Im Fließtext kann das schon mal passieren, aber nicht in der Navigation ;)

Dann sind in den Galerien einige Bilder nicht verlinkt. Ja, und irgendwie habe ich die Formatierungen mit CSS3 vermisst. Aber das bekommst du bestimmt noch alles wieder hin ;)

Viele Grüße

Anke

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von kp2709 » Mo 22. Sep 2014, 20:11

hallo anke,
danke für die hinweise, muss mehr aufpassen :shock:
ich hab die bilder nun mit anderer datei-endung verlinkt, es mag woll kein jpg-datei, denn jetzt mit png ist alles gegangen und zuvor mit jpg am heim pc auch.
nun zu css3, schau bitte in impressum (imressum-- :roll: ), dort habe ich den text formatiert und wenn du mit der maus auf der startseite auf die zwei links gehst (kompozer und formular), dann kommt der finger ;) .
danke für`s anschauen
bitte um verge.....
lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von camouflage1984 » Di 23. Sep 2014, 04:36

Hallo Kurt

Ich habe mir deine Seite angeschaut und bei mir sieht sie so aus:
reikuma27.jpg
reikuma27.jpg (71.56 KiB) 87 mal betrachtet
Das liegt an meinem 27" Monitor.
Wenn du das Bild im body zentriert hättest würde es nicht so verschoben aussehen.

Code: Alles auswählen

body {
  background-repeat: repeat-y;
  background-image: url(abschlusshomepage-bilder/logos%20u.%20hintergrund/sony-dach4.jpg);
  font-size: 14px;
  font-family: Arial,Helvetica,sans-serif;
  color: black;
  background-position: right center;
}
Hier wäre

Code: Alles auswählen

background-position: center center;
besser gewesen ;)

Bitte versuche auch leerzeichen in den Bildernamen zu vermeiden, da sonst diese

Code: Alles auswählen

ogos%20u.%20hintergrund
zeichen eingefügt werden und das dann dazu führen das die Bilder evtl. nicht angezeigt werden.

Du hast body in beiden css Dateien angegeben, das kann auch zu Komplikationen führen ;)

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von kp2709 » Di 30. Sep 2014, 11:16

hallo liebe leut,
last euch sagen dass das wette am wochenende schön wird :D , zu diesen freudigen anlass habe ich hier einen neue überarbeitet seite.
diese hat zwar kein klappmenü mehr und auch die übung von lektion 15 habe ich mir diesmal geschenk und zur prüfung.
die alte-----------> http://reikuma27.lima-city.de/web-abschluss-kompozer/
die neue-alte---> http://reikuma27.lima-city.de/css3-homepage/index.html
die neue ---> http://reikuma27.lima-city.de/web-css3/ <------ diese werde ich vielleicht noch mehr ausbauen :lol: sie gefällt mir am besten ;) . bitte um gnadenlose prüfung

lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 206
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von anke » Di 30. Sep 2014, 12:33

Hallo Kurt

das nenne ich mal Fleiß :D

Das sieht alles super aus, jedenfalls gefällt sie mir optisch wie auch im Quellcode.

Ich kann nur leider beim besten willen keine CSS3 Formatierungen erkennen. Auch die CSS zeigt mir keine an. Kann es sein, dass du die CSS3 Formatierungen in einer anderen CSS geschrieben hast, die nicht eingebunden ist?

Viele Grüße

Anke

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von kp2709 » Di 30. Sep 2014, 13:23

hallo anke,
so schnell habe ich nicht mit einer antwort gerechnet aber danke. 8-)
nun, ich habe das ccs in mit dem notepad editor geschrieben und den body hintergrund mit dem bild das man irgendwo hinsetzen kann erzeugt und die html extra erzeugt.
hätte ich nur den body hintergrund im css3 erzeugen sollen und ein extra styles.css für den rest. es ist wie du beschrieben hast, der kompozer ist gnadenlos er löscht alles raus :lol: .
kannst du mir mal ein beispiel css3 im css senden oder wie dann das es aussieht :?:
bitte, denn ich bin eine visueller lerner

lg
danke kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 206
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von anke » Di 30. Sep 2014, 13:50

Hallo Kurt

du formatierst wie immer alles, was normal über KompoZer geht in deiner normalen CSS.

Zum Beispiel:

Code: Alles auswählen

#seite {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  color: #330099;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1em;
}
h1 {
  height: 130px;
  display: block;
  width: 100%;
  font-family: Arial,Helvetica,sans-serif;
  color: #990000;
}
body {
  font-size: 12pt;
}
Jetzt kommt ein Verlauf im Hintergrund dazu und eine Schattierung der Überschrift. Das schreibst du dann mit deinem notpad++ in eine neue css-Datei.

Code: Alles auswählen

body {
	background: none scroll no-repeat 0 0;
	background-image:-moz-linear-gradient(-90deg,#995b5b, #ffd5cf);
	background-image:-webkit-gradient(linear, top left, bottom left, from(#995b5b), to(#ffd5cf));
	background-image:-webkit-linear-gradient(-90deg,#995b5b,#ffd5cf);
	background-image:-o-linear-gradient(-90deg,#995b5b,#ffd5cf);
	background-image:-ms-linear-gradient(-90deg,#995b5b,#ffd5cf);
	background-image:linear-gradient(-90deg,#995b5b,#ffd5cf);
}

h1 {
		text-shadow: 4px 4px 2px #000000;		
		-moz-text-shadow: 4px 4px 2px #000000;
		-webkit-text-shadow: 4px 4px 2px #000000;
		-o-text-shadow: 4px 4px 2px #000000;
}
Wenn du beide CSS-Dateien als externe CSS-Dateien gespeichert hast sieht das im head deiner html-Seite so aus:

Code: Alles auswählen

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>css-Dateien</title>
<link rel="stylesheet" href="css2.css" type="text/css">
<link rel="stylesheet" href="css3.css" type="text/css">
</head>
Viel Spaß beim Ausprobieren

Gruß anke

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 16 - Vorschau auf CSS3

Beitrag von kp2709 » Di 30. Sep 2014, 16:25

hallo anke,
deine hilfe war super, jetzt hat es erst klick gemacht :!:
hier mein link ist erst mittag aktiv :evil:
http://www.reikuma27.de

danke nochmal

kurt
Zuletzt geändert von kp2709 am Mi 1. Okt 2014, 08:42, insgesamt 1-mal geändert.
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast