Raşit Tunca Board
CSS ile Resimlere Efekt Verme - Printable Version

+- Raşit Tunca Board (https://rasittunca.org)
+-- Forum: GENEL KÜLTÜR BİLGİLERİ (https://rasittunca.org/forumdisplay.php?fid=10)
+--- Forum: GENEL KÜLTÜR BiLGiLERi MAiN (https://rasittunca.org/forumdisplay.php?fid=229)
+---- Forum: Webmaster Bilgileri (https://rasittunca.org/forumdisplay.php?fid=232)
+---- Thread: CSS ile Resimlere Efekt Verme (/showthread.php?tid=2356)

CSS ile Resimlere Efekt Verme - RasitTunca - 07-24-2018

[Image: CSS-ile-Resimlere-Efekt-Verme.png]

CSS ile Resimlere Efekt Verme

Bazen resimlerinizin efektlere ihtiyaçları oluyor,
photoshop bilmeyen arkadaşlarımız oluyor,
bu yüzden basit bir kod ile resminizi efektlendirebilirsiniz...


1. Resme Siyah-Beyaz Efekti Verme
Code:
body img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
body img:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}
2. Resme Bulanıklık Efekti Verme

Code:
body img {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
body img:hover {
filter: blur(0);
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);
}

3. Resme Şeffaflık Efekti Verme
Code:
body img {
opacity:0.3;
}
body img:hover {
opacity:1;
}

4. Resme Zoom Efekti Verme
Code:
body img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
body img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

Bu kodlar sayesinde fotoğraflarınız güzel gözüksün. Teşekkürler...