das web ist eh schon zu groß

in diesem workshop stelle ich einige neuerungen in css3 vor. natürlich werde ich hier nicht sämtliche neue funktionen aufgreifen, weshalb ich mich auf funktionen beschränke, die mir bei der täglichen arbeit, dem coden von websites, am meisten helfen. das hauptaugenmerk liegt dabei auf designelementen für die photoshop teils nicht mehr benötigt wird oder varianten die zuvor nur umständlich zu lösen waren und jetzt einfach funktionieren.

bei fast allen vorgestellten techniken mache ich die rechnung ohne den internet explorer. natürlich kann man hier mit workarounds arbeiten, aber, da ja das fehlen von design die funktion nicht beinträchtigt, muss man überlegen wann das sinnvoll ist.

---

border-colors

wie oft hatte ich mir schon gewünscht rahmen von boxen unterschiedlich einfärben zu können oder sogar einen doppelten rahmen zu vergeben. ist jetzt prinzipiell möglich, wird
aber bisher leider nur vom firefox unterstützt. beginnend mit der ersten farbangabe, von außen nach innen, schwarz, rot, grün, blau. und so sieht das ganze aus:

div {
border: 4px solid black;
-moz-border-top-colors: #000 #f00 #0f0 #00f;
-moz-border-left-colors: #000 #f00 #0f0 #00f;
-moz-border-right-colors: #000 #f00 #0f0 #00f;
-moz-border-bottom-colors: #000 #f00 #0f0 #00f;
}


border-grafiken

wem die üblichen angaben dashed, dotted oder solid für border nicht ausreichen kommt hier voll auf seine kosten.
im folgenden beispiel zeige ich wie ich die beispielgrafik auf ein div anwenden kann.


div#box4 {
width:250px; height:80px;

border: 23px solid #cccccc;

-moz-border-image: url(images/border.png) 23 34 23 34 stretch stretch;
}

die angabe stretch ist im beispiel unglücklich gewählt da mein div größer wird als die ausgangsgrafik.
stretch zerrt oder staucht die grafik auf die jeweilige kantenlänge. statt stretch
lässt sich auch der parameter repeat verwenden. dafür muss die ausgangsgrafik an ihren kanten dann natürlich kachelbar sein.
um die einzelnen ecken und kanten manuell bestimmen zu können stellt css3 außerdem folgende befehle zur verfügung, die leider noch nicht
breit unterstützt werden:


border-top-left-image:

border-top-image:
border-top-right-image:
border-left-image:

border-right-image:
border-bottom-right-image:
border-bottom-image:
border-bottom-left-image:


@font-face

mit @font-face bietet css3 eine komfortable möglichkeit sonderschriften einzubetten ohne den umweg über cufon
oder sifr gehen zu müssen. die rechtlichen aspekte müssen hier natürlich unbedingt
beachtet werden! aus diesem grund bietet google für die @font-face methode seit kurzem eine eigene schriftensammlung an, die im web frei verwendet werden darf.

beispiel für die native verwendung von @font-face:


@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

h4 {
font-family: ‘Anivers’, Helvetica, Sans-Serif;
}

---


/*aufruf der api im seitenheader*/

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/*style*/
h4 {
font-family: 'Tangerine', serif;
font-size: 48px;
}

---

sämtliche verfügbaren fonts sowie eine ausführliche dokumentation findet man hier bei google.
eine weitere möglichkeit schriften auf ganz ähnliche weise einzubinden bietet kernest.com. hier gibt es bereits ein größeres schriftarchiv auf das man zugreifen kann. die jeweilige lizenz muss unbedingt beachtet werden!

mehrspaltiger textfluss

unterschiedliche divs mit floats anlegen um texte mehrspaltig darzustellen gehört endgültig der vergangeheit an.
dank column-count!


div {
column-count: 3;
column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
column-rule: 1px solid #000;
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
}

column-count: legt die anzahl der spalten fest, column-gap: definiert den abstand zwischen den spalten und column-rule: lässt eine vertikale trennlinie zwischen den spalten definieren.