Resimlere Efekt verme Kodları (Css ile)

[Şükrü K.]

Admin KP > Şablon & Stil > Temalar > Temanız > Global.Css En Altına Ekleyin.

Kod: Tümünü Seç Tümünü Kopyala

img {
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
        }

        .blur {
            filter: blur(10px);
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            -o-filter: blur(10px);
            -ms-filter: blur(10px);
        }
        .blur:hover {
            filter: blur(0);
            -webkit-filter: blur(0);
            -moz-filter: blur(0);
            -o-filter: blur(0);
            -ms-filter: blur(0);
        }

        .brightness {
            filter: brightness(0.2);
            -webkit-filter: brightness(0.2);
            -moz-filter: brightness(0.2);
            -o-filter: brightness(0.2);
            -ms-filter: brightness(0.2);
        }
        img.brightness:hover{
            filter: brightness(0);
            -webkit-filter: brightness(0);
            -moz-filter: brightness(0);
            -o-filter: brightness(0);
            -ms-filter: brightness(0);
        }

        .saturation {
            filter: saturate(400%);
            -webkit-filter: saturate(400%);
            -moz-filter: saturate(400%);
            -o-filter: saturate(400%);
            -ms-filter: saturate(400%);
        }
        img.saturation:hover{
            filter: saturate(100%);
            -webkit-filter: saturate(100%);
            -moz-filter: saturate(100%);
            -o-filter: saturate(100%);
            -ms-filter: saturate(100%);
        }

        .contrast{
            filter: contrast(300%);
            -webkit-filter: contrast(300%);
            -moz-filter: contrast(300%);
            -o-filter: contrast(300%);
            -ms-filter: contrast(300%);
        }

        img.contrast:hover{
            filter: contrast(100%);
            -webkit-filter: contrast(100%);
            -moz-filter: contrast(100%);
            -o-filter: contrast(100%);
            -ms-filter: contrast(100%);
        }

        .invert {
            filter: invert(100%);
            -webkit-filter: invert(100%);
            -moz-filter: invert(100%);
            -o-filter: invert(100%);
            -ms-filter: invert(100%);
        }

        img.invert:hover {
            filter: invert(0);
            -webkit-filter: invert(0);
            -moz-filter: invert(0);
            -o-filter: invert(0);
            -ms-filter: invert(0);
        }

        .grayscale {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
        }

        img.grayscale:hover {
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -o-filter: grayscale(0);
            -ms-filter: grayscale(0);
        }

        .sepia {
            filter: sepia(100%);
            -webkit-filter: sepia(100%);
            -moz-filter: sepia(100%);
            -o-filter: sepia(100%);
            -ms-filter: sepia(100%);
        }
        img.sepia:hover {
            filter: sepia(0);
            -webkit-filter: sepia(0);
            -moz-filter: sepia(0);
            -o-filter: sepia(0);
            -ms-filter: sepia(0);
        }

Bu Kodlar İse Hangi Resme Yapacaksanız Onlara Göre Yaparsınız :)

Kod: Tümünü Seç Tümünü Kopyala

<section>
        <img   class="blur" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

        <img   class="brightness" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

        <img   class="saturation" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

        <img   class="contrast" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

        <img   class="invert" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

        <img   class="grayscale" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">

        <img   class="sepia" src="http://farm6.staticflickr.com/5115/7233791428_cc5d9edc3d_m.jpg">
    </section

Demo: http://paylastir.10tl.net/showthread.php?tid=105

[Secilmis42]

Sağol Bölüm Şefim. :)

[Kyoya]

teşekkürler güzel uygulayıcam metin2de yaazıyorum cevap vermiyosun ? :D

[Ripbyrustavi]

şükrü abi nasıl yapcaz mycode gibimi ?

[Şükrü K.]

şükrü abi nasıl yapcaz mycode gibimi ?

Hayır Sadece Global.Css Kat Verdigim Kodu Sonra 2'Ci Sıradaki Kodlarla Hangi Kodu Ton Rengini Vermek İstiyorsan Onu Ayarlarsın :)

[MonsteR]

Teşekkürler Güzel Paylaşım Bu kodları değiştirerek daha başka efektler de verebiliriz

[LastWorld]

Teşekkürler .

[Şükrü K.]

Teşekkürler Güzel Paylaşım Bu kodları değiştirerek daha başka efektler de verebiliriz

Evet Başka Efektlerde Yapabilirsiniz.