Sekcja dziewiąta

Lekcja pierwsza i druga wyjaśniła czym jest CSS3 oraz jakie są różnice między tymi wersjami. CSS3 to ulepszona wersja CSSa, zawierająca nowe selektory, właściwościa, pozwala na nowe podejście do układania treści, nowe wygląd strony (zaokrąglanie krawędzi, gradienty itp.) oraz na responsywne tworzenie stron.

---

Lekcja trzecia omawiała szablon html5boilerplate oraz pokazywała nowy edytor - Netbeans. Na ten moment wciąż korzystam z Aptany, gdyż pracuje mi się na niej przyjemnie, a boilerplate i tak pobrałem, choć boję się, że będzie trochę kłopotów z własnym podejściem do przerabiania kursu.

---

Lekcja czwarta mówi co to są vendor-prefixy. Są to przedrostki, z których należy skorzystać, pisząc plik .css, by dana przeglądarka (w konkretnej wersji) mogła zinterpretować daną właściwośc. Stosuje się specjalne pliki, które pozwalają nie przejmować się tymi "diabelnymi" prefixami.

---

Lekcja piąta mówi o legendarnym IE oraz selektorach, z którymi ta przeglądarka ma problem. Da się to załatwić, wklejając odpowiednią linijkę kodu na samym dole body.

---

Lekcja szósta mówi o selektorach. Jest to swego rodzaju powtórzenie, choć zawarte w nim są nowe selektory. Tak więc:

• p - wybierze wszystkie paragrafy
• .klasa - wybierze wszystkie elementy należące do klasy klasa
• #id - wybierze wszystkie elementy, których identyfikator to id
• * - wybierze wszystkie elementy
• div. p - wybierze wszystkie divy i paragrafy
• div p.klasa - wybierze wszystkie paragrafy z klasą klasa, które znajdują się w divie
• div > p.klasa - to co wyżej plus paragrafy muszą być bezpośrednimi dziećmi divów
• div + p.klasa - wybierze wszystkie paragrafy z klasą klasa, które są po danym divie (pojedynczy element)
• div ~ p.klasa - to co wyżej, tylko że wybierze wszystkie elementy po divie

---

Lekcja siódma dotyczy selektorów atrybutów - pewnego rodzaju nowości. Selektory atrybutów umieszcza się między nawiasami kwadratowymi []. Przykłady użycia pokazuje poniższa lista:

• input[required] - wybierze wszystkie elementy o nazwie tagu input które mają atrybut required
• [href="strona.pl"] - wybierze wszystkie elementy które mają atrybut href równy strona.pl
• input[type="text"] - wybierze wszystkie elementy o nazwie tagu input, którego atrybut type ma wartość text
• [href*="strona.pl"] - wybierze wszystkie elementy z atrybutem href, którego wartość zawierają w sobie strona.pl
• [id^="bartek-"] - wybierze wszystkie elementy z atrybutem id, którego wartość rozpoczyna się od bartek-
• [href$=".png"] - wybierze wszystkie elementy z atrybutem href, którego wartość kończy się na .png
• [lang|=en] - wybierze wszystkie elementy z atrybutem lang o wartości en lub en połączony z innym słowem myślnikiem (odnośnie języków: en-us lub en-uk)
• a[data-info~="external"] - wybierze wszystkie elementy, których tag nazywa się a oraz które mają atrybut data-info oraz jedną z wartości data-info jest external (data-* to tworzenie własnego atrybutu w HTML5)

---

Lekcja ósma dotyczy pseudoselektorów. W przyjemny sposób pomagają one uwydatnić interakcje ze stroną. Oddziela się je od selektorów i selektorów atrybutów dwukropkiem - :. Poniżej znajduje się tabelka przedstawiająca niektóre pseudoselektory oraz przykład ich działania:

Pseudoselektory

Selektor	Wyjaśnienie
input[type='radio']:checked	Ten pseudoselektor wybierze wszystkie elementy tagu input, które mają atrybut type o wartości radio; będą to tylko te elementy, które są 'zaznaczone' (:checked). Jaki najbardziej lubisz kolor? A - czerwony B - zielony C - żółty
input[type='text']:focus	Ten pseudoselektor wybierze wszystkie elementy o nazwie tagu input, które mają atrybut type o wartości text; będą to tylko te elementy, które mają skupienie (:focus). Imię: Nazwisko:
[data-tooltip]:hover:after	Ten pseudoselektor wybierze wszystkie elementy, które mają atrybut data-tooltip; gdy ktoś najedzie na (:hover) taki element, po (:after) tej czynności coś się wydarzy. NBA to profesjonalna, amerykańsko-kanadyjska liga koszykarska.
.click:before	Ten pseudoselektor wybierze wszystkie elementy, które mają klasę click; przed (:before) najechaniem zawartość wygląda inaczej. Przykładem mogą być te "linki do zadań", które przed najechaniem są czerwone, a po - złote. Zadanie 1 Zadanie 2 Zadanie 3
table tr td:first-child	Ten pseudoselektor wybierze wszystkie tabele table, a w nich wiersze (tr), a w nich wszystkie komórki (td), które są pierwszymi dziećmi swojego rodzica (pierwszymi elementami). Przykładem jest ta tabela, gdzie pogrubiono czcionkę wszystkim komórkom w pierwszej kolumnie.
table tr:nth-child(2n) td:first-child table tr:nth-child(2n) td:last-child table tr:nth-of-type(2n) td:first-of-type table tr:nth-of-type(2n) td:last-of-type	Pierwszy pseudoselektor wybierze wszystkie tabele table, a w nich co drugi (2n) wiersz (tr), poczynając od 2 elementu, a w nich wszystkie komórki td, które są pierwszymi dziećmi swojego rodzica. Drugi pseudoselektor wybierze wszystkie tabele table, a w nich co drugi (2n) wiersz (tr), poczynając od 2 elementu, a w nich wszystkie komórki td, które są ostatnimi dziećmi swojego rodzica. W obu przypadkach nth-child oznacza, że za n podstawia się liczby całkowite nieujemne: 0, 1, 2, 3, 4... first-of-type, last-of-type, nth-of-type różni się od first-child, last-child, nth-child tylko tym, że przed wybranymi elementami mogą sąsiadować inne tagi. Nie muszą być bezpośrednio pierwszym dzieckiem rodzica, tylko muszą być (w przypadku first-of-type) pierwszym tego typu elementem rodzica.
.example span:only-child	Ten pseudoselektor wybierze wszystkie elementy o nazwie klasy example, a z nich wybierze span w taki sposób, aby było to jedyne dziecko tego elementu. To jest span pierwszy w pierwszym bloku. (okazuje się być 'jedynakiem') To również jest span pierwszy w nowym bloku. To natomiast jest span drugi. Tu jest span pierwszy w nowym bloku. A tutaj jest akapit
.example p:empty	Ten pseudoselektor wybierze takie paragrafy, które są puste (empty - bez zawartości) oraz są wewnątrz elementu, który ma klasę example Paragraf pierwszy ma zawartość. Paragraf drugi też. Trzeci, jak widać, nie miał zawartości, więc przypisałem mu ramkę.
#test1 p:not(.casual)	Ten pseudoselektor wybierze wszystkie elementy o nazwie tagu p wewnątrz elementu o id test1 z wyjątkiem takiego p, którego klasa to casual. Spośród poniższych sportów brak stylu będą mieć te, których osobiście nie lubię. Piłka nożna Kolarstwo Koszykówka Skoki narciarskie Biathlon
#test2 p:first-letter	Ten pseudoselektor wybierze wszystkie elementy o nazwie tagu p wewnątrz elementu o id test2, po czym wybierze z tych elementów pierwsze litery (first-letter) i nieco je zmieni. Futbol Club Barcelona, FC Barcelona, Barça – hiszpański wielosekcyjny klub sportowy, istniejący od chwili założenia drużyny piłkarskiej. Jego dewiza to Més que un club.
#test3 p:first-line	Ten pseudoselektor wybierze wszystkie elementy o nazwie tagu p wewnątrz elementu o id test3, po czym wybierze z tych elementów pierwsze linie (first-line) i nieco je zmieni. Futbol Club Barcelona, FC Barcelona, Barça – hiszpański wielosekcyjny klub sportowy, istniejący od chwili założenia drużyny piłkarskiej. Założony w 1899 roku przez grupę Szwajcarów, Anglików i Hiszpanów, z czasem stał się katalońską instytucją o dużym znaczeniu społecznym. Jego dewiza to Més que un club Drużyna piłkarska ma na koncie 26 mistrzostw Hiszpanii, 30 pucharów Króla Hiszpanii, 13 superpucharów Hiszpanii, 5 pucharów Europy, 4 puchary Zdobywców Pucharów, 5 superpucharów Europy, 3 klubowe mistrzostwa świata/puchary interkontynentalne i wiele innych trofeów.
input:disabled	Ten pseudoselektor wybierze wszystkie elementy o nazwie tagu input, które są nieaktwyne (disabled). Podsumowanie meczu: Nazwa drużyny: Wynik:
#boom:target	Element o id boom, do którego zostanie przeniesiona "akcja" zmieni się po kliknięciu poniższego tekstu. > click < BOOOOM

---

Lekcja dziewiąta mówiła o Web Fonts - własnych czcionkach. Pokazano tam tylko strony, z których można bezpiecznie pobierać wybrane czcionki, nie musząc martwić się o licencjonowanie.

---

Lekcja dziesiąta mówiła o transformacji tekstu. Tekst napisany normalnie (duże litery na poczatku zdań, nazw własnych itp.) można za pomocą text-transform zmienić tak jak w przykładzie poniżej. Pierwszy tekst pokazany jest domyślnie, kolejne natomiast są odpowiednio przetransformowane.

---

Lekcja jedenasta opowiada o cieniach. Efekt przydatny przy poprawianiu wyglądu danej strony. Poniższy tekst otrzyma właśnie taki cień.

---

Lekcja dwunasta opowiada o przezroczystości. Ogólnie, używa się własnośći opacity:, lecz sprawia ona, że dodatkowo tekst staje się przezroczysty. Do ustawienia przezroczystości tła, można użyć kolorów rgba, gdzie a odpowiada za przezroczystość. Teksty poniżej mają tło ustawione na srebrne, lecz tło pierwszego ma wartość a równą 0,3.

---

Lekcja trzynasta opowiada o zaokrąglaniu krawędzi. Stosuje się do tego border-radius. Po dwukropku można wypisać jedną wartosć w pikselach (dla wszystkich rogów), 2 wartości (pierwsza dla lewego górnego i prawego dolnego, druga dla prawego górnego i lewego dolnego), lub 4 wartości, dla każdego rogu z osobna. Wynik takiego zaokrąglenia przedstawiam w lekcji niżej, łącząc zaokrąglenie z gradientami.

---

Lekcja czternasta opowiada - jak wspomniałem wyżej - o gradientach. Gradient to stopniowa zmiana koloru. Gradient może być liniowy lub okrągły. Poniższa ramka przedstawia zastosowanie zaokrągleń i gradientów.

---

Lekcja piętnasta mówi o przejściach - transitions. Przejście może dotyczyć np. zmiany tła, koloro czcionki jakiegoś tekstu rozciągniętego w czasie. Poniżej przykład takiego przejścia. Najechanie na złoty pasek sprawi, że pomarańczowy kwadrat zacznie przesuwać się w prawo.
Początkowo, pasek oraz kwadrat mają ustalone kolory, szerokości i wysokości. Dodatkowo, pasek ma ustawiona właściwość transition: 3s margin-left linear, co oznacza, że przejście działa na margines od lewej w czasie 3s, przy przejściu liniowym. Najechanie na pasek (div.pasek:hover kwadrat) sprawi, że kwadrat przyjmuje margines od lewej, czyli przesunie się płynnie w czasie 3 s z lewej do prawej.

---

Lekcja szesnasta mówi o transformacjach 2D, czyli o zwiększeniu efektowności strony. Stosuje się m.in. 4 transformacje, zaprezentowane poniżej:
transform: scale(1.5) powiększy dany element 1.5 raza

transform: rotate(180deg) obróci element o 180 stopni

transform: translate(100px) przesunie element o 100px w prawo

transform: skew(20deg) skrzywi element o 20 stopni

---

Lekcja siedemnasta opowiada o animacjach, czyli połączeniu pewnych transformacji w ciąg. Animacje można tworzyć na dwa sposoby: wykorzystując formę from{} to{} lub dzieląc animację na części, które odpowiadają % czasu trwania animacji. Wcześniej, do nazwanej animacji należy się odwołać poprzez @keyframes nazwa_animacji. Poniżej znajduje się animacja, która w nieskończoność (infinite) przesuwa się w prawo, a potem w lewo. Najechanie na bloczek sprawi, że animacja się zatrzyma.

---

Lekcja osiemnasta mówi o transformacjach 3D - rzecz przyjemna dla oka, lecz rozbudowana. Poniżej stworzyłem przykład takiej animacji 3D.

---

Lekcja dziewiętnasta to utrwalenie wiadomości o transformacjach 3D poprzez stworzenie kostki sześciennej znajdującej się niżej. Niestety, mimo podązania krok w krok za instruktorem kursu, kostka dla różnych przeglądarek i różnych komputerów wyglądała inaczej lub w ogóle nie wyglądała. Jej tworzenie polegało na stworzeniu 6 divów - każdy odzwierciedlał jedną ściankę. Każdej ściance nadano odmienny kolor oraz ustawiono tak, by odwzorowywała swoje miejsce w kostce. Cała kostka została poddana animacji.

---

Lekcja dwudziesta dotyczyła nowości zwiazanych z tłem. Można je przycinać, dopasowywać do bloku w którym się znajduje, a dodatkowo, kiedy obrazek będący tłem jest zdecydowanie większy od bloku, można go odpowiednio przekształcić używając background-size: contain. Poniżej przykładowe użycie wspomnianych właściwości. Wykorzystano tutaj background-clip oraz 3 wartości: kolejno content-box, padding-box i border-box . Wykorzystując obrazki jako tło, z podobymi wartościami wykorzystuje się właściwość background-origin:.

---

Lekcja dwudziesta pierwsza mówi o ułożeniu tekstu w kolumnach. Poniższy tekst składa się z 3 kolumn (column-count: 3;), odstępu między nimi 75px (colum,n-gap: 75px;) oraz paska oddzielającego (column-rule:).

---

W tej sekcji poznałem CSS 3. Kolejna sekcja dotyczy FlexBoxa w CSS 3.