2015.04.29. 10:47, Enma22
A képeknek adhatunk a szokásos effekteken kívül (áttetszőség, keret, méret) egyéb dizájnokat is. Ezeket alkalmazhatjuk önmagukban, vagy egy hover (ráviszem az egeret) effekttel kombinálva. Akár a linkelt képeken is lehet alkalmazni.
De általában minden képre hatnak, ha nincsen külön besorolásuk (class).
Példa képnek jó lesz most ez:
Már adott kép, ezen fogom a többi csodát alkalmazni.
1. Szürkeárnyalatos kép:
img {
-webkit-filter: grayscale(100%);
}
A webkit az a Chrome-ot jelöli. Szerintem ha oda van írva, hogy -moz- esetleg -ms- stb, akkor azokban is alkalmazza.
Olyankor persze külön sorokat kell írni nekik.
Internet Explorer: -ms-
Chrome: -webkit-
Opera: -o-
Mozilla: -moz-
Sok kód akkor is működik, ha önmagában csak ennyi van írva:
img {
filter: grayscale(100%);
}
De ezt ki kell próbálni, én Chrome-ban dolgozom, szóval nekem nagyon jó most a webkit.
Rendben is volnánk, ez egy szürke árnyalatos kép lett így.
2. Szépia kép:
img {
-webkit-filter: sepia(100%);
}
3. Fényerő:
Itt lehet világosítani és sötétíteni is, attól függ, hogy a %-ot milyen előjellel adom meg.
img {
-webkit-filter: brightness(50%);
}
4. Kontraszt:
img {
-webkit-filter: contrast(200%);
}
Természetesen a %-okon nyugodtan lehet variálni.
És ezeket meg lehet adni úgy is, hogy csak akkor változnak, ha ráviszed 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 szürkeárnyalatosra ha ráviszed az eger akkor újra színes lesz, azért 0% van beírva a kódba.
Persze ezeket fordítva is lehet használni, a színes képek váltanak át valamilyen másik színbe, effektbe. Kinek hogyan tetszik.
AJÁNLOM AZ OLDALT
Súgó
Friss bejegyzések
Friss hozzászólások
Archívum