Anzeige

CSS3 Grayscale Transition für Images

CSS3 Grayscale Transition für Images | PSD-Tutorials.de

Erstellt von xuLLix, 22.02.2012.

  1. xuLLix

    xuLLix Dr. der Blödsinnologie

    1
    Dabei seit:
    17.01.2010
    Beiträge:
    565
    Geschlecht:
    männlich
    Ort:
    Delmenhorst
    Software:
    PS/DW
    Kameratyp:
    EOS 650D
    CSS3 Grayscale Transition für Images
    Hallo,

    ich habe gerade mein Konzept für eine neue Portfolioseite fertig. Und ich möchte es Minimalistisch realisieren mit Ribbons und anderem Klimbim...

    Bilder sollen Grau sein und wenn man sie "hovert" sollen sie Farbig werden.

    Da ich, um mal ein bisschen tiefer in die Materie zu kommen, alles in CSS3 und HTML5 realisieren will, komme ich an diesem Punkt nicht weiter.

    Ich habe nur das hier gefunden... und frage mich, ob das nicht auf ohne JQuery geht... der Tooltip geht ja auch ohne JQuery...
    Vielleicht habt ihr ja eine Idee und könnt mir fix helfen... google spunkt immer nur diese Versionen aus... was daran liegen könnte, das ich nicht genau weiß wonach ich googeln soll :)

    Bin für alle Tipps dankbar, auch für die bösen "let me google that for you" Tipps ;)
     
    #1      
  2. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    CSS3 Grayscale Transition für Images
    AW: CSS3 Grayscale Transition für Images

    was mir auf die schnelle einfällt: http://dabblet.com/gist/1886678

    ein div in ein anderes verschachtelt, den inneren das greyscalebild als bg geben, dem anderen das farbbild.(am besten als sprite..) Bei hover das inner per opacity ausblenden.
     
    #2      
  3. xuLLix

    xuLLix Dr. der Blödsinnologie

    1
    Dabei seit:
    17.01.2010
    Beiträge:
    565
    Geschlecht:
    männlich
    Ort:
    Delmenhorst
    Software:
    PS/DW
    Kameratyp:
    EOS 650D
    CSS3 Grayscale Transition für Images
    AW: CSS3 Grayscale Transition für Images

    Darauf bin ich auch schon gekommen :) das mit einer Überlagerung zu realisieren... aber irgendwie hatte ich gehofft, dass es schöner geht :)

    Vielleicht fällt den anderen ja was ein.

    Vielen für die Hilfe Simonpicos


    Was meinst damit... muss ich mal googlen :)
     
    Zuletzt bearbeitet: 22.02.2012
    #3      
  4. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    CSS3 Grayscale Transition für Images
    AW: CSS3 Grayscale Transition für Images

    http://css-tricks.com/css-sprites/


    für webkit nightlies (heist das bei denen auch schon so?? ) gibt es die css filter() funktion. Aber natürlich nicht alltagstauglich. Sonst fällt mir nichts ein. ABber vielleicht hat ja noch jemand ne andere idee..
     
    #4      
  5. xuLLix

    xuLLix Dr. der Blödsinnologie

    1
    Dabei seit:
    17.01.2010
    Beiträge:
    565
    Geschlecht:
    männlich
    Ort:
    Delmenhorst
    Software:
    PS/DW
    Kameratyp:
    EOS 650D
    CSS3 Grayscale Transition für Images
    AW: CSS3 Grayscale Transition für Images

    Hatte mir die CSS-Sprites Technik auch schon angesehen... aber danke nochmal...

    Ich muss mich da nochmal mit beschäftigen... Deine Methode ist auch gut... Dachte halt man könnte sich das zweite Bild sparen, wobei ich sowieso nur mit CSS Arbeite und somit die Downloadzeiten im Rahmen bleiben sollten auch wenn ich noch ein zweites Thumbnail einbaue :)
     
    #5      
  6. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    CSS3 Grayscale Transition für Images
    AW: CSS3 Grayscale Transition für Images

    soweit ich weiß gibt es noch svg filter. leider nur für den firefox :/ die filter eigenschaft unterstützen, soweit ich das mitbekommen habe leider auch in naher zukunft die wenigsten browser mit den standard vorgaben des w3c (u.a. grayscale).

    EDIT: wegen svg: http://stackoverflow.com/a/4028908

    EDIT2: hier nochmal was ähnliches: http://stackoverflow.com/a/8896020
     
    Zuletzt bearbeitet: 22.02.2012
    #6      
  7. xuLLix

    xuLLix Dr. der Blödsinnologie

    1
    Dabei seit:
    17.01.2010
    Beiträge:
    565
    Geschlecht:
    männlich
    Ort:
    Delmenhorst
    Software:
    PS/DW
    Kameratyp:
    EOS 650D
    CSS3 Grayscale Transition für Images
    AW: CSS3 Grayscale Transition für Images

    Um es aber auf alle Browser ausweiten zu können wird mir die JQuery-Variante oder die Variante von Simonpicos helfen.

    Danke aber auch für deine Mühe SineTempore
     
    #7      
Seobility SEO Tool
x
×
×