16 Vorschau auf CSS3

Antworten
AnkeLange
Administrator
Beiträge: 165
Registriert: Mi 29. Jun 2011, 19:48
Skype: eleanora2066
Wohnort: Osnabrück
Kontaktdaten:

16 Vorschau auf CSS3

Beitrag von AnkeLange »

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 schwarz;
-webkit-text-shadow: 2px 2px 2px schwarz;
-o-text-shadow: 2px 2px 2px schwarz;
}
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!
Liz1015
Beiträge: 47
Registriert: Sa 31. Dez 2011, 22:39

Re: 16 Vorschau auf CSS3

Beitrag von Liz1015 »

Hallo Ele

Endlich bin ich dazu gekommen, diese Übung fertig zu stellen. Zuerst hat es an Ideen gefehlt und dann an der fehlenden Zeit.

Hoffentlich habe ich die Aufgabe wenigstens richtig gelöst.

Liebe Grüsse
Liz
Benutzeravatar
eleanora
Beiträge: 589
Registriert: Do 7. Jul 2011, 11:26
Wohnort: Osnabrück
Kontaktdaten:

Re: 16 Vorschau auf CSS3

Beitrag von eleanora »

Hallo Liz
die Abschlussübung ist dir super gelungen ;) Eine Kleinigkeit, aber die ist schnell gerichtet.

Liebe Grüße

Ele ;)
Liz1015
Beiträge: 47
Registriert: Sa 31. Dez 2011, 22:39

Re: 16 Vorschau auf CSS3

Beitrag von Liz1015 »

Hallo Ele

Du schreibst "... dieses Eingabefeld ist breiter als die anderen und überragt die Seite ;)". Das verstehe ich nicht ganz. Wenn ich es bei mir im Firefox anschaue, haben alle Felder die gleiche Breite. Im Internet Explorer und im Google sieht es zwar nicht ganz gleich aus, aber es ist nicht breiter als die anderen.

Was kann resp. muss ich ändern? Gibt es einen Trick?

Liebe Grüsse
Liz
Benutzeravatar
eleanora
Beiträge: 589
Registriert: Do 7. Jul 2011, 11:26
Wohnort: Osnabrück
Kontaktdaten:

Re: 16 Vorschau auf CSS3

Beitrag von eleanora »

Hallo Liz
das sieht bei mir so aus
http://eleanora.kreativ-workshops.net/galerie/galipix-png.php?q=/feedback-formular_o.png

Ich denke mal, das liegt an der Spaltenangabe col=85 wenn du die raus nimmst, sollte auch die Breite des Textfeldes über die CSS funktionieren wie bei den anderen Feldern ;)

Gruß Ele ;)
Liz1015
Beiträge: 47
Registriert: Sa 31. Dez 2011, 22:39

Re: 16 Vorschau auf CSS3

Beitrag von Liz1015 »

Hallo Ele

Ich habe nun die Breite aller Eingabefelder über CSS definiert. Kannst du bitte schauen, ob es bei dir nun richtig angezeigt wird oder ob das eine Feld die anderen noch immer überragt.

Vielen Dank für deine Hilfe.

Gruss Liz
Benutzeravatar
eleanora
Beiträge: 589
Registriert: Do 7. Jul 2011, 11:26
Wohnort: Osnabrück
Kontaktdaten:

Re: 16 Vorschau auf CSS3

Beitrag von eleanora »

Hallo Liz
jetzt ists gut :)
Antworten

Zurück zu „16 Vorschau auf CSS3“