CSS3 Effekte

In diesem Blog geht es vorrangig um CSS3 Effekte.


Vorgestellt werden diverse CSS3 Übergänge, Transformationen und Animationen, welche mittels Mouseover bei Bedarf hervorgerufen werden.


Neben den zahlreichen visuellen Beispielen findest Du auch gleich den dazugehörigen Quellcode.


Denn kannst Du frei verwenden und natürlich auch modifizieren für was auch immer Du willst.


CSS3 ist eine wahre Bereicherung. Es erleichtert das Designen von modernen Webseiten, geht schnell, ist effizient und es läßt nicht selten das Besucherherz ein wenig höher schlagen. Mit CSS3 kann man einige nette Effekte ins Leben rufen, wofür man früher zumeist auf Javascript oder Flash zurückgreifen mußte.



Ein Wort zu Anbieter-Präfixen (vendor prefixes)



Bevor wir durchstarten, möchte ich Euch eine Übersicht zu den Präfixen verschiedener Anbieter [-webkit-|-moz-|-o-|-ms-] geben, die Du auf dieser Seite finden. Der Grund dafür ist, dass Du nicht alle Präfixe überall einfügen müssen. Zum Beispiel kommt Firefox seit dem Release im Oktober 2012 ohne das Präfix -moz- bei Transformationen aus.


Willst Du jedoch unbedingt im IE9 verfügbar machen, so mußt Du -ms- zusätzlich berücksichtigen. Ich nutze hier nur Präfixe, die im Hinblick auf Gegenwart und Zukunft Sinn machen. Doch falls Du Rückwärtskompatibilität gewährleisten möchtest, mußt du einen Blick in folgende Tabelle machen und Du fügst den Wert entsprechend in Deinen Code ein.



Typ Berücksichtigen Rückwärtskompatibilität Für Version Erschienen
transform (2d) -webkit- -moz-
-o-
-ms-
FF <= 15







Opera <= 12
IE 9
10/2012







10/2012
03/2011
transform (3d) -webkit- -moz- FF <= 15 10/2012
transition -webkit-







(für Android/Blackberry)
-moz-







-o-
FF <= 15







Opera <= 12
10/2012







10/2012
animation -webkit- -moz- FF <= 15 10/2012
backface-visibility -webkit- -moz- FF <= 15 10/2012
@keyframes -webkit- -o- Opera <= 12 10/2012
box-shadow - -webkit-







(Für zahlreiche Browser)
Verschiedene Verschiedene



Wie Du unschwer erkennen kannst, besteht kein Grund mehr dazu, alle möglichen Präfixe anzubieten. Diese Zeiten sind glücklicherweise vorbei. Vor allem, wenn man bedenkt, dass die meisten modernen Browser sich automatisch (oder zumindest halbautomatisch) auf die neueste Version aktualisieren. Allgemein gesprochen reicht es für so ziemlich alles vollkommen aus, -webkit- zusammen mit der präfixlosen Version anzubieten. Da das nun geklärt ist, machen wir uns gleich ans Werk. Tauchen wir gemeinsam ein in die Welt von CSS3!

datei_1497450110.gif
7a30da547fd63f32e0a58f206bef6720d929e947.jpg


Nicht vergessen wenn euch ein Thema gefällt oder hilfreich ist dann klickt


"Bitte kein Support per PN!!"
"Samstag & Sonntag ist Ruhetag!!"
"Da ich noch ein Privatleben habe!!"