Kpeffektek
2015.04.29. 10:47, Enma22
A kpeknek adhatunk a szoksos effekteken kvl (ttetszsg, keret, mret) egyb dizjnokat is. Ezeket alkalmazhatjuk nmagukban, vagy egy hover (rviszem az egeret) effekttel kombinlva. Akr a linkelt kpeken is lehet alkalmazni.
De ltalban minden kpre hatnak, ha nincsen kln besorolsuk (class).
Plda kpnek j lesz most ez:
Mr adott kp, ezen fogom a tbbi csodt alkalmazni.
1. Szrkernyalatos kp:
img {
-webkit-filter: grayscale(100%);
}
A webkit az a Chrome-ot jelli. Szerintem ha oda van rva, hogy -moz- esetleg -ms- stb, akkor azokban is alkalmazza.
Olyankor persze kln sorokat kell rni nekik.
Internet Explorer: -ms-
Chrome: -webkit-
Opera: -o-
Mozilla: -moz-
Sok kd akkor is mkdik, ha nmagban csak ennyi van rva:
img {
filter: grayscale(100%);
}
De ezt ki kell prblni, n Chrome-ban dolgozom, szval nekem nagyon j most a webkit.
Rendben is volnnk, ez egy szrke rnyalatos kp lett gy.
2. Szpia kp:
img {
-webkit-filter: sepia(100%);
}
3. Fnyer:
Itt lehet vilgostani s sttteni is, attl fgg, hogy a %-ot milyen eljellel adom meg.
img {
-webkit-filter: brightness(50%);
}
4. Kontraszt:
img {
-webkit-filter: contrast(200%);
}
Termszetesen a %-okon nyugodtan lehet varilni.
s ezeket meg lehet adni gy is, hogy csak akkor vltoznak, ha rviszed az egeret:
img:hover {
-webkit-filter: grayscale(0%);
}
img:hover {
-webkit-filter: sepia(0%);
}
img:hover {
-webkit-filter: brightness(0%);
}
img:hover {
-webkit-filter: contrast(100%);
}
Itt most gy van megadva, hogy pl a szrkernyalatosra ha rviszed az eger akkor jra sznes lesz, azrt 0% van berva a kdba.
Persze ezeket fordtva is lehet hasznlni, a sznes kpek vltanak t valamilyen msik sznbe, effektbe. Kinek hogyan tetszik.
AJÁNLOM AZ OLDALT
Sg
Friss bejegyzsek
Friss hozzszlsok
Archvum