nagradzam tutoriale

  • Obrazek na monitorze

    dodano 09.07.2008 / komentarzy: 6 / autor: palmiak

    Obrazek na monitorze

    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.

    monitor
    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.

    monitor
    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#monitory ustawiamy marginesy, żeby odkleić go od brzegu strony, a za pomocą list-style:none pozbywamy się kropeczek przed każdym punktem listy.

    #monitory li otrzymują wysokość i szerokość obrazka przedstawiającego monitor, tło w postaci naszego monitora, float:left, zeby się kolejne monitory obok siebie układały oraz position:relative, zeby zagnieżdżone obrazki z position:absolute miały dobry punkt odniesienia.

    Pozostaje nam #monitory li img. Wyłączamy border, żeby niektóre przeglądarki ramki wokół obrazka nie pokazały. Następnie dajemy position:absolute i jako wartości top i left podajemy 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.

    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 :P


    • 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