Nieruchome tła - poradnik CSS

Witajcie! Wreszcie udało mi się zebrać na to, aby napisać post zgodny z przeznaczeniem tego bloga. Na pomysł tego poradnika wpadłam właśnie podczas robienia szablonu. Efekt nie jest szczególnie trudny do osiągnięcia, tak naprawdę to jest banalny. Jednak pasuje to tylko do blogów czy stron w takim stricte nowoczesnym stylu.

Przejdźmy do rzeczy. Na pewno odwiedzacie strony internetowe w stylu modern - chociażby po to, aby poszukać inspiracji do szablonów minimalistycznych. Mnie na takich stronach bardzo spodobał się jeden efekt, jednak za nic nie mogłam wymyślić, jak go zrobiono. Chodziło o to, że po wejściu na stronę główną mieliśmy duży, ładny, nieruchomy obrazek, który po scroolowaniu chował się pod zwykle jednolitym tłem. Myślę sobie - ok, nieruchome tło i zwykła ramka, nic nadzwyczajnego. Ale co mamy dalej? Tło się kończy i mamy kolejny obrazek, również nieruchomy, wynurzający się spod tego jednolitego tła. Kolejne tło? Czyżby istniał jakiś kod, który zmienia obrazek tła po zjechaniu do danego momentu? Wystarczyło pomniejszyć stronę, aby zauważyć, że te obrazki są od siebie niezależne i możemy oglądać je wszystkie jednocześnie przy odpowiednio dużym pomniejszeniu.

Długo zastanawiałam się nad tym, jak zostało to zrobione i odpowiedź okazała się banalna. Dla zilustrowania tego efektu, przykład macie poniżej:

Jakaś treść w ramce. Nic ważnego, nie przejmujcie się tym :)

Fajnie to wygląda, prawda?

Okazuje się, że sprawa jest bardzo prosta. Należy przygotować 3 ramki (może to być nagłówek, tło pod posty i stopka - cokolwiek chcecie). Dla lepszego efektu niech każda z nich ma szerokość strony i niech odległość między nimi wynosi 0px. Górnej i dolnej ramce oddzielnie definiujemy tło w CSS'ie, a powinno wyglądać to następująco:

.ramka1 {
background-image: url(adres-obrazka);
background-attachment: fixed;
}

Tak, to "fixed" odpowiada za to, że tło jest nieruchome. Cała filozofia. I możemy ich robić sobie nieskończenie wiele.

Nie czujecie się usatysfakcjonowani, prawda? W takim razie na koniec mam dla Was coś dużo ciekawszego, co również znajduje zastosowanie w takich nowoczesnych szablonach.

100vh = 100 view hight
1000vw = 100 view width

Są to bardzo fajne jednostki, których możecie używać w CSS'ie. 100vh to jedna wysokość ekranu, a 100vw to jedna szerokość ekranu.

Działajcie!

A następny poradnik będzie o tym, jak poznać wszystkie selektory. Nie, nie będzie to spis wszystkich selektorów, ale sztuczka, która bardzo Wam się przyda i pozwoli Wam ich nie pamiętać :)

Do następnego posta, mam nadzieję, że coś z tego wam się przyda.