Sidebar Menü

  • Statistik
  • Karte
  • NO NO-Liste
  • Yes Liste von "A" bis "D"
  • Yes Liste von "E" bis "J"
  • Yes Liste von "K" bis "N"
  • Yes Liste von "O" bis "Z"

  • Über uns
  • Zum Kontaktformular
    • Achtet bitte darauf User erst zu Begrüßen wenn sie sich vorgestellt haben.
      Bei nicht einhalten dieser Info folgt eine Verwarnung!! -Zum Thema-

    CSS3 Effekte

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Created by Freepik
      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.


      TypBerücksichtigenRückwärtskompatibilitätFür VersionErschienen
      transform (2d)-webkit--moz-
      -o-
      -ms-
      FF <= 15


      Opera <= 12
      IE 9
      10/2012


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


      (für Android/Blackberry)
      -moz-


      -o-
      FF <= 15


      Opera <= 12
      10/2012


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


      (Für zahlreiche Browser)
      VerschiedeneVerschiedene



      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!

      Über den Autor

      Ich Lebe seit 1995 in einer Beziehung wir haben keine Kinder aber dafür 5 Ratten,
      1 Widderzwerg & Zwergkaninchen

      Hab ihr fragen zu Hack`s für das WBB Lite 1.0.2pl3 oder wollt ihr was ändern am
      WBB 2,3,6 - WBB Lite 2 - WBB 3.1.8 - WBB 4.x.x
      dann her da mit ich helfe euch auch bei Html, CSS, PHP, BBC & MySQL Codes.

      Ich arbeite mit

      Grafikprogramm:
      PI-X3, PSP, Poser7, Gimp2, Adobe Photoshop CS5.1, Adobe Flash Professional CS5.5,
      Adobe Illustrator CS5.1, Inkscape 0.91, Ulead GIF Animator 5.05 & Xara3D6

      Codeprogramm: Notepad++, Microsoft Office FrontPage 2003& WinMerge



      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!!"

      66 mal gelesen

    Kommentare 0

    LiveZilla Live Chat Software