Please enable JavaScript.
Coggle requires JavaScript to display documents.
POŁOŻENIE ELEMENTÓW, TRANSFORM, ELEMENTY, TRANSITION:, POSITION: image …
POŁOŻENIE ELEMENTÓW
TRANSFORM
transform:
rotate(...deg)
-> obrót elementu
transform:
origin: ..%..%;
-> ustal śfodek obrotu
transform:
scate(0,5)
; -> powieksz/pomnijesz
transform:
scateX(-1);
-> odbicie lustrzane
transform:
skew(30deg);
-> pochylenie elementu / textu %
transform:
translate(-50%, -50%);
-> Przesuniecie w X i Y (np. wyśrodkowanie)
ELEMENTY
overflow:
overflow: hidden
;
-> nie wychodzi za box
overflow:scroll;
-> Zawartość przycina i dodaje pasek
overflow:auto;
-> dodaje pasek
TYLKO
gdy jest potrzeba
<a> </a>
->hiperłącze
displey:block;
-> cały element klikalny bo staje sie blokowy
cursor:pointer;
-> zmiana kursora
float: left;
-> ustawia box obok siebie
overflow: hidden
;
-> zlicza wysokość z dzieci na rodzica + nie wychodzi za box
filter:
bluer(..px); -rozmycie
brightness(0,2); jasne/ciemne
contrast(2);
grayscale(10%); - sk. szarości
opacity(50%); przeźroczyste
hue-rotate(100deg) koło barw
sepia(100%);
saturate(2); nasycenie
(łączenie fun. po spacji)
z-index:...;
warstwa w osi Z
TRANSITION:
transition: font-size 1s;
-> animuje tylko element określony (font zie 1s)
transition: left 0.5s, height 0.2s 0.5s;
-> skrót pierw w lewo później rośnij ( dodajemy po przecinku elementy i ich koleność)
:ease
- wolno szybko wolno
:lineare
- równo
-
:ease-in
- wolno - szybko
:ease-out
- szybko-wolno
:cubic-bezier(a, b, c, d)
- dowolna sekwencja
:
steps(3)
; podziel animacje na n elementów (np3)
transition:0,3s;
-> czas zmiany : (dodajemy w klasie pierwotnej)
transition: all 0.5s ease 0.2s;
-> SKRÓCONE:
wszystko
0.5s
rodzaj tempa
opóźnienie
( po przecinku dodajemy kolejne)
transition-dalay:0,2;
-> opóźnienie startu
POSITION:
konieczność ustawienia X i Y
- apsolute
- relative
- fixed
relative
; pozycjonuje od jego 1 położenia.
Nadaj na rodzica by dziecko ustawić w nim
position: sticky;
top: ...px;
-> poruszający sie element staje w wyznaczonym TOP.
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
-> wysierotkowanie elementu
Animacja w CSS
różne animacje do jednego elementu dodajemy po przecinku
animation:
nazwa
3s 1s normal infinite forwords both steps(10);
-> dodajemy do box który ma sie zmieniąć/ animować
Kolejne po przecinku jeśli jest więcej.
nazwa
czas trwania
opóźnienie
kierunek animacji
liczba powtórzeń (
infinite
- nieskończoność)
[ .4 - wykona sie cząstkowo np. 40%]
kończymy w miejscu 100%. -
forewerds
podczas opóźnienia pokazuje wartość 0% a nie pierwotną
both
podziel animacje na N elementów (10) -
steps(10)
animation
nazwa
5s infinite linear
alternate
:
-> wykonuj animację do końca i spowrotem.
KIERUNEK ANIMACJI
- normal
- alternat
- reverse
- alternat-reverse
animation-play-state: paused;
-> po najechaniu zatrzymaj w miejscu którym jesteś%
@ keyframes
nazwa
{
0%{...}
100% {...}
}
-> % stan animacji ( zapisujemy gdzie co ma być w danym %)
