Trickserei erlaubt sie den Effekt transparenter Rahmen. Näheres erläutert der englischsprachige Artikel
Transparent Borders with background-clip:
http://css-tricks.com/transparent-borders-with-background-clip/
Referenzinformationen
CSS-Eigenschaften
background-clip
:
background-size: Größe von Hintergrundgrafiken
Diese neue Eigenschaft ist vor allem interessant wegen der Möglichkeit, Hintergrundgrafiken auf die tatsächlichen Elementausmaße zu strecken, die ja bei den meisten Elementen nicht unbedingt bekannt ist. Sinnvoll ist das eigentlich nur in Verbindung mit
background-repeat:
no-repeat;
, also mit Hintergrundgrafiken, die nicht wiederholt werden.
•
background-size: contain;
bedeutet: Die Grafik wird so groß wie möglich angezeigt, aber so, dass sie noch vollständig angezeigt wird, dass ihre eigenen Seitenverhältnisse erhalten bleiben und dass sie sowohl in Breite als auch in Höhe kleiner oder gleich den Ausmaßen ist, die sich auf Grund der Positionierung der Grafik ergeben.
•
background-size: cover;
bedeutet: Die Grafik wird so klein wie möglich angezeigt, aber so, dass ihre eigenen Seitenverhältnisse erhalten bleiben und dass sowohl ihre Breite als auch ihre Höhe größer oder gleich den Ausmaßen ist, die sich auf Grund der Positionierung der Grafik ergeben.
Darüber hinaus sind absolute und relative nummerische Angaben möglich, um die Anzeigegröße der Grafik zu bestimmen, also etwa
background-size:
200px
100px;
. Das bedeutet: Die Hintergrundgrafik soll mit 200 Pixeln Breite und 100 Pixeln Höhe angezeigt werden, ohne Rücksicht auf ihre tatsächliche Größe.
Referenzinformationen
CSS-Eigenschaften
background-size
:
Bei Firefox wird diese Eigenschaft nur mit dem Präfix
-moz-
unterstützt.
14.8 Listenformatierung
Für
- und
-Listen stehen in CSS spezielle Formatierungsmöglichkeiten zur Verfügung. Dazu gehören bei ungeordneten Listen (
ul
) etwa grafische Aufzählungszeichen und bei geordneten Listen (
ol
) speziellere Nummerierungen wie römisch oder alphabetisch.
14.8.1 Gestaltungsmöglichkeiten für ungeordnete Listen
Für die Listengestaltung von
ul
-Listen stehen folgende CSS-Eigenschaften zur Verfügung:
• Mit
list-style-type
lässt sich das Aussehen des Aufzählungszeichens beeinflussen,
• mit
list-style-image
lässt sich eine beliebige Grafik als Aufzählungszeichen definieren,
• und mit
list-style-position
lässt sich das Einrückverhalten einer Liste einstellen.
Ebenso wie bei anderen Sets von Einzeleigenschaften gibt es auch in diesem Fall eine CSS-Eigenschaft namens
list-style
für zusammenfassende Angaben.
Beispiel
ul-Liste mit Darstellungstyp disc
- Probieren geht
über Studieren
- Liebe geht
über Triebe
- Tante geht
über Kante
ul-Liste mit Darstellungstyp circle und Position
inside
- Probieren geht
über Studieren
- Liebe geht
über Triebe
- Tante geht
über Kante
ul-Liste mit eigener Bullet-Grafik disc
- Probieren geht über Studieren
- Liebe geht über Triebe
- Tante geht über Kante
Bild 14.25: ul-Listen mit CSS-Listeneigenschaften im Browser
Erläuterung
Mit
list-style-type:
können Sie im Zusammenhang mit
ul
-Listen ein Standard-Aufzählungszeichen bestimmen. Folgende Angaben sind seit Langem möglich:
disc
(gefüllter Kreis),
circle
(leerer Kreis) und
square
(gefülltes Quadrat). Mit CSS3 kommen weitere Aufzählungszeichen hinzu:
box
(leeres Quadrat), diamond (Diamant-Symbol, z. B. Zeichen mit Rhombus-Form),
check
(ein √-Symbol) und
hyphen
(Bindestrich).
Wichtig ist auch die mögliche Wertzuweisung
none
. Damit verhindern Sie ein Aufzählungszeichen. Das mag zunächst widersinnig erscheinen. Doch ungeordnete Listen sind das semantische Mittel der Wahl etwa für Navigationsmenüs. Und dort sollen die Listennicht unbedingt wie Listen im Fließtext erscheinen, sondern mit Hilfe diverser CSS-Eigenschaften eher wie ein Menü in einer Anwendung reagieren.
Mit
list-style-position:
können Sie bestimmen, wie der Listeninhalt eingerückt wird. Mit dem Schlüsselwort
inside
bewirken Sie eine eingerückte Darstellung. Der Standardwert
Kostenlos Online Lesen 
