tekst na nieruchomym tle

Strona wykonana wyłącznie za pomocą Cascading Style Sheets (CSS) i naturalnie, HTML. Autorem koncepcji jest p.Eric Meyer. Jego strona domowa :www.meyerweb.com. Ostatnia wersja dokumentacji CSS to CSS 2.1 :www.w3.org. Nie ma tu ani odrobiny kodu Javascript. Autor nie stosuje obrazków o rozszerzeniu .png ani nie wychodzi poza dokumentację CSS. Użyłem za autorem 4 obrazków,a w zasadzie to jednego z nałożonymi różnymi kolorami.

Patrz:

Jak to ma wyglądać ?

W użytych przeze mnie przeglądarkach-Internet Explorer 7; Mozilla Firefox 3.08; Google Chrome strona działa prawidłowo. Podczas przewijania, tekst na przeźroczystym podłożu przesuwa się płynnie nad nieruchomym tłem w postaci obrazka. Razem z tekstem przesuwa się widoczne z lewej strony menu. Zmniejszenie czy powiększenie okna lub czcionki nie powoduje zachwiania całości kompozycji. Trzeba pamietać, że efekt przeźroczystego pierwszego planu i półprzejrzystego obrazka w tle osiągnieto za pomocą obrazków .jpg !

W przegladarkach innych niż wymienione,zwłaszcza w starszych ten efekt nie zawsze jest do osiągnięcia. Główną przeszkodą,jest traktowanie przez starsze przeglądarki zapisu 'fixed' w odniesieniu do elementu, w którym obrazek jest zapisany, nie w odniesieniu do okna przeglądarki.

Jak to działa ?

Widoczny tu efekt został osiągnięty głównie użyciem właściwości 'fixed' pozycjonowania elementów w CSS. Jak wiemy pozycjonowanie w CSS pozwala ustalić odległość elementu od lewej,prawej,górnej,dolnej granicy okna przeglądarki lub elementu w którym dany element się znajduje. Pozwala też okreslić kształt elementu,ustawić jeden element za drugim,określić co powinno sie stać,gdy zawartość nie mieści się w elemencie.

Zgodnie z CSS każdy obrazek tła, którego pozycja określona jest właściwością 'fixed' jest umocowany do okna przegladarki ('viewport'), nie do elementu z którym jest związany. Czyli zapis skrócony:

div#content {background:#383836 url(obrazki/aniol_cont1.jpg) 0 0 no-repeat fixed;}

z którym tożsamy jest zapis jak niżej:

div#content { 
   background-color:#383836;
   background-image: url(obrazki/aniol_cont1.jpg);
   background-position: 0 0;
   background-repeat: no-repeat;
   background-attachment: fixed;
   }

Oznacza umocowanie obrazka 'aniol_cont1.jpg'do lewego rogu okna przegladarki. Mimo że obrazek znajduje sie w div o id='content'.Drobny szczegół należy tu zauważyć: kolor tła (background-color) powinien być taki sam jak kolor tła obrazka, u mnie średnio to wyszło. Widać granicę obrazka i tła.

Obrazek,stanowiący tło div o id='content'jest więc przywiązany do okna przeglądarki,ale widoczny tylko w przestrzeni w której pokrywa się z tym div. Proponuję jeszcze raz zobaczyć obrazek stanowiący tło div o id='content':url(obrazki/aniol_cont1.jpg). Zwracam uwagę,by powiększyć obrazek do pełnego rozmiaru (739x1320px). Czyli co w sumie zrobiłem? Dokładnie w to samo miejsce odnośnie lewego rogu okna przeglądarki wstawiłem cztery obrazki,różniace sie barwą. Obrazek umieszczony w 'body' jest trochę widoczny wyłącznie z lewej strony poniżej loga lelahel.pl. Obrazek umieszczony w div 'content' jest częściowo widoczny w przestrzeni tego div,tu gdzie jest czytany tekst.

Obrazek umieszczony w linku, dokładnie kotwicy ('a') jest widoczny wyłącznie w małym 'okienku' linku. Oto ten obrazek: url(obrazki/aniol_link.jpg). Wreszcie ostatni obrazek: url(obrazki/aniol_hover.jpg) umieszczony jak poprzedni ale dla stanu 'hover',czyli najeździe myszki na link, jest widoczny wyłącznie w 'okienku' linku przy najechaniu nań myszką. To wszystko byłoby wyraźniejsze, gdyby zastosować obrazek bardziej rozbudowany, z większa ilością szczegółów. Tyle, że wtedy tekst byłby raczej mało czytelny...

Ewentualne zastosowanie praktyczne?

Na razie widzę tylko możliwość zbudowania wizualnego wyglądu strony znacznie różniącego się od innych. To już plus. Jeśli wymyślę lub znajdę gdzieś pomysł,to dopiszę. Może ważniejsza jest sama idea. Autor pokazał,że w CSS tkwi duży potencjał, niekoniecznie w pełni wykorzystywany.

Prawa autorskie

Zastrzegam obrazki tła i logo.

Linki do stron zaprzyjaźnionych :|| Corlive zamiast e-maili     || Pliki strony języki     || Ciekawostki     || Masaż-Bydgoszcz

Last Modified 04/15/2009 09:46