70-480 – Programowe stosowanie stylów do elementów HTML

70-480

Zmiana lokalizacji elementu; stosowanie przekształcenia; pokazywanie i ukrywanie elementów.



Po raz kolejny, pod krótkim opisem ze strony Microsoft kryje się kilka tematów do omówienia. Tym razem będą to:

  • pozycjonowanie elementów w CSS3
  • pokazywanie i ukrywanie elementów za pomocą CSS i JavaScript
  • transformacje 2D z wykorzystaniem CSS3

Pozycjonowanie elementów w CSS3 (CSS Positioning & HTML DOM Style Object)

Pozycjonowanie elementów w strukturze HTML może wydawać się skomplikowane, ale tylko na początku. Z pomocą przychodzą nam style CSS(3), które udostępniają kilka opcji sterowania warstwami, ułożeniem elementów oraz ich nachodzeniem na siebie.

Najważniejsze, to zrozumienie czterech wartości atrybutu position:

  • static – domyślna wartość każdego elementu. Jest to normalny przepływ w strukturze dokumentu HTML (od góry do dołu). Atrybuty: left, top, right, bottom nie wpływają w tym wypadku na elementy, nawet jeśli zostały zdefiniowane.
  • fixed – jak mówi sama nazwa – jest to pozycjonowanie stałe, a więc związane z oknem przeglądarki. Atrybuty left, top, right, bottom pozwalają nam ustalić pozycję elementu względem okna przeglądarki. Często możemy się spotkać z efektem przyklejonego górnego menu podczas scrollowania. To własnie efekt pozycjonowania stałego. Pozostałe elementy zachowują się tak, jakby elementów typu fixed w ogóle nie było w strukturze HTML.
  • relative – w zasadzie różni się od pozycjonowania statycznego tym, że tym razem atrybuty left, top, right, bottom mają realne odzwierciedlenie i ustawione dla danego elementu pozwalają przesuwać go względem jego oryginalnej pozycji. Pozostałe elementy traktują taki element jakby był on pozycjonowany statycznie i nieprzesunięty względem swojego oryginalnego położenia. Elementy mogą na siebie zachodzić, a warstwy definiować możemy za pomocą atrybutu: z-index.
  • absolute – pozycjonowanie bezwzględne, które w zasadzie posiada dwa stany:
    • jeżeli dla elementów (w górę) nie ustawiono pozycjonowania innego niż statyczne, to w zasadzie można to przyrównać to pozycjonowania stałego
    • jeżeli któryś element (pierwszy w górę) ma ustawione pozycjonowanie inne niż statyczne, to elementy ustawione jako absolute będą pozycjonowane względem tego elementu

    Co warto dodać, to informacja, że elementy pozycjonowane bezwzględnie nie zabierają miejsca i są traktowane przez pozostałe elementy jakby nie istniały w strukturze dokumentu HTML.

Pokazywanie i ukrywanie elementów za pomocą CSS i JavaScript (CSS Display and Visibility)

Widocznością elementów możemy sterować z poziomu CSS za pomocą dwóch atrybutów:

  • display
  • visibility

Różnicę pomiędzy nimi pokażę Wam na dwóch prostych przykładach. Pierwszy z nich prezentować będzie użycie display, a drugi visibility. Oba przykłady zawierać będą zdefiniowane trzy boxy z różnymi kolorami, gdzie dla środkowego boxa ustawiony zostanie odpowiedni atrybut widoczności.

display

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

visibility

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Różnicę bardzo łatwo jest zauważyć. W przypadku użycia display: none ukrywamy całkowicie środkowy box i znika on ze struktury HTML. Gdy używamy visibility: hidden, to wprawdzie element również znika, ale nie znika ze struktury HTML i zajmuje w pełni swoje miejsce.

Widocznością sterować możemy także z poziomu JavaScript:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Pobieramy referencje do środkowego boxa oraz przycisku, a następnie tworzymy funkcję, która sprawdza, czy środkowy box jest widoczny lub nie i przypisuje odwrotną wartość do atrybutu display. Na końcu deklarujemy obsługę zdarzenia click dla przycisku i możemy się cieszyć możliwością ukrywania / pokazywania zielonego boxa.

Po więcej zapraszam oczywiście do materiałów na stronie w3schools. Zachęcam również do zapoznania się z biblioteką jQuery, która pozwala na dużo prostsze manipulowanie elementami HTML.

Transformacje 2D z wykorzystaniem CSS3 (CSS3 2D Transforms)

Ostatnim tematem wpisu są transformacje 2D, które możemy wykonać przy użyciu CSS3. Transformacje 2D wykonywane są w dwóch wymiarach i pozwalają zmieniać położenie, rozmiar oraz kształt elementów. Transformacje działają we wszystkich nowych wersjach przeglądarek, ale wymagają odpowiednich przedrostków dla atrybutu: transform:

  • Chrome, Safari, nowa Opera (15+) -webkit-
  • Firefox -moz-
  • Internet Explorer (9) -ms-
  • starsza Opera (< 15) -o-

Do dyspozycji mamy w zasadzie pięć funkcji, które przyjmowane są jako parametr dla transform (przykłady ze strony w3schools):

  • translate – przesunięcie względem osi X i Y
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Przesunięcie o 50px w prawo i 100px w dół.
  • rotate – obracanie elementu wokół własnej osi o zadaną liczbę stopni
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Obrót o 30 stopni względem wskazówek zegara. Podanie ujemnych wartości powoduje obrót przeciwny do wskazówek zegara.
  • scale – zmiana wielkości elementu względem wielokrotności wartości X i Y
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Powiększenie 2 razy w poziomie i 4 razy w pionie.
  • scew – odchylenie od osi X i Y wyrażane w stopniach
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Odchylenie o 30 stopni od osi X i o 20 stopni od osi Y.
  • matrix – kombinacja pozostałych czterech metod w jedną, gdzie ozostałe funkcje są w zasadzie jakąś wersją funkcji matrix i zarazem aliasem do niej
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Zapraszam do własnych eksperymentów!