Ściąga z CSS cz.2

Kolejna porcja kodu. Tym razem cechy umieszczane w nawiasie klamrowym za selektorem. Pamiętajcie, by rozdzielać je średnikiem. Serio, to mój najczęstszy problem.

Cechy:

• animation-delay: - określa opóźnienie bądź przyspieszenie animacji przy pierwszym odtworzeniu, w sekundach (wartość ujemna przyspiesza)
• animation-direction: - kierunek odtwarzania animacji: normal od początku w domyślnym kierunku; alternate w kierunku odwrotnym; reverse od końca; reverse-alternate - od końca w kierunku odwrotnym
• animation-duration: - określa czas trwania animacji w sekundach
• animation-fill-mode: - wygląd elementu HTML przed lub po wykonaniu animacji; forwards - po zakończeniu zostaje ostatni podpounkt, backwards - zostaje pierwszy punkt, both - przed animacją pierwszy slajd; po animacji ostatni; none - brak dodatkowego stylu.
• animation-iteration-count: - określa ilość powtórzeń animacji, albo infinite (w nieskończoność) albo liczba
• animation-name: - nazwa animacji, którą chcemy użyć
• animation-timing-function: - określa tempo animacji, może być linear (stałe), ease-in (wolniejsze na początku), ease-out (wolniejsze na końcu), ease-in-out (wolniejsze na początku i końcu), cbic-bezier() (własne, określone w nawiasie, ale nie wiem, jak), steps() (z ilością klatek), step-start (ilość klatek taka sama, jak ilość podpunktów animacji, pierwszy ignorowany) step-end (ilość klatek taka sama, jak ilość podpunktów animacji, ostatni ignorowany) i wreszcie ease (domyślny)
• animation-play-state: - zatrzymanie lub wznowienie animacji, running lub paused
• background-color: - kolor tła, możemy go ustawić szesnastkowo, za pomocą angielskiego słowa (147 kolorów i ten nawias to będzie kiedyś link), albo za pomocą rgb, lub nawet rgba, wtedy mamy od razu przezroczystość. Kolory wszystkiego ustawia się tymi samymi sposobami. Przykłady: 

                - background-color: red;
                - background-color: #ff0000;
                - background-color: rgb(255,0,0,);
                - background-color: rgba(255,0,0,0.4);

• background-image: - umieszczenie obrazka jako tło, dalej url obrazka, url:'adres'. Oprócz tego dzięki tej właściwości można umieścić gradient jako tło. 

                - linear-gradient(kolor1, kolor2) - przez całą wysokość elementu zrobi się gradient w tych kolorach, 1 na górze, 2 na dole, zawsze ostatni podany będzie na samym dole, a pierwszy na szczycie, zaś pozostałe rozłożą się równomiernie
                - linear-gradient(kolor1 X%, kolor2 Y%) - procent ustawia wysokość na jakiej będzie dany kolor, przy czym im mniejszy, tym wyżej

                - linear-gradient(to left, kolor1 X%, kolor2 Y%) - domyślny był od góry ku dołowi, dodanie wartości to left, to right, to top, to to left... określa kierunek, można to też zrobić w stopniach (np. 45deg)

                - repeating-linear-gradient(kolor1 X%, kolor2 Y%) - jeśli np. zostawicie dolny kolor w połowie wysokości, to gradient pod dolnym kolorem się powtórzy
                - radial-gradient - robi gradient w kształcie kółka, kolory ustawia się ponownie, ale jeśli kończy się ostatnim kolorem nie na setnym procencie, to gradient się nie powtarza, a po prostu reszta elementu jest wypełniona ostatnim kolorem
                - radial-gradient(ellipse, kolor1 X%, kolor2 Y%) - gradient w kształcie elipsy, domyślny, rozciągnięty do dwóch najbliższych krawędzi
                - radial-gradient(circle, kolor1 X%, kolor2 Y%) - gradient w kształcie koła, rozciągnięty do dwóch najdalszych krawędzi, domyślnie umieszcza się w środku, ale można po circle dodać np. at top center, by ustalić położenie (przy tylko jednej wartości, druga to automatycznie center),
                - można też zaraz na początku nawiasu dodać dokładne wymiary koła lub elipsy, w pikselach oczywiście, przy czym elipsa ma dwie wartości, koło jedną

• border-color: - kolor ramki
• border-radius: - zaokrąglenie rogów odmierzone w pikselach lub procentach, jeśli poda się jedną wartość zaokrąglą się wszystkie rogi, jeśli poda się cztery różne to zaokrąglą się różnie, przy czym najpierw lewy górny, potem prawy górny, prawy dolny i lewy dolny, 
• border-spacing: - w tabeli można tym ustalić odstępy między komórkami (a marginesy w komórkach za pomocą padding)
• border-style: - rodzaj ramki, może być solid (zwykła), double (podwójna), dotted (kropkowana) i dashed (kreskowana), groove (wypukła), ridge (wklęsła) i outset (taka, jakby to obrazek był wypukły), w ramkach generalnie można podawać kilka wartości, więc np. border-style: dotted, dashed, da nam piony kropkowane, a poziomy kreskowane, da się też wpisywać takie rzeczy jak border-top-style (sama górna część). 
• border-width: - szerokość ramki w pikselach
• box-shadow: - cień elementu, piszecie za nim dwie wartości oznaczające przesunięcie cienia w pionie i poziomie, potem w pikselach jego rozmycie, a na koniec kolor, np. selektor {box-shadow:0 0 8px #666666;}
• color: - kolor tekstu, 
• content: -zawartość, można dodać zamknięcie lub otworzenie cudzysłowu (open-quote, close-quote; ma sens, gdy dodamy :before lub :after do selektora), a także wpisać dowolny tekst ("cośtam") i dodać obrazek przez url("link")
• cursor: - rodzaj kursora przy najeżdżaniu na element, ogarnę to kiedyś,
• display: - to jak element jest wyświetlany, block sprawia wyświetlanie elementu oddzielnie, inline jako dalszą część linijki, a none - zniknięcie; można też wyświetlać jako tabelę (table) i wiele innych - jest długa lista możliwości, kiedyś to ogarnę,
• filter: lub -webkit-filter: - a najlepiej oba, żeby zadziałało, po dwukropku funkcja(liczba); pozwala zmienić wygląd obrazka, np. zrobić, by był w sepii po najechaniu myszką. W miejsce słowa procent piszemy wartość od 1 do 0, przy jedynce działa najbardziej, jak się da, przy zerze nic się nie dziej, albo procent: 100%=1; 0%=0; nasze możliwości to:

                - brightness - jaskrawość lub jasność,  w miejsce słowa liczba piszemy wartość od 1 do 0, przy jedynce działa najbardziej, jak się da, przy zerze nic się nie dziej, albo procent: 100%=1; 0%=0;

                - blur - rozmycie; wartość w pikselach, radziłabym ostrożnie z tą właściwością;

                - contrast - poprawiamy kontrast, liczby mogą być większe od jedynki;

                - drop-shadow - cień obrazka; w nawiasie to co podajemy po właściwości box-shadow, inset nie działa;

                - grayscale - czyli skala szarości, usuwa kolory; liczby i procenty;

                - hue-rotate - podajemy w stopniach, zmienia (odwraca) kolory, 180deg to zupełne odwrócenie kolorów;

                - invert - w procentach i liczbach robimy negatyw (100%);

                - opacity - działa jak normalna opacity, która jest dalej;

                - saturate - nasycenie kolorów, procenty i liczby, można dawać wartości większe niż 100%;

                - sepia - nie ma potrzeby tłumaczyć, wartość w liczbach i procentach;

                - url - w nawiasie link do miejsca, gdzie zapisaliście inny filtr;

• font-size: - rozmiar czcionki w pikselach px punktach pt milimetrach mm calach in
• font-family:  i dalej nazwa czcionki, jeśli ma spacje w apostrofach - określa czcionkę, lub rodzaj czcionki, możecie wpisać serif, sans-serif i inne rodzaje. Można najpierw podać wymarzoną czcionkę, potem czcionkę zbliżoną do niej, która wyświetli się, jeśli użytkownik nie ma wymarzonej. Może ich być w zasadzie dowolnie dużo, a na koniec można dodać ogólną rodzinę. Np. selektor {font-family: arial, helvetica, sans-serif}. 
• font-weight: - rodzaj czcionki, m. in. normal i bold
• font-variant: - wpisujemy ,,small-caps" przez co wszystkie litery są wielkie, a początki wyrazów nieco większe albo ,,normal" i są wtedy normalne
• height: - wysokość elementu; 
• @keyframes: nazwa_animacji - pozwala określić animacji, niżej w nawiasach klamrowych opisujemy animację; właściwie jak selektor

                - @keyframes: nazwa_animacji

                {0% {background: white;}

                50% {background: pink;}

                100% {background: white;}

                - może być dowolnie dużo punktów z procentami i właściwości w tych podpunktach

• letter-spacing: -odległość między literami normal lub w pikselach px punktach pt milimetrach mm calach in,
• margin:- margines zewnętrzny, piszemy margin-top: i tutaj wartość w pikselach, wiadomo, może być top, bottom, right, left, top
• opacity: - przezroczystość, wpisujemy jej wartość tak jakby 1 było nieprzezroczystością, zaś 0 przezroczystością całkowitą, a my mamy do wyboru wartości pośrednie. Zamiast przecinka jest oczywiście kropka. 
• overflow: - ta właściwość określa co się dzieje z zawartością wystającą poza element (gdy macie np. ustawioną wysokość 500px, a tekst zajmuje więcej), scroll - pojawia się suwak; auto - suwak się pojawia, gdy istnieje nadmiar zawartości, hidden - nadprogramowa zawartość znika, visible - jest normalnie widoczna poza elementem
• padding: - margines wewnętrzny,używamy podobnie do margin
• position: - do pozycjonowania, np. position: relative; daje możliwość określania przesunięcia względem poprzedniego położenia, dalej piszemy top, bottom, left, right i wartość w pikselach, przesunie się od danej krawędzi. Top ma pierwszeństwo przed bottom, a left przed right. Przy czym wygląda to tak: selektor {position: relative; left: -20px; top: -20px;

                - jest jeszcze absolute, ustawia się to względem granic bloga; position: absolute; right: 0px sprawi, że element zawsze (bo staje się nieruchomy) będzie przy prawej granicy ekranu;
                - i fixed, które nie do końca wiem, jak działa, ale metodą prób i błędów coś tym ustawiałam; na końcu element też był nieruchomy

• text-align: - wyrównanie akapitu left, right, center, justify
• text-decoration: - podkreślenia (underline), przekreślenia (line-through) i linie nad tekstem (overline)
• text-indent: - a potem w pikselach ile chcemy mieć akapitu, oszczędza robienia spacji. 
• text-shadow: - cień tekstu, ustawiamy go tak jak box-shadow
• text-transform: - można tym ustawić same wielkie litery (uppercase) lub same małe (lowercase) albo sprawić, by każdy wyraz był pisany wielką literą (capitalize)
• transform: rotate(Xdeg) - zamiast X wpisujecie kąt o jaki ma się rzecz obrócić, może być kilka obrotów - dużo stopni - albo obrót w lewo przy ujemnej wartości

                - a tak na marginesie, to można sobie też obrócić wokół osi X lub Y: rotateY albo rotateX, a jak obrócicie o 90 stopni, to element tak fajnie znika

                - a jeszcze fajniejsze jest obracanie w 3d rotate3d(X, Y, Z, ?deg), znak zapytania oznacza stopnie, litery oznaczają miejsce, gdzie trzeba wpisać ile razy pomnożyć te stopnie przy obrocie wokół osi X, Y i Z. Czyli np. same jedynki w miejsce liter i 90 zamiast znaku zapytania oznaczają, że element obróci się o 90 stopni wokół każdej osi. A wpiszcie transform: rotate3d(1,1,1,360deg), to jest czaderskie. 

                - o ile przy wartościach rotate3d(1,2,1,90deg) wszystko działało, o tyle rotate3d(4,4,4,90deg) wcale nie wyszło jak rotate3d(1,1,1,360deg), zatem chyba jednak cyferki oznaczają co innego

• transform: skew(Xdeg, Ydeg) - wyobraźcie sobie układ współrzędnych. Poprzedni obraca po płaszczyźnie układu, ten obraca wokół jednej z osi (zamiast liczb wpisałam literę oznaczająco oś), wygląda jak pochylenie. 
• transform: translate(Xpx, Ypx) - suwa po tym układzie, przy czym dodatnie Y są w dole, a dodatnie X po prawej
• transition-delay: - za pomocą sekund lub milisekund (ms) określa opóźnienie bądź przyspieszenie przejścia
• transition-duration: - czas na przejście w sekundach
• transition-property: - określa, które elementy biorą udział w efekcie przejścia; none - nic; all - wszystkie, które po najechaniu są inne, albo tylko wybrane (np. kolor tekstu się zmienia bez przejścia, a tła z przejściem: transition-property: background-color;)
• transition-timing-function: - działa tak samo, jak ta funkcja w animacji
• white-space: - podobno ma wpływ na to, czy wyświetlają się białe znaki, jak jest normal, to wygląda, jak zwykle, jak nowrap, to nie ma zawijania wierszy, a jak wpisałam pre, to wszystko się w każdą stronę rozstrzeliło: Autorka: w jednej linijce, ileś linijek niżej Sławomira, a jeszcze niżej o i godzina gdzieś... w ogóle chaos. 
• width: - szerokość
• word-spacing: - odstępy między słowami

O skróconych zapisach też warto by napisać.

Część pierwsza
Część trzecia
Część czwarta