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.

transformationen

ok. also hier beginnt es wirklich verrückt zu werden…
mit transfom: scale(.5) rotate(45deg) skew(30deg 0deg);
lassen sich boxelemente skalieren (scale), drehen (rotate) und
anschrägen(skew) und das funktioniert einfacher und besser als man glauben mag.


div {
transfom: scale(.6) rotate(20deg) skew(25deg 10deg);
-moz-transform: scale(.6) rotate(20deg) skew(25deg, 10deg);
-webkit-transform: scale(.6) rotate(20deg) skew(25deg, 10deg);
}

Strichmann

eine einfache farbige box mit einem bild und etwas text daneben.


Strichmann

eine einfache farbige box mit einem bild und etwas text daneben.



 

wir bauen einen lustigen würfel

Text 1

Text 1

Text 3

wie man erahnen kann bieten sich ungeahnte möglichkeiten für coole spielereien.
aber genau damit ist eben auch allergrößte vorsicht geboten. ich sehe schon kunden deren wunsch es ist
sämtliche texte einer website blinkend auf gedrehten bausteinen zu präsentieren, die dann am screen hin und herschweben. au backe!


div.wuerfel {
width:100px;
height:100px;
position:absolute;
}
div#vorne {
background-color:#2a838c;
position:absolute;
top:95px;
left:51px;
}
div#oben {
background-color:#82b6bb;
-moz-transform: scale(.7) rotate(-45deg) skew(45deg, 0deg);
top:20px;
left:75px;
}
div#rechts {
background-color:#1c636a;
-moz-transform: scale(.7) rotate(45deg) skew(0deg, 45deg);
top:70px;
left:125px;
}

transition

mit css3 wird es möglich sein kleine animationen und übergänge vom browser ausführen zu lassen. dafür wird unter anderem der befehl
transition: neu eingeführt. bisher wird die funktionalität nur in safari und chrome gewehrleistet,
soll aber mit dem ie9 auch dort einzug erhalten.

div:hover {
background-color:#0099FF;
-webkit-transition: background-color 3s 0s ease-in;
}

eine box mit text und hintergrundfarbe die beim darüberfahren langsam wechselt

animationen

wie man sehen kann wird das div durch die animation nach uten aufgedrückt.
die anwendungsgebiete sind sehr vielfältig. und das beste ganz ohne javascript. denkbar ist ein einfaches akkordeon,
oder gar ein trickfilm wenn man den gedanken zu ende denken möchte.

eine detailierte dokumentation zum thema gibt es wie immer beim w3c unter dieser url: http://www.w3.org/TR/css3-animations/

div {
-webkit-animation-name: track;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes track {
0% {
margin-top:0px;
}
25% {
margin-top:100px;
}
50% {
margin-top:100px;
margin-left: 400px;
}
75% {
margin-top:100px;
margin-left: 200px;
}
100% {
margin-left:0px;
}
}

eine box die über den bildshirm wandert

« »