Media Queries werden verwendet um unterschiedliche CSS Anweisungen zu laden.
Eine komplette Beschreibung der Media Queries findet man unter
selfhtml.wiki
In diesem Beispiel wird mit Media Queries die Anordnung der Boxen gesteuert. Wird das Fenster schmaler,
sollen die Boxen untereinander angeordnet werden.
Hier wird die Breite und Höhe des Browsers angezeigt.
Die Werte für screen ändern sich nur bei verschiedenen Geräten oder wenn z.B. beim Firefox mit "Strg +" die Größe
geändert wird.
Die Größe des innerWidth bzw. innerHeight ändert sich beim Ändern der Fenstergröße für den Browser.
Auf diesen Wert reagiert auch der Media Querie: @media (max-width:1280px).
In diesem Beispiel ist der o.g. Wert hinterlegt. Wird der Wert von innerWidth kleiner 1280px werden die
entsprecheden CSS-Anweisungen ausgeführt.
Die Boxen werden untereinander und mit einer Breite von 100% angeordnet.
Linke Box
anzeige
Rechte Box
CSS anzeigen
Pseudoklasse für Kindelemente
Mit den Pseudoklassen nth-child(ZAHL), first-child und last-child kann man die
entsprechenden Kindelemente ansprechen.
Bei nth-child gibt es die Optionen odd und even. Damit lassen sich gerade und ungerade Kinder ansprechen.
Mit diesen Pseudoklassen kann leicht eine gestreifte Liste oder Tabelle mit Überschrift und Summenzeole realisieren.
- Kopfzeile
- Zeile 1
- Zeile 2
- Zeile 3
- Zeile 4
- Summenzeile
class=gestreift
.gestreift li:nth-child(odd) und li:nth-child(even) wirken auf gerade oder ungerade Kinder.
.gestreift li:first-child .gstreift li:last-child wirken auf die erste und letzte Zeile. Diese Anweisung muss hinter den odd und even stehen.
CSS anzeigen
Pseudoklasse: target
Mit der Pseudoklasse target kann auf ein Klick reagiert werden.
Das folgende div hat eine ID (pseudotarget).
Mit dem interner Link Pseudoklasse klick wird auf diese ID verwießen.
In der CSS-Datei wird dann hinterlegt was bei Klick passieren soll.
Pseudoklasse target
Pseudoklasse klick
CSS anzeigen
Weiteres Beispiel Bildergalerie
Darstellung verschiedener Boxen mit dem flexiblen Boxmodell ab HTML 5.
Hier werden die Elemente display: box, box-orient usw. verwendet.
Mit border und border-radius können verschiedene Ränder erzeugt werden.
Runde Ecken mit border-radius: 2em
CSS anzeigen
Oben runde Ecken mit border-radius: 1em 1em 0 0;
CSS anzeigen
Elliptische Ecken mit border-radius: 2em / 4em;
CSS anzeigen
Styles mit CSS-Version 3
Schatten hier mit box-shadow: #FFFF00 1em 1em
Erster Wert horizontal - zweiter Wert vertikal
Bei Minus links bzw oben.
CSS anzeigen
Styles mit CSS-Version 3
Schatten mit Weichzeichner-Effekt box-shadow: #AAAAAA 1em 1em 1.5em
Erster Wert horizontal - zweiter Wert vertikal -dritter Wert Weichzeichner. Je höher desto weicher
CSS anzeigen
Styles mit CSS-Version 3
Text-Schatten mit Weichzeichner-Effekt text-shadow: #0000FF 3px 3px 5px;
Erster Wert horizontal - zweiter Wert vertikal -dritter Wert Weichzeichner. Je höher dest weicher
CSS anzeigen
Styles mit CSS-Version 3
Transparenz für eine Textschatten festelegen text-shadow: rgba(0, 0, 0, 0.7) 3px 3px 5px;
CSS anzeigen
Styles mit CSS-Version 3
Transparenz für die Schriftfarbe color: rgba(0, 0, 0, 0.3);
Hintergrund, damit die Auswirkung besser zu sehen ist.
CSS anzeigen
Styles mit CSS-Version 3
Linearer Farbverlauf mit background: linear-gradient(top,#DDDDDD, #006699);
z. Zt müssen noch die Browser-Kürzel mit angegeben werden.
CSS anzeigen
Styles mit CSS-Version 3
Linearer Farbverlauf mit background: -moz-linear-gradient(left, #006699, #DDDDDD);
z. Zt müssen noch die Browser-Kürzel mit angegeben werden.
CSS anzeigen
Styles mit CSS-Version 3
Radialer Farbverlauf mit radial-gradient(center, circle, #006699, #DDDDDD);
Möglich: center, bottom, top, left, right
circle, ellipse
z. Zt müssen noch die Browser-Kürzel mit angegeben werden.
CSS anzeigen
Mit transform und transition können Elemente mit CSS bewegt werden.
Mit transform: scale kann man die Box skalieren. (Auf Objekt klicken)
scale hat zwei Parameter horizontal und vertikal. Wird nur ein Wert übergegen
wird er auf beide Parameter angewandt. Werte zwischen 0 und 1 verkleinern, Werte über 1 vergrößern
CSS anzeigen
Mit transform: scale kann man die Box skalieren. (Auf Objekt klicken)
Mit Minuswerten wird das Objekt umgekehrt. scale(-1,1) erzeugt also ein horizontales Spiegelbild
CSS anzeigen
Mit transform: skew kann man die Winkel der Box ändern. (Auf Objekt klicken)
Es gibt wieder zwei Parameter für Horizontal und Vertikal.
CSS anzeigen
Mit transform: translate kann man die Box verschieben. (Auf Objekt klicken)
Es gibt wieder zwei Parameter für Horizontal und Vertikal
Oben links ist 0,0 Minus Zahlen verschieben nach oben oder links.
CSS anzeigen
Mit transition kann man eine Animation erstellen. (Auf Objekt klicken)
Es sind 4 Parameter notwendig. 1. Eigenschaft die durch die Transition ausgeführt wird (hier transform)
2. Die Dauer
3. Schlüsselwort für die Art (linear, ease, ease-in, ease-out, ease-in-out) Unterschied habe ich noch nicht rausbekommen.
4. Zeitverzögerung bis die Transition beginnt.
CSS anzeigen
Mit cursor kann in CSS der Mauszeiger geändert werden.
z.B. cursor: pointer;
Eine komplette Liste gibt es bei selfhtml.
Den Font und die Schriftgröße kann man unterschiedlich einstellen.
Mit font-family: kann man mehrere Schriften angeben. Der Browser wählt dann die erste die er kennt.
Mit font-size wird die größe angegeben. Entweder in Prozent oder px.
Schrift in courier (id=courier)
CSS anzeigen
Schrift in sans-serif (id=sans-serif)
CSS anzeigen
Schrift in 150% (id=fontprozent)
CSS anzeigen
Schrift in 20 Pixel (id=fontpixel)
CSS anzeigen
Schrift mit einer font-Anweisung (id=fontalles)
CSS anzeigen
Um Fettdruck oder Kursiv in einer Zeile zu verarbeiten gibt es die TAGs <b> für bold und <em> für
emphatic stress = kursiv. Ich setze die Formatierung in CSS um die Browsereigenheiten auszuschalten.
Fett geht über font-weight: bold und kursiv mit font-style: italic
CSS anzeigen
TAG anzeigen
