experymenty

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

« cyferki z klawiatury ...

last.fm i OMI - wskaźnik ... »

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