Volite web dizajn?
Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.
Postepeno povećanje slika i css img. preloader, kako?
Kako napraviti ovaj efekt?
Surfajući netom naišla sam na stranicu nsftools.com i zgodan JS kod za postepeno povećanje/smanjenje slika na prijelaz mišem.
Autor si je dao truda da svaki dio koda precizno objasni tako da ga razumiju i početnici, a Css, JS i HTML nalaze se na istom dokumentu radi lakšeg snalaženja.
Kod sam isprobala, dodala mu malo blagdanskog ugođaja i preloader slika te ga lijepo zapakirala u .zip paketić vama za poklon 🙂
Ovdje možete pogledati demo
Da bi ovaj efekt bio lijepo izveden svakako treba napraviti preload slika. To se može učiniti na razne načine pa čak i CSS-om, vrlo jednostavno.
U HTML, negdje na kraju footera nabrojimo sve slike koje želimo da se učitaju zajedno sa stranicom a pojavljuju se tek na a:hover, OnMouseover:
<img src="foto-resizer/snowbig.png"
alt="snowman-big" title="snowman-big"
height="128" width="128" class="hiddenpic" />
itd…
u CSS stavimo:
.hiddenpic {display:none;}
Ukoliko želimo (a vjerojatno želimo) da nam sličica bude link na neku drugu stranicu, tada ćemo staviti:
<a href=”http://google.com”>
<img width=”250″ height=”200″ onmouseout=”resizeImg(this)” onmouseover=”resizeImg(this, 200)” src=”http://www.kroativ.net/tutor/fr/foto-resizer/dedamraz.jpg” cachetag=”http://www.kroativ.net/tutor/fr/foto-resizer/dedamraz.jpg~715~260″/>
</a>
I to je sve.
Korištene ikone: Icon Drawer
Foto: nažalost, ne sjećam se gdje sam našla ovu sliku, molim autora da nam se javi 🙂
Slični sadržaj:
- Zašto trebamo koristiti "blending options" u WEB dizajnu (Jako slično)
- Kako jednostavno napraviti oble rubove? (Jako slično)
- Višestruki "span" u CSS-u (jedan jako zanimljivi logo) (Jako slično)
- Firefox na steroidima - 20 korisnih dodataka za web dizajnere (Jako slično)
- Search box - HTML basic + Css styles (Jako slično)
Još nema komentara, Vi možete biti prvi!
Ostavite komentar
Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.