[MCSD 70-480] Transformacje i pozycjonowanie obiektów HTML

Po kilku postach związanych z grafiką i mediami pora na trochę CSSa. Cieszę się, że w końcu do tego dochodzę, bo tak jak canvasa, svg czy nawet video i audio zdarza się używać niezwykle rzadko tak dzisiejszy temat jest dla większości web developerów chlebem powszednim i mam wrażenie, że nie zawsze wszyscy używają atrybutów czy metod tutaj opisanych w sposób świadomy i przemyślany.

Zmiana położenia elementu

Obiekt HTML na stronie możemy umieścić w stosunku do pozostałych na 4 różne sposoby używając odpowiednich styli CSS. Z jakiegoś powodu w książce do egzaminu zostały omówione tylko dwa atrybuty position. Ja dzisiaj postaram się w miarę prosto mam nadzieję omówić wszystkie.

position: static;

Pierwszy atrybut odpowiadający za rozmieszczenie elementu na stronie to static. Atrybut zdecydowanie najnudniejszy, bo niewiele można z nim zrobić. static oznacza, że element powinien zostać umieszczony zgodnie z naturalną strukturą kodu html. To znaczy: jeżeli element div z pozycją static zmieści się po prawej stronie od swojego rodzeństwa to tam zostanie umieszczony, jeżeli nie to zostanie przeniesiony poniżej tego elementu. I tyle. Nic się nie da z tym zrobić. Dlatego dużo częściej używamy na przykład:

position: relative;

Bez żadnych dodatkowych parametrów pozycja relative właściwie nie różni się od static. Tutaj też element zostanie umieszczony standardowo tam gdzie się zmieści. ALE. W przypadku pozycji relatywnej możemy dodać dodatkowe atrybuty takie jak left, right, top oraz bottom. Dzięki tym atrybutom można przesuwać dany element o określoną liczbę pikseli od pozycji standardowej.

position: absolute;

W tym przypadku mamy już zupełnie inną opcję pozycjonowania. Przy ustawianiu pozycji na absolute praktycznie zawsze dodajemy atrybuty lewo, prawo, góra, dół. Jest to spowodowane tym, że tutaj obiekt standardowo umieszczony jest w lewym, górnym rogu swojego najbliższego przodka, którego pozycja jest inna niż static. Uch trochę pokręcona ta logika. To może słowny przykład. Albo jeszcze wcześniej wspomnę, że każdy obiekt który nie ma jasno zdefiniowanej pozycji ma pozycję static. No i teraz już powinno być łatwiej.

Jeżeli umieszczemy element z pozycją absolute to ten element szuka swojego przodka, który też ma jawnie zdefiniowaną pozycję np. relative. No i wtedy przytula sie do jego rogu i dopóki nie powiemy mu żeby się odsunął to tam sobie siedzi 🙂

position: fixed;

Opcja trochę podobna do pozycji absolute z tą różnicą, że nie szukamy przodka tylko standardowo przytulamy się do lewego górnego rogu okna. Przy tym założeniu musimy pamiętać o dwóch rzeczach. Po pierwsze ustawienie odległości od tego rogu w pikselach może być bardzo nieskuteczne, bo jak wiemy z różnych rozdzielczości użytkownicy korzystają. Po drugie element z pozycją fixed zawsze będzie z nami. Bez względu na to ile będziemy stronę scrollować to on tam będzie.

Transformacje

Kolejną ciekawą możliwością CSSów są transformacje. Każdy element umieszczony na stronie możemy zmieniać we właściwie dowolny sposób. Transformacje zazwyczaj używane są do manipulacji grafikami na stronie, ale oczywiście nie tylko do tego można się dobrać.

rotate

Po pierwsze elementy za pomocą transformacji możemy obracać. Używając

transform: rotate(90deg);

możemy obrócić element o 90 stopni. Najlepiej to oczywiście widać na obrazkach np.

ale równie dobrze możemy obracać np. tekst w tabelka jeżeli nagłówek jest zbyt szeroki.

Dodatkowo mamy metody rotateX oraz rotateY dzięki którym możemy otrzymywać obroty i odbicia lustrzane w zależności od tego w jakim kierunku obrócimy dany element.

translate

Jeżeli z jakiegoś powodu nie chcemy użyć position do umieszczenia elementu w konkretnym miejscu możemy użyć metody translate. Wywołanie:

transform: translate(50px, 0px);

spowoduje przesunięcie elementu o 50 pikseli w prawo.

scale

Za pomocą transformacji możemy również zmieniać wielkość elementów. Użycie

transform: scale(1.5);

spowoduje zwiększenie obiektu o 50%.

skew

Skew jak przed chwilą sprawdziłem w słowniku oznacza wykrzywienie 🙂 Czyli możemy wykrzywić nasz element w stosunku do osi X i Y. Kod

transform: skew(10deg, 10deg);

Będzie skutkował mniej więcej czymś takim:

Ukrywanie i pokazywanie obiektów

Ukrywać i pokazywać obiekty możemy na dwa sposoby. Każdemu elementowi na stronie można przypisać dwa różne atrybuty w CSS. Są to display oraz visibility. Szczerze, dopóki o nich trochę nie poczytałem to zawsze ustawiałem je trochę na czuja, zmieniając tak długo aż otrzymałem pożądany wynik. Okazuje się, że te dwa atrybuty znacząco się od siebie różnią i mają niesamowitą moc 🙂

display

W przypadku display zasada jest dosyć prosta. Atrybut ten może przybrać dwie wartości. Obiekt może być albo widoczny display: inline, albo niewidoczny display: none. Jeżeli ustawimy wyświetlanie na wartość none to element tak jakby znika zupełnie z naszej strony. To znaczy, że wszystkie pozostałe elementy jeżeli mogą to zajmują jego miejsce.

visibility

Przy visibility mamy zdecydowanie więcej możliwości i pora na małą tabelkę:

Wartość Opis
 visible  Element jest widoczny
 hidden  Element jest niewidoczny
 collapse  Element jest ukryty
 inherit  Element ma widoczność taką jak rodzic

Pierwsza wartość jest dosyć oczywista. visibility: visible; wyświetla nam po prostu element na stronie.

visibility: hidden wyłącza nam element na stronie jednak miejsce po nim nadal jest „zarezerwowane”. Czyli element nie jest widoczny na stronie, ale inne elementy nie mogą wskoczyć na jego miejsce.

visibility: collapse działa praktycznie tak samo jak display: none to znaczy ukrywa nam element i pozostałe zajmują jego miejsce. Często można użyć tej opcji np. przy ukrywaniu poszczególnych wierszy w tabeli na stronie.

visibility: inherit jak w przypadku innych atrybutów z opcją inherit wskazuje, że widoczność elementu ma być taka jak rodzica. Można tego użyć w przypadku kiedy chcemy ukryć duży obiekt z wieloma dziećmi.

No i to już by było na tyle w dzisiejszym wpisie. Już niedługo (w przyszłym tygodniu) zajmiemy się zupełną nowością w HTML5, czyli API do geolokalizacji, czy webstorage. Zapraszam niedługo 🙂

Related posts