Amazon Banner 1.6

NEW ! - Kristof Bilder

Unter Bildergallerie Kristof gibt es neue Bilder von unserem Kleinen!

Abgerundete Ecken

border-radius

Mit border-radius ist es endlich möglich, Elemente valide mit abgerundeten Ecken zu erstellen.

Für Mozilla- und Safari-Browser gibt es bereits die anbieterspezifischen CSS-Eigenschaften -moz-border-radius und -khtml-border-radius um den Effekt zu erzielen.

Um den Radius für bestimmte Ecken zu definieren, können die Suffixe -topleft, -topright, -bottomright und -bottomleft verwendet werden. Bei Safari wird die Angabe der Ecke eingeschoben: -khtml-border-top-left-radius

Rahmen-Bilder

border-image

Die Eigenschaft border-image können für Rahmen Hintergrundbilder festgelegt werden. Die neue Eigenschaft kann die Angabe von bis zu drei URLs aufnehmen, um die Bilder einzubauen.

Außerdem können mit den Eigenschaften border-top-image, border-bottom-image, border-left-image und border-right-image für alle Kanten eigene Grafiken definiert werden.

Die Definitionen der CSS-Eigenschaft werden bei einem Einsatz von überschrieben.

border-corner-image

Last but not least wird mit border-corner-image die Zuweisung von Bildern für alle 4 Ecken möglich sein. Wie von anderen border-Eigenschaften bekannt auch einzeln mit border-top-left-image, border-top-right-image, border-bottom-right-image und border-bottom-left-image.

box-shadowtext-shadow

Mit box-shadow kann einem Kasten ein Schatten einfach und ohne Bilder gegeben werden.

Dagegen bietet text-shadow die Möglichkeit Text mit sogar mehreren Schatten (im Opera) zu versehen. Damit können schöne Effekte wie Leuchten usw. erzielt werden.

Bessere Steuerung von Hintergrundbildern

background-origin, -clip

Mit background-origin kann man angeben, ob das Hintergrundbild am Rahmen, am Innenabstand oder am Inhalt ausgerichtet werden soll. (Webkit: -webkit-background-composite)

background-clip gibt an, ob sich das Hintergrundbild bis in den Rahmen erstrecken soll oder nicht hinter dem Rahmen angezeigt werden soll. (Webkit: -webkit-background-clip)

Größe von Hintergrundbildern

background-size

Mit background-size kann die Größe von Hintergrundbildern angegeben werden. Dies ist vor allem Wichtig um zukünftig SVG Grafiken sinnvoll als Hintergrundbilder einzusetzen.

Mehrere Hintergrundbilder

Mehrere Hintergrundbilder

In CSS3 können für ein Bild mehrere Hintergrundbilder angegeben werden. Dadurch müssen für viele Effekte keine ansonsten unnötigen HTML-Elemente eingefügt werden.

opacity

Mit der opacity Eigenschaft kann die Deckkraft/Transparenz von Elementen gesteuert werden. Diese Eigenschaft wird zwar so nicht im Internet Explorer unterstützt, es gibt aber eine ebenbürtige Eigenschaft, wodurch in allen Browsern Transparenz genutzt werden kann.

hsl()

Neben RGB ist es in CSS3 auch möglich seine Farbangaben in HSL anzugeben. Das heißt, dass die Werte nicht in additiver Farbmischung sondern in Farbton durch Grad und Sättigung und relative Helligkeit in Prozent angegeben werden. HSL im Einsatz

background-color: hsl(0,100%,50%); 
Transparenz

rgba(), hsla()

Daneben ist es auch möglich RGB und HSL mit Transparenz-Angaben zu versehen: Die beiden Farbsysteme nehmen hierbei die Form RGBA und HSLA ein. "A" steht für den Alpha-Kanal. Die Werte liegen zwischen 0 und 1, wobei 0 0% Transparenz und 1 100% Transparenz hat. RGBA verhält sich hierbei genauso wie HSLA. RGBA im Einsatz

background: rgba(255, 0, 0, 0.2);
Textumbruch

text-wrap

Bessere Steuerung von Zeilenumbrüchen: Mit text-wrap können Zeilen an Interpunktionszeichen umgebrochen werden.

word-wrap

Mit word-wrap legt man fest wie Wörder umgebrochen werden dürfen. hyphenate bricht Wörter um, indem an die vorangehende Silbe ein "-" angehängt wird.

word-break

Die word-break-Eigenschaft legt fest, welche Zeilenumbruch-Beschränkungen für ein Element gelten. Diese Eigenschaft ist nur für asiatische Schriftarten interessant.

Textfluss

text-overflow

Was mit überfließendem Text geschehen soll, kann mit text-overflow gesteuert werden. Hier kann man z.B. automatisch bei zu langem Text Pünktchen "..." anhängen lassen. (Opera:-o-text-overflow )

Blöcke

text-align-last

Die Eigenschaft text-align-last gibt (falls text-align:justify; gesetzt ist) an, wie die letzte Zeile des Blocksatzes gehandhabt werden soll.

text-justify

Genauso verhält sich auch text-justify zu text-align. Diese Eigenschaft gibt an wie stark der Blocksatz erzeugt werden soll. Zum Beispiel nur durch die Zwischenräume der Wörter oder auch durch die Zwischenräume der Buchstaben.

Sonstige

Mit white-space-collapse kann, wie der Name schon sagt, die Handhabung von Leerzeichen gesteuert werden.

Die Eingeschaften text-align, letter-spacing und word-spacing erhalten weitere Werte.

text-kashida-space ist eine Eigenschaft die noch undefiniert ist. Unter Umständen kommt diese auch gar nicht im CSS3 zum Einsatz.

WebFonts

@font-face

Mit @font-face kann eine beliebige Schriftdatei auf einem Server angegeben werden, die dann heruntergeladen und vom Browser verwendet wird. Zu beachten ist hierfür aber besonders die Lizenzart der Font.

Dies war eigentlich schon seit sehr langer Zeit in der CSS2 Spezifikation, wurde aber mangels Browserunterstützung in CSS 2.1 wieder entfernt.

So sieht der Einsatz von Webfonts aus (funktioniert in Safari 3)
@font-face {
font-family: "Fertigo";
src: url(http://www.taptaptap.com/Fertigo.otf)
format("opentype");

Neuste WebKit-Versionen (Safari 3) enthalten diese Funktion, Schriften dynamisch nachzuladen. Der Internet Explorer unterstützt seit Version 4 das nachladen von Schriftarten im eigenen .eot-Format.

Unterkategorien

Die Entwicklung von Cascading Stylesheets (CSS) bleibt nicht stehen und so liegt der Entwurf für CSS 3 bereits seit längerem auf dem Tisch des World Wide Web Consortium (W3C). Diese nächste Generation beinhaltet zahlreiche Verbesserungen, die die Layoutentwicklung entscheidend beeinflussen werden.

CSS Templates zur freien Verwendung.

Grundlegende CSS Techniken - wie Bildersetzung, Selektoren und CSS Hacks

Beschreibung von SuperHTML als HTML und CSS Editor

feed-image