CSS3 eröffnet neue Dimension der Layoutgestaltung - 3D ist da


 
Das erstellen einer Homepage macht immer wieder Spass. Natürlich könnte man ganz einfach auf vorgefertigte Layouts zu greifen, aber damit ist das Ergebnis schon von vorne herein nur Massenware.
Layout wählen
Will man sich aus der Masse hervor heben, muss man sich schon etwas Mühe geben. Dann muss man auch seine dunkle Seite mit langsam wechselndem Hintergrundbild nicht mehr verstecken ;)
Veröffentlichung in der Zeitschrift
während man in den guten, alten Zeiten noch für jede runde Ecke mühevoll eine Grafik erstellen und diese im Tabellenlayout positionieren musste, sind solche Dinge seit der Einführung von CSS3 mit wenigen Befehlen erledigt.
Layout wählen
Seit der Version 11 unterstützt selbst der Internetexplorer als der immer noch von weniger versierten Usern meist verwendeter Standartbrowser einen grossen Teil solcher Effekte.
Layout wählen
Allergings nur auf einer Instanz d.h. transformierte Elemente kann man nicht nocheinmal transformieren und so zB. einen 3 dimensionalen Kreis sich auch noch drehen lassen.
Layout wählen
Erkennen kann man den neuen Internet Explorer an der Browserkennung Trident. Bisher hatte er sich als MSIE gemeldet.
Layout wählen
Versiertere User setzen sowieso schon seit Jahren auf weniger toolbaranfällige Alternativen wie den Firefox oder Opera.
Layout wählen
Bisher musste daher immer eine "Fall-back" Version für andere Browser erstellt werden. Inzwischen benötigen nur noch der Apple Geräte und der Google Chrome Browser ein "Fall-back".
Layout wählen
während der Internet Explorer, der Firefox und der Opera Befehle wie "transform" inzwischen direkt umsetzen, benötigen Safari und Chrome die gleichen
Layout wählen
Befehle mit dem Zauberwort -webkit- davor. Dann klappt es selbst dort mit flüssigen "transition" Animationen ganz ohne Javascript.
Layout wählen

Mit CSS3 eröffnen sich nun buchstäblich neue Dimensionen für coole Layouts.
Layout wählen
CSS3 kann nämlich mit "transform" sogar 3D zeichnen. Im Gegensatz zu manuell verzerrten Grafiken von damals, bleiben die Elemente hierbei sogar anklickbar.
Layout wählen
Die drei Achsen x, y und z kann man anschliessend beliebig drehen und heran zoomen.
Layout wählen
Auf diese Weise lassen sich dreidimensionale Räume mit den Tasten w, s, a und d sogar betreten.
Layout wählen
Responsiv bekommt man die Seite recht einfach per Prozentangaben und Javascript, damit passt sich die grösse der Seite automatisch sowohl an winzige Smartphonebildschirme als auch an grosse Desktopmonitore an.
Layout wählen

Der Unterschied zwischen Java und Javascript ist grösser als zwischen Kran und Krankenschwester. Javascript ist sehr sicher und daher auf so gut wie allen Browsern aktiviert. Bei Firefox ist der Button zum deaktivieren sogar aus den Einstellungen verschwunden. Deaktivieren kann man es nur noch über about:config. Aber wozu?
 

Mit Javascript kann der Seitenbetreiber individuell auf unterschiedliche Anforderungen reagieren und zB, Werbung nur für versierte User mit Adblocker einblenden ;)
Wenn sie möchten, dass ich auch für Sie ein Layout erstelle, senden sie mir einfach eine Nachricht. Bis bald :)



 
  Diese Seite verwendet Cookies bei Nutzung.
X