Hier eine Skizze zur CSS3 Eigenschaft
transform
- reine Spielerei. Jeder Buchstabe ist eine Grafik und wird beim drüberfahren mit der Mause anders transformiert. Vor ein paar Jahren hätte es für solche Effekte noch Javascript gebraucht, heute reichen ein paar Zeilen CSS.
Solche Skizzen sind sehr lehrreich. HTML/CSS lernt man nicht durch Lehrbücher, sondern indem man ausprobiert, rumspielt, versucht Ideen umzusetzen und Blogger ist dafür eine gute Plattform. Ich möchte in Zukunft öfters solche Skizzen posten - gedacht sind sie nicht als Tutorial, sondern als Ausgangspunkt für alle, die Lust haben sich selber mit dem Thema zu beschäftigen.
To whom it may concern, here is my code:
Der Code
<style> #skala { text-align: center; } #skala img:not(.deferred) { background-color: transparent; border: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); padding: 0px; } #skala img { height: 110px; width: 110px; border: 0 !important; display: inline; opacity: 0.8; /* Chrome 4 , FF2 , Saf3.1 , Opera 9 , IE9, iOS 3.2 , Android 2.1 */ filter: alpha(opacity=80); /* IE6-IE8 */ } #skala img#A, #skala img#O, #skala img#T { -webkit-transition: all 2.3s ease-out; /* Saf3.2 , Chrome */ -moz-transition: all 2.3s ease-out; /* FF4 */ -ms-transition: all 2.3s ease-out; /* IE9b */ -o-transition: all 2.3s ease-out; /* Opera 10.5 */ transition: all 2.3s ease-out; } #skala img#U { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } #skala img#B { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #skala img#A:hover { -webkit-transform: rotate(360deg) scale(0); -moz-transform: rotate(360deg) scale(0); -ms-transform: rotate(360deg) scale(0); -o-transform: rotate(360deg) scale(0); opacity: 0 !important; filter: alpha(opacity=0) !important; -webkit-transition: all 1.8s ease-in; -moz-transition: all 1.8s ease-in; -ms-transition: all 1.8s ease-in; -o-transition: all 1.8s ease-in; transition: all 1.8s ease-in; } #skala img#B:hover { -webkit-transform: scale(1.1)translate(0px, -4px); -moz-transform: scale(1.1)translate(0px, -4px); -ms-transform: scale(1.1)translate(0px, -4px); -o-transform: scale(1.1)translate(0px, -4px); opacity: 1 !important; filter: alpha(opacity=100) !important; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #skala img#O:hover { -webkit-transform: scale(0) translate(-600px, -400px); -moz-transform: scale(0) translate(-600ppx, -400px); -ms-transform: scale(0); - o-transform: scale(0) translate(0px, -400px); opacity: 0 !important; filter: alpha(opacity=0) !important; -webkit-transition: all 1.8s ease-in; -moz-transition: all 1.8s ease-in; -ms-transition: all 1.8s ease-in; -o-transition: all 1.8s ease-in; transition: all 1.8s ease-in; } #skala img#U:hover { -webkit-transform: skew(25deg,4deg); -moz-transform: skew(25deg,4deg); -ms-transform: skew(25deg,4deg); -o-transform: skew(25deg,4deg); transform: skew(25deg,4deg); -webkit-transition: all 0.8s ease-in; -moz-transition: all 0.8s ease-in; -0-transition: all 0.8s ease-in; transition: all 0.8s ease-in; } #skala img#T:hover { -webkit-transform: rotate(-1080deg); -moz-transform: rotate(-1080deg); -ms-transform: rotate(-1080deg); -o-transform: rotate(-1080deg); background: red; opacity: 1 !important; filter: alpha(opacity=100) !important; -webkit-transition: all 1.8s ease-in; -moz-transition: all 1.8s ease-in; -ms-transition: all 1.8s ease-in; -o-transition: all 1.8s ease-in; transition: all 1.8s ease-in; } </style> <div id="skala"> <img id="A" src="http://goo.gl/iMct1" /><img id="B" src="http://goo.gl/WhbFu" /> <img id="O" src="http://goo.gl/ZrkqO" /><img id="U" src="http://goo.gl/L7gSx" /> <img id="T" src="http://goo.gl/jNqW6" /></div>
Anwendung
Der Code funktioniert in allen Blogger-Layouts - nehmt den Code als ganzes und kopiert ihn im HTML-Editor in den Post oder in ein HTML/Java Gadget.
Der Code ist im Grunde selbsterklärend ... auf den ersten Blick verwirrend. Um die Eigenschaft
Ich habe jedem Buchstaben eine eigene
transform
in den vier gängigen Browsern zum laufen zu bringen, muss [noch] für jeden Browser eine eigen Syntax geschrieben werden. Daher wirkt der Code zunächst so aufgebläht.Ich habe jedem Buchstaben eine eigene
id
gegeben, die genauso lautet wie der Buchstabe selber - img#A
ist also der Selektor zum Buchstaben A. Ihr müsst beachten, dass zu jeder id
ein ease-in
und ein ease-out
gehört, d.h. eine Regel zum einblenden und eine Regel wieder umgekehrt zurück.
Die Eigenschaft
transform
funktioniert in allen Browser, aber unterschiedlich gut. Das beste Ergebnis liefern die Webkit-Browser Safari und Chrome, am miesesten funktioniert das natürlich im Internet Explorer, wer hätte es anders erwartet?