CSS 3 segítségével különböző effekteket helyezhetünk hivatkozásra. Képeken látványos lehet és javasrciptet is megspóroljuk.
Legutóbb egy olyan megoldást készítettem, hogy a kép fekete-fehér, de ha rávisszük az egeret színes lesz.
A képen lévő hivatkozásba be kell írni: class="eff"
<a class="eff" href="hivatkozas"><img src="kep.jpg"></a>
Majd az oldal .css fájljába be kell másolni a következő sorokat:
.eff img{
-webkit-filter: grayscale(1);
border-radius: 50%;
}
.eff:hover img{
-webkit-filter: none;
}
Az .eff img adja meg az alap képet.
-webkit-filter: grayscale(1);
Ez a sor leveszi a színeket a képről.
border-radius: 50%;
A négyzet képet lekerekíti.
Az .eff:hover img-nél megadott tulajdonságok akkor jelentkeznek ha rávisszük az egeret.
-webkit-filter: none;
Ez a rész visszaadja a színeket a képhez.
Bal oldali kép az eredeti állapot, a jobb oldali pedig mikor rávisszük az egeret:
A következő css kód pedig elhalványítja a képet:
.eff img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.eff:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
A lenti oldalakon könnyen tudunk különféle CSS3 kódokat generálni:
http://html5-demos.appspot.com/static/css/filters/index.html
