CSS3 Demos

Das wird mal die Seite mit den CSS3 Demos, irgendwo muss ich mich austoben. Ich habe CSS2 auswendig gelernt, konnte 1 und 2 unterscheiden. Ich bin fasziniert von CSS3, habe aber gerade nicht so den Drang zu gehabt, bin aber nicht taub und auch kein HTML5 oder CSS3 Hasser, die es auch gibt.

Was ich hier zeigen sollte ist, wie man unter einem Ausschnitt (dem Viewport) eine Translation eines grossen Elements durchfuehrt. Am besten zu einem Swipe. Das macht den Custom Scroller aus. Aber die "Translation unter dem Ausschnitt, dass man das Dokument unter dem Ausschnitt bewegt" koennt ihr euch auch so merken, oder? Da brauch ich das Dokument jetzt nicht machen, oder?

div { width:100px; height:100px; background:lightgrey; border:1px solid black; color:black; word-wrap: break-word; float:left; overflow:hidden; margin:5px; }
.radius { border-radius: 25px; }
.box-shadow { box-shadow: 5px 5px darkred; }
.text-shadow { text-shadow: 5px 5px 5px darkgreen; }
         
Das ist ein Artikel-Header

CSS Properties

CSS hat mehrere hundert moegliche Properties in einer CSSDeclaration.

display none, block, inline
position static, inherit, relative, absolute, fixed
top, left, right, bottom Abstand der Box, relativ zur position Angabe, zu den Raendern des offsetParents.
margin, margin-left, margin-top, margin-bottom, margin-right
padding, padding-left, padding-top, padding-bottom, padding-right
border 1px solid black [== border-width border-style border-color]
border-radius, border-radius-top-left, border-radius-top-right, border-radius-bottom-left, border-radius-bottom-right
float left, right
clear left, right, both

Hier schreibe ich was ueber die affinen Transformationen, und die Uebergaenge zwischen CSS-Zustaenden mit Transitions

transform scale, skew, rotate, translate
transition

Hier schreibe ich dann nochmal was ueber Animation und Keyframes (was nicht in jedem Browser ging, als ich es das letzte mal fuer eine Vitrine einsetzte..

animation
@keyframes [number] [cssdecl]

Dann sollte ich das, was ich in dom.html schreiben will, mit dem CSSOM, auch nochmal hier schreiben, das wird eine Kombinationsaufgabe, wo ich beide Dokumente bearbeite.

JavaScript element.Property Werte Beschreibung Beispiel
offsetTop, offsetLeft
clientTop, clientLeft

JavaScript darf nicht fehlen.

    var style = document.createElement("style");
    style.textContent = "* { outline: 1px solid darkred; }";
    (document.head || document.body).appendChild(style);

Hier kommt das Exempel vor: Ein anders Dokument zu CSS und lib (gerade entdeckt und nur kurz verlinkt)

Referenzen - bislang keine - aber ich denke - die CSS 3 Module -