2015. január 2., péntek

CSS – effektek kép hivatkozáson

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

Nincsenek megjegyzések:

Megjegyzés küldése