5202

ein Blog über technische Fragen zu Blogger

Aus meinem Skizzenbuch

12. November 2011 /

von



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 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?

Fehler? Anregungen? Offene Fragen?

Nichts klappt? Ihr versteht nur Bahnhof? Im Post sind Fehler? Ich freu mich über eure Anregungen, Kommentare und Fragen!