eksperymenty z internetem, blogami, bloxem, javascriptem, firefoxem czy różnymi użytecznymi programami czy narzędziami, tak okołoinformatycznie tudzież okołokomputerowo...
Blog > Komentarze do wpisu

automatyczne odbicia lustrzane obrazków

Napisałem kiedyś instrukcję do GIMPa jak zrobić lustrzane odbicie napisu* a ostatnio znalazłem w sieci dwa ciekawe rozwiązania, które  potrafią robić to samoczynnie i nie wymagają instalacji żadnego programu ani żmudnych operacji graficznych...

Automatyczne "doklejanie odbicia" bezpośrednio na stronie.

efekt lustrzanego odbicia tekstu obrazka - reflection.js

Pierwszym rozwiązaniem jest skrypt javascript o nazwie reflection.js. Wystarczy go ściągnąć ze strony, dodać do zasobów, w treści notki (w pole na HTML bloxa) wstawić odwołanie do niego, a każdy z odpowiednio opisanych klasami CSS obrazków dostanie własne odbicie.
  <img src="http://adresURL_obrazka" 
            class="reflection rheightXX ropacityYY" />

Obowiązkowa jest klasa "reflection", która powoduje powstanie odbicia o wysokości połowy obrazka i rozmyciu do przezroczystości 50%. Dodatkowe klasy rheight i ropacity mówią o procentach wysokości/przeźroczystości w skali 1-100. Gdy są domyślnie nie podane, to są równoznaczne wpisom rheight50 i ropacity50.
Dokładny kod można sobie zobaczyć na przygotowanym generatorze o nazwie Reflectomatic, po uprzednim dopasowaniu suwakami oczekiwanego efektu. Sporo szczegółów wraz z przykładami jest także w pliku readme.html w ściągniętym archiwum. Skrypt jest darmowy przy wykorzystaniu go na stronach domowych/prywatnych (a blogi chyba takimi są?).

Niestety wadą tego rozwiązania jest powstawanie efektu dopiero po załadowaniu całego dokumentu (co w przypadku dużych stron, jak choćby ten mój blog) nie robi zbyt dobrego wrażenia. Ale ciekawe jest na pewno, bo tak naprawdę sam obrazek nie jest zmieniany a jedynie przeglądarka sama dokleja jego odbicie...



Generator obrazków z odbiciem.

generator efektu lustrzanego odbicia tekstu obrazka - Reflection Maker

Drugim ciekawym rozwiązaniem jest Reflection Maker - generator obrazków z lustrzanym odbiciem. Wystarczy załadować plik z dysku (bądź wstawić adres URL do obrazka), ustawić wysokość odbicia (1-100% wysokości źródła) a skrypt wygeneruje nowy obrazek, który potem można sobie wstawić na stronę/bloga. Można też określić kolor tła do jakiego będzie przenikać odbicie, ale nie ma się wpływu na stopień przeźroczystości. Całość działa szybko i bardzo intuicyjnie.

To narzędzie jest o tyle ciekawsze od poprzedniego, że przygotowany za jego pomocą obrazek ładuje się na stronie od razu z odbiciem, nie powodując opóźnień jak w poprzednim przypadku. Obrazki z odbiciem mogą wprawdzie mieć nieco większy rozmiar, ale czas ich ładowania będzie na pewno krótszy niż oczekiwanie na działanie pierwszego skryptu.



Podsumowanie

Oczywiście jakość efektu końcowego najbardziej zależy od źródłowego pliku, który ma mieć swoje odbicie. Przy napisach warto pamiętać o "długich literach/ogonkach" (j, p, y, ą, ę, itp), czyli o dolnej krawędzi obrazka, względem którego odbicie ma być generowane. Najlepiej wyglądają te o równej płaszczyźnie dolnej.
Oczywiście wymienione narzędzia nie zastąpią pełni kontroli jaką dają operacje w programach graficznych, ale szybkość i prostota ich działania to ogromna zaleta.


*tak naprawdę to było robienie specyficznego cienia, a instrukcja prawdziwego lustrzanego odbicia jest w przygotowaniu...


del.icio.us icon , , ,
technorati icon
poniedziałek, 15 października 2007, sgk

Polecane wpisy

  • ciemny szablon gotowy, więc Let's rock

    Przez ostatnie dwa tygodnie nic tu się nie działo, gdyż każdą wolną chwilę poświęcałem na szablon dla zaprzyjaźnionego bloga muzycznego Let's Rock . Obiecałem g

  • wklejka do głosowania BlogFrog dla Bloggera

    Zawziąłem się i przygotowałem skrypt do wstawiania wklejek głosowania BlogFrog dla blogów z Bloggera (.blogspot.com), analogiczny do tego, który był zrobiony dl

  • ostatnie komentarze - mój widżet dla bloxa

    Przeglądając wiele blogów, w szczególności opartych o silnik WordPress , często napotykałem się na niewielki gadżet pokazujący informację o ostatnich komentarza

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
bloxowe porady

RSS


dodaj do netvibes

Add to Google


pobierz Spiceworks - darmowe oprogramowanie do zarządzania infrastrukturą IT