SIEBEN – WordPress-Theme | Olli's Theme-Testblog

  • Mein Facebook-Profil
  • Mein Twitter-Profil
  • Mein Google+-Profil
  • Mein Xing-Profil
  • Mein Last.fm-Profil
  • Mein Youtube-Profil
  • Hol dir den RSS-Feed
Navigation anzeigen ↓
  • Herzlich willkommen
  • Shortcodes
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
  • ↑ Menü schließen

    Meistkommentierte Artikel

    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 1
      53
    • 14. Mai 2010
      [WordPress] Ein Gästebuch ohne Plugins
      27
    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 2
      15
    • 29. Juli 2011
      Hannspree Hannspad SN10T1 und die Custom Roms
      12

    [CSS3] Vom Lupeneffekt und drehenden Icons mit „transform“

    12. März 2011 9 Webdesign css | demo | html | internet | tutorial

    CSS3 setzt sich langsam aber sicher durch. Alle neuen Versionen der wichtigen Browser bieten – mehr oder weniger – Unterstützung für die neuen Funktionen. Es gibt sehr viele schöne und nützliche Dinge, die mit CSS3 Einzug halten. Ich habe da mal was zum Thema „transform“ vorbereitet…

    Verkleinern und vergrößern mit „scale“

    Syntax

    .box {
    transform: scale(1.5);
    }
    

    Shorthand

    Kürzer geht’s nicht.

    Browserunterstützung

    .box {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    }
    
    • Apple Safari 5+
    • Google Chrome 10+
    • Internet Explorer 9+
    • Mozilla Firefox 3.6+
    • Opera 11.1+

    Beschreibung

    Mittels transform und scale lassen sich Blockelemente skalieren. Die Skalierung wird ausgehend vom Faktor 1 angegeben. Einfaches Beispiel: ein Element mit 300 x 100 Pixeln (oben) wird auf den Faktor 1,5 vergrößert (Mitte) sowie auf Faktor 0,5 verkleinert (unten)

    Der Befehl dazu:

    .box {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    }
    

    bzw.

    .box {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    }
    

    Sofern nur ein Wert angegeben ist, werden die X- und die Y-Achse gleichermaßen skaliert. Es können aber auch unterschiedliche Werte, durch Komma getrennt, angegeben werden:

    .box {
    transform: scale(2,4);
    }
    

    Soll gezielt nur eine Achse skaliert werden, kann mit scaleX oder scaleY der entsprechende Wert gesetzt werden.

    Findet ihr langweilig?

    Wie wär’s mit Bildern, die bei :hover vergrößert werden? So eine Art Lupeneffekt. Mit dem folgenden Code skaliert ihr Bilder um den Faktor 1,5 bei :hover. Verlasst ihr das Bild mit der Maus, wird die ursprüngliche Größe wiederhergestellt.

    img {
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    -ms-transition: -ms-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    }
    img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    }
    

    Der Befehl transition ist für die animierte fließende Vergrößerung zuständig, indem die Skalierung über eine Zeitspanne (hier 0,4 Sekunden) erfolgt.

    Beim Skalieren gilt es jedoch zu beachten, dass die Bilder aufgezoomt werden. Je höher die Skalierung, desto pixeliger wird das Bild.

    Weitere Beispiele dazu findet ihr auf der Demoseite.

    Demo ansehen

    Blockelemente drehen mit „rotate“

    Syntax

    .box {
    transform: rotate(2deg);
    }
    

    Shorthand

    Kürzer geht’s nicht.

    Browserunterstützung

    .box {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    }
    
    • Apple Safari 5+
    • Google Chrome 10+
    • Internet Explorer 9+
    • Mozilla Firefox 3.6+
    • Opera 11.1+

    Beschreibung

    Mit transform und rotate dreht ihr Blockelemente. Die Drehung wird dabei, wie sollte es auch anders sein, in Grad angegeben. Positive Werte drehen das Element nach rechts, negative Werte nach links. Im obigen Beispiel drehen wir ein Element um 2 Grad im Uhrzeigersinn:

    Das sieht dann etwa so aus:

    Ein nettes Beispiel für diesen Effekt hab ich noch. Im Zusammenspiel mit transition lassen sich wunderschöne Dinge zaubern. So beispielsweise Bilder, die sich einmal um sich selbst drehen:

    img {
    -webkit-transition: -webkit-transform 1s ease-out;
    -moz-transition: -moz-transform 1s ease-out;
    -o-transition: -o-transform 1s ease-out;
    -ms-transition: -ms-transform 1s ease-out;
    transition: transform 1s ease-out;
    }
    img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    } 

    Hier wird das Bild innerhalb von 1 Sekunde um 360 Grad gedreht. Live-Beispiel und mehr dazu auf der Demo-Seite:

    Demo ansehen

    Leider bietet der Internet Explorer in Version 9 keine Unterstützung für transition. Daher ist auch keine Darstellung einer 360 Grad-Drehung möglich.

    Vielleicht für den ein oder anderen ganz interessant: diese Übersicht listet auf, welcher Browser in welcher Version Unterstützung für CSS3 und HTML5 bietet.

    Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:

    Übersicht CSS3
    Diese Artikel könnten dich ebenfalls interessieren
    • 1
      22. Mai 2012
      [WordPress] Theme „DREI“ steht bereit
    • 0
      19. Mai 2012
      [WordPress] Mehrere Sidebars nutzen
    • 1
      9. Mai 2012
      [WordPress] Mein neues Theme ‚ZWEI‘
    • 1
      23. April 2012
      [WordPress] ‚EINS‘ – Mein erstes WordPress-Theme

    9 Kommentare

    1. peterPan sagt:
      4. Januar 2012 um 08:22

      Ich finde die Anleitung ganz gut und hab es auch versucht nachzubilden was mir aber nur teilweise gelingt.

      Ich hab nen a-tag, der um ein img tag herum liegt und wollte damit auch eine lupengrafik einfliegen lassen, dies gelingt mir aber nicht, woran liegt das?

      [code]<a href="image.jpg" rel="nofollow"></a>[/code]

      Zum Antworten anmelden
      • Olli sagt:
        4. Januar 2012 um 13:46

        Du willst ein Bild mit Link einbinden und dieses bei :hover vergrößern, richtig? Probiers mal so:

        HTML
        [html]<a class="lupe" href="#"><img src="image.jpg">Hier geht’s weiter</a>[/html]

        CSS
        [css].lupe img {
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        }

        .lupe img:hover {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -o-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5);
        }[/css]

        Zum Antworten anmelden
    2. peterPan sagt:
      5. Januar 2012 um 05:41

      Hallo Olli,

      danke für das schnelle Feedback, dein Beispiel vergrößert jedoch nur das eigentliche Bild selbst. Warscheinlich hab ich mich zu undeutlich ausgedrückt bei ersten anlauf.

      Ich hab ein normales Bild das von einem Link umgeben ist. Wenn man mit der Maus über das Bild fährt, soll eine Lupengrafik über das bild einlaufen, um aufzuzeigen, dass man dieses Bild in einer lightbox gross betrachten kann.
      Das Lupenbild ist demnach eine extra grafik, über der eigntlichen Grafik. Ähnlich wie es bei deinem Demo-Buttons gemacht wird. Das Problem bisher ist, dass die Lupengrafik unter dem Bild dargestellt wird und auch ein z-index mich da bisher nicht weitergebracht hat.

      Hier ein Link, der mein Vorhaben verdeutlicht: (Maus über die Bilder bewegen)
      http://livedemo00.template-help.com/wordpress_36698/portfolio/

      viele Grüße, PeterPan

      Zum Antworten anmelden
      • Olli sagt:
        5. Januar 2012 um 18:44

        Okay. Dann hab ich dich missverstanden. Hast du einen Link zu deinem Projekt? Oder poste hier mal den Code.

        Gruß Olli

        Zum Antworten anmelden
    3. peterPan sagt:
      15. Januar 2012 um 10:41

      ich hab nun noch mal ganz von vorn begonnen. unter http://jsfiddle.net/vVUuU/
      aber ich hab da wohl noch nen denkfehler

      im grund möcht ich genau das erreichen, dass du mit deinem Demo buttons machst.. allerdings mit einem Bild und einer Lupe darüber.
      gehe ich deinem Beispiel nach, geht die lupe aber hinter das bild.. um die lupe zu sehen.. muss sie natürlich vor dem bild liegen.

      vielleich tkannst du ja mal bei ein wenig zeit ne Demo hochziehen.. wäre echt klasse!

      Zum Antworten anmelden
      • Olli sagt:
        15. Januar 2012 um 12:35

        Bitte sehr. Nur für dich: Transition-Lupe-Demo

        Gruß Olli

        Zum Antworten anmelden
    4. peterPan sagt:
      17. Januar 2012 um 04:38

      Hallo Olli,

      wow, dankeschön! Ich werd mal schauen, ob ich das ganze umgesetzt bekomme. Hab nämlich schon gesehen, dass dein Hauptbild als Hintergrundgrafik eingefügt ist, was selten der Fall ist in Contentbereichen (bg-bilder sind es ja in der Regel nur in layoutbereichen), meist ist es ja ein Container, der ein Bildelement beinhaltet. Und ich glaube genau darin liegt die grosse schwierigkeit (zumindest für mich).

      Zum Antworten anmelden
    5. peterPan sagt:
      19. Januar 2012 um 03:28

      ok- update.. funtkioniert auch mit nem bild als content… also ne perfekte Demo für beide Möglichkeiten…
      echt klasse von dir! thx

      Zum Antworten anmelden
    6. rainer sagt:
      25. Mai 2012 um 23:20

      Hi

      Super Beitrag.
      Würde aber in dem Artikel erwähnen das es Klug wäre die Bilder, die vergrößert werden bei Hover, im Html runter zu skalieren und auf Originalgröße „hovern“ zu lassen um unschöne „pixeleffekte“ zu vermeiden.

      bsp: ein bild soll von 100X100 x 2 „gehovert werden, scale x2 sollte das bild original 200×200 sein, per CSS oder Html aber 100×100 eingebunden werden.
      Runterskalieren geht immer schöner als rauf..

      lg rainer

      ps. super seite übrigens, hab mir einige beiträge als Anregung bzw, als copy and paste zum weiter verwenden und verfeinern, geholt 😉

      Zum Antworten anmelden

    Dein Kommentar zu diesem Artikel

    Abbrechen

    Du musst angemeldet sein, um einen Kommentar abzugeben.

    ← vorheriger Artikel
    nächster Artikel →
    • Archive

      • Juni 2012
      • Mai 2012
      • April 2012
      • März 2012
      • Februar 2012
      • Januar 2012
      • Dezember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • August 2011
      • Juli 2011
      • Juni 2011
      • Mai 2011
      • April 2011
      • März 2011
      • Februar 2011
      • Januar 2011
      • Dezember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • August 2010
      • Juli 2010
      • Juni 2010
      • Mai 2010
      • April 2010
      • Februar 2010
      • Januar 2010
      • Dezember 2009
      • November 2009
      • Oktober 2009
    • Meta

      • Anmelden
      • Beitrags-Feed (RSS)
      • Kommentare als RSS
      • WordPress.org
    • Neueste Beiträge

      • Willkommen zur Testfahrt
      • Letzte Chance nach einem Festplattencrash
      • Kleinstrechner MK802 mit Ice Cream Sandwich; gar nicht mal so teuer
      • [WordPress] Theme „DREI“ steht bereit
      • [WordPress] Mehrere Sidebars nutzen
    • Neueste Kommentare

      • Oliver bei Willkommen zur Testfahrt
      • Olli bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Lars bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Martin bei Kreiert euren eigenen Button und teilt diesen mit anderen
      • rainer bei [CSS3] Vom Lupeneffekt und drehenden Icons mit „transform“
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • Schlagwörter

      active directory android apple css demo dsl dvb games gimp guides hardware html id3-tag internet ipad iphone itunes littlebigplanet medienfreigabe modnation racers mp3 nas office phishing php playstation 3 plugins psn spam sql tablet tutorial tv twonky media server update upnp videos windows 7 windows media player windows server windows vista wlan wordpress xbmc xbox 360

    Seitenanfang ↑

    239 Artikel | 293 Kommentare

    Artikel RSS-Feed | Kommentar RSS-Feed

    © SIEBEN – WordPress-Theme angetrieben von WordPress

    Theme 'SIEBEN' von Oliver Gast