-
Obrazek na monitorze
dodano 09.07.2008 / komentarzy: 6 / autor: palmiak
Jest sobie taki pan, co zwie się Vlad Gerasimov i ma on bardzo fajną stronkę z tapetami i innymi grafikami. I na tejże stronie grafiki są przedstawione w dość fajny sposób - na ekranach monitorów. Sposób jest na tyle fajny, że uważam, że warto pokazać jak taką galerię zrobić. Mam nadzieję, że pan Vlad się nie obrazi.
Poszukuję monitora
Monitor jest tutaj najważniejszą rzeczą. Jego zdjęcie musi być równiutkie, bez żadnych zniekształceń. My użyjemy sobie ładnego monitora Della. Następnym krokiem jest doprowadzenie go do porządanych przez nas rozmiarów. Ja mam zamiar zrobić galerię ze sporą ilością zdjęć, więc mój monitor nie może być zbyt wielki - konkretnie 200 x 172 px.

Nasz wzorcowy monitor po pomniejszeniu.Musimy teraz jeszcze policzyć sobie ile ma dokładnie nasza matryca oraz ile wynosi przestrzeń od lewego, górnego punktu matrycy do lewego, górnego punktu obrazka.

Za pomocą lini pomocniczych “oddzielamy” matrycę i możemy sobie pomierzyć co potrzeba.Przygotowywujemy miniaturki
Nasze miniturki muszę mieć dokładny rozmiar matrycy. Czyli jeżeli obrazka nie da się przeskalować musimy go troszkę przyciąć.
Kodujemy
Kolejne monitory to nic innego jak kolejne elemnty listy, w naszym przypadku nieuporządkowanej. W środku każdego
<li>musi zaś znajdować się link, który okala obrazek. Czyli tak naprawdę żadne cuda:<ul id="monitory">
<li><a href="obrazki/1.jpg"><img src="obrazki/mini1.jpg" alt="pies" /></a></li>
<li><a href="obrazki/2.jpg"><img src="obrazki/mini2.jpg" alt="też pies" /></a></li>
<li><a href="obrazki/3.jpg"><img src="obrazki/mini3.jpg" alt="tym bardziej pies" /></a></li>
</ul>Pozostaje nam to ostylować:
* {
margin:0;
padding:0;
}
ul#monitory {
list-style:none;
margin:30px;
}#monitory li{
background:url(obrazki/lcd.jpg) no-repeat;
width:200px;
height:172px;
position:relative;
float:left;
margin:15px;
}#monitory li img {
border:0;
position:absolute;
top:12px;
left:12px;
}Najpierw zerujemy wszystko za pomocą tej gwiazdki (dzięki temu mamy pewność, że defaultowe wartości w przeglądarkach nic nam nie popsują).
ul#monitoryustawiamy marginesy, żeby odkleić go od brzegu strony, a za pomocą list-style:none pozbywamy się kropeczek przed każdym punktem listy.#monitory liotrzymują wysokość i szerokość obrazka przedstawiającego monitor, tło w postaci naszego monitora,float:left, zeby się kolejne monitory obok siebie układały orazposition:relative, zeby zagnieżdżone obrazki zposition:absolutemiały dobry punkt odniesienia.Pozostaje nam
#monitory li img. Wyłączamyborder, żeby niektóre przeglądarki ramki wokół obrazka nie pokazały. Następnie dajemyposition:absolutei jako wartościtopileftpodajemy odległości lewego, górnego punktu matrycy do lewego, górnego punktu obrazka.Pozostaje teraz tylko obejrzeć demo. W demie zastosowałem jeszcze troszkę jQuery, ale jak taki efekt osiągnąć już wiecie z tutoriala FadeIn, fadeOut, fadeTo - czyli o pojawianiu się i znikaniu.
Przeczytaj też podobne wpisy:


















Komentarze / dodaj komentarz
autor: Peace
dodano: 10.07.2008
pies, też pies, tym bardziej pies xD nice xD a tutek fajny
autor: palmiak
dodano: 10.07.2008
starałem się zbytnio nie kłamać z opisami zdjęć
autor: agressiva
dodano: 10.07.2008
Mnie też urzekły
autor: Burger
dodano: 10.07.2008
No no, fajny tutek, ale nie chciałbym mieć tak przedstawionej galeryji
autor: agressiva
dodano: 10.07.2008
dlaczego? przynajmniej jest inna niż wszystkie … na stronie Vlada świetnie to wygląda…
autor: Flacktub
dodano: 11.07.2008
Baaardzo fajny efekt…
naprawdę ładnie wychodzi
Napisz komentarz