Tło elementu i tło strony, obraz oraz gradient w tle, cień box-shadow, zaokrąglenie narożników, kontur outline, płynna zmiana transition i animacja z regułą @keyframes. Lekcja 4.9 kursu INF.03.
Efekty wizualne w CSS to właściwości, które zmieniają wygląd pudełka, nie ruszając jego rozmiaru ani układu strony: tło, gradient, cień, zaokrąglenie narożników, płynna zmiana wartości i animacja. W części pisemnej wracają pytania „która wartość background-attachment daje tło nieruchome względem okna", „czym staje się plik rys.gif podstawiony pod punktor listy", „co określa animation-duration" i „czym uzyskać kolor poza obramowaniem". W zadaniu praktycznym arkusz podaje kolory tła sekcji, zaokrąglenie narożników 5 px i gotową składnię cienia do przepisania, a podstawa programowa wymaga osobno wykonania animacji na potrzeby strony internetowej.
Tło elementu i tło strony
Tło to obszar pod treścią elementu, wypełniony kolorem, obrazem albo obydwoma naraz. Ciągnie się pod treścią i pod marginesami wewnętrznymi, aż do zewnętrznej krawędzi obramowania, a na marginesy zewnętrzne nie wychodzi. Właściwości tła jest sześć i działają na dowolnym elemencie: na body, na sekcji, na akapicie, na komórce tabeli.
background-color
Tomato, #00838F, rgb(0, 131, 143), transparent
background-image
url("obrazy/tlo.png"), gradient, none
background-repeat
repeat, repeat-x, repeat-y, no-repeat
background-position
left top, center, 50% 50%, 20px 10px
background-size
cover, contain, auto, 100% 200px
background-attachment
scroll, fixed, local
Obraz w tle podaje się funkcją url() (adres), a ścieżka w nawiasie liczy się względem PLIKU CSS, nie względem dokumentu HTML. Arkusz styl.css sklepu leży obok index.html, więc widzi obrazek tak samo jak strona: url("obrazy/tlo.png"). Gdyby arkusz leżał w podkatalogu css, musiałby najpierw wyjść poziom wyżej: url("obrazy/tlo.png"). To najczęstsza przyczyna tła, którego nie widać.
body {
background-color: #f4f4f4;
background-image: url("obrazy/tlo.png");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed;
}
background-repeat decyduje o powielaniu: domyślne repeat układa kafelki w obu kierunkach, repeat-x tylko w poziomie, repeat-y tylko w pionie, no-repeat pokazuje obraz jeden raz. background-size skaluje: cover powiększa obraz tak, żeby pokrył całe pole, i część obrazu wychodzi wtedy poza kadr, a contain mieści go w całości, więc obok zostaje wolne miejsce. background-attachment mówi, czy tło jedzie razem z treścią: scroll przewija się ze stroną, a fixed zostaje nieruchome względem okna przeglądarki, więc treść sunie po stojącym obrazie. Sześć wartości mieści skrót background, gdzie idą po spacji.
header {
background: DarkSlateGray url("obrazy/baner.png") no-repeat center;
}
Tło strony to po prostu tło elementu body, a tło bloku to tło elementu wskazanego selektorem. Właściwość background-image z plikiem rysunek.png przy selektorze p daje ten plik jako tło KAŻDEGO paragrafu: nie tło całej strony, bo selektorem nie jest body, i nie obrazek obok tekstu, bo obraz w treści wstawia znacznik <img>. Kolor i obraz wolno nałożyć na siebie: kolor leży pod obrazem i widać go tam, gdzie obraz nie sięga.
Gradient jako obraz tła
Gradient to płynne przejście między kolorami, wyliczane przez przeglądarkę zamiast pobierania pliku. Formalnie jest obrazem, więc trafia do background-image albo do skrótu background, a nie do background-color.
linear-gradient() (gradient liniowy) prowadzi kolory wzdłuż prostej. Pierwszy argument podaje kierunek: słowami to right, to bottom, to bottom right albo kątem, gdzie 0deg prowadzi od dołu do góry, a 45deg obraca oś zgodnie z ruchem wskazówek zegara. Pominięty kierunek znaczy to bottom. Dalej idą kolory, co najmniej dwa, rozdzielone przecinkami, a każdy może dostać swoje miejsce w procentach. radial-gradient() (gradient kolisty) rozchodzi się od punktu na zewnątrz, więc daje plamę światła zamiast pasa.
.baner {
background-image: linear-gradient(to right, Tomato, DarkSlateGray);
}
.wstega {
background-image: linear-gradient(45deg, Tomato 0%, Gold 50%, Tomato 100%);
}
.plama {
background-image: radial-gradient(DeepSkyBlue, DarkSlateGray);
}
Cienie, zaokrąglenia i kontur
Cień to rozmyta kopia kształtu elementu, rysowana pod nim z przesunięciem. box-shadow (cień pudełka) przyjmuje wartości w stałej kolejności: przesunięcie w poziomie, przesunięcie w pionie, rozmycie, kolor. Liczby dodatnie przesuwają cień w prawo i w dół. Piąta liczba to rozrost cienia, a słowo inset przenosi cień do wnętrza pudełka. text-shadow (cień tekstu) działa tak samo, ale dotyczy samych liter.
border-radius (zaokrąglenie narożników) ścina rogi łukiem o podanym promieniu. Jedna wartość zaokrągla wszystkie cztery narożniki, cztery wartości działają po kolei od lewego górnego, zgodnie z ruchem wskazówek zegara. Wartość w procentach liczy się od rozmiaru pudełka, więc border-radius: 50% zamienia kwadrat w koło, a prostokąt w elipsę. Arkusze CKE proszą o to zdaniem „zaokrąglenie narożników 5 px".
outline (kontur) rysuje linię NA ZEWNĄTRZ obramowania i, w odróżnieniu od border (obramowanie), nie zajmuje miejsca w modelu pudełkowym: nie powiększa elementu ani nie przesuwa sąsiadów, tylko kładzie się na tym, co obok. Składnia jest ta sama co przy obramowaniu: grubość, styl, kolor. Rozmiary pudełka liczy lekcja o modelu pudełkowym. article {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 5px 5px 10px gray;
}
.wyroznik {
outline: 2px solid Tomato;
text-shadow: 1px 1px 2px #222;
}
opacity (krycie) ustawia przezroczystość CAŁEGO elementu razem z zawartością, w skali od 0 (niewidoczny, choć nadal zajmuje miejsce) do 1 (pełne krycie). Gdy przezroczyste ma być samo tło, a tekst ma zostać czytelny, używa się koloru z kanałem alfa: rgba(0, 0, 0, 0.5).
Punktor listy zmieniają dwie właściwości. list-style-type wybiera gotowy znak: disc (kropka), circle, square, decimal, upper-roman, none. list-style-image podstawia w miejsce punktora plik graficzny, więc zapis list-style-image: url("rys.gif") przy selektorze ul robi z tego obrazka punktor listy nienumerowanej, a nie tło ani ramkę listy. cursor zmienia kształt wskaźnika myszy nad elementem: pointer daje rączkę jak nad odnośnikiem, a dalej są default, text, wait i not-allowed.
transition: płynna zmiana wartości
transition (przejście) to płynna zmiana wartości właściwości między dwoma stanami, rozłożona w czasie. Bez niej kolor tła po najechaniu myszą przeskakuje w jednej klatce. Przejście opisują cztery części, podawane w tej kolejności.
›
transition-property: nazwa zmienianej właściwości, na przykład background-color, albo all dla wszystkich naraz.
›
transition-duration: czas zmiany, w sekundach (0.3s) albo milisekundach (300ms). Bez tej wartości nie widać niczego, bo domyślny czas to zero.
›
transition-timing-function: rozkład tempa, czyli ease (start wolniejszy), linear (równo), ease-in, ease-out.
›
transition-delay: opóźnienie przed startem zmiany.
Przejście zapisuje się w stanie SPOCZYNKOWYM elementu, nie w docelowym, i dzięki temu działa w obie strony: przy najechaniu i przy zjechaniu myszą. Stan docelowy podaje pseudoklasa, tutaj :hover (najechanie), opisana w lekcji o pseudoklasach i pseudoelementach. .przycisk {
background-color: DarkSlateGray;
transition: background-color 0.3s ease;
}
.przycisk:hover {
background-color: Tomato;
}
transform (przekształcenie) przesuwa, obraca i skaluje element, nie ruszając miejsca, które zajmuje on w układzie: scale(1.05) powiększa o 5 procent, rotate(45deg) obraca o 45 stopni, translate(10px, 0) przesuwa w prawo. Łączy się z transition i z animacją, bo zmienia się płynnie.
animation i reguła @keyframes
Animacja w CSS to zmiana wyglądu elementu w czasie, opisana klatkami kluczowymi i uruchamiana sama, bez działania użytkownika. Tym różni się od transition, które czeka na stan w rodzaju :hover. Pisze się ją w dwóch krokach: reguła @keyframes opisuje przebieg, a właściwości animation-* podpinają go pod element. @keyframes dostaje własną NAZWĘ, a w środku stoją klatki: dwie wystarczy opisać słowami from i to, więcej podaje się w procentach czasu (0%, 50%, 100%).
animation-name
nazwa reguły @keyframes do odtworzenia
animation-duration
czas trwania JEDNEGO cyklu, na przykład 2s
animation-iteration-count
liczba powtórzeń: liczba albo infinite
animation-delay
opóźnienie przed pierwszym cyklem
animation-direction
kierunek: normal, reverse, alternate
animation-timing-function
rozkład tempa: ease, linear, ease-in-out
@keyframes pulsowanie {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.promocja {
animation: pulsowanie 2s infinite alternate;
}
Napis „Promocja" w bloku o klasie promocja gaśnie w ciągu dwóch sekund do 30 procent krycia, a alternate odwraca kierunek co cykl, więc wraca płynnie zamiast przeskakiwać do pełnego koloru. Bez infinite całość odegrałaby się raz. Skrót animation przyjmuje wartości po spacji w kolejności: nazwa, czas cyklu, liczba powtórzeń, kierunek, czyli cztery właściwości z tabeli wyżej.
Podstawa programowa mówi o wykonaniu animacji na potrzeby strony internetowej i nie zawęża tego do CSS. Poza arkuszem stylów animację robi się na cztery sposoby: animowany GIF (gotowy plik z klatkami, ograniczona paleta, bez dźwięku), SVG (grafika wektorowa, skaluje się bez utraty jakości), JavaScript (skrypt zmieniający style w czasie, reaguje na dane i zdarzenia) oraz canvas (płótno, na którym skrypt rysuje każdą klatkę, stąd gry i wykresy). CSS wystarcza do efektów interfejsu, a pliki graficzne i skrypty wchodzą tam, gdzie animacja niesie treść. Wracają do tego działy o grafice i o JavaScripcie.
Efekty na stronie sklepu
Arkusz stylów sklepu komputerowego dostaje trzy dopiski: gradient w banerze, karty produktów z cieniem i zaokrągleniem oraz menu z płynną zmianą tła.
header {
background-image: linear-gradient(to right, DarkSlateGray, #00838F);
}
main article {
background-color: white;
border-radius: 5px;
box-shadow: 5px 5px 10px gray;
}
nav a {
transition: background-color 0.3s linear;
}
nav a:hover {
background-color: Tomato;
}
Baner przechodzi od DarkSlateGray po lewej do turkusu #00838F po prawej. Każdy artykuł z opisem produktu leży na białym prostokącie o ściętych rogach, z szarym cieniem przesuniętym o 5 px w prawo i w dół oraz rozmytym na 10 px. Odnośniki w menu po najechaniu myszą dochodzą do koloru Tomato w ciągu trzech dziesiątych sekundy i tak samo płynnie wracają. Układ nie drgnie przy żadnym z tych efektów, bo żaden nie zmienia rozmiaru pudełka.
Na egzaminie
Pytania pisemne o efekty wizualne mają kilka stałych kształtów. Wartość background-attachment dająca tło nieruchome względem okna przeglądarki to fixed, a nie scroll ani local. Zapis z list-style-image i plikiem rys.gif znaczy, że ten obrazek staje się punktorem listy nienumerowanej, a nie jej tłem ani ramką. background-image z plikiem rysunek.png przy selektorze p daje tło KAŻDEGO paragrafu, bo selektor decyduje, co dostaje tło. Tło powtarzane wyłącznie w poziomie to background-repeat: repeat-x. animation-duration określa czas trwania jednego cyklu animacji, a nie liczbę powtórzeń, którą ustawia animation-iteration-count, nie kierunek z animation-direction i nie opóźnienie startu z animation-delay. Czerwony kolor POZA obramowaniem akapitu daje outline, bo border rysuje samo obramowanie, padding odsuwa treść od niego, a background wypełnia wnętrze. Wraca też rysunek z kilkoma akapitami i pytanie, dla którego zastosowano border-radius: ten z rogami ściętymi łukiem.
Pułapka: ścieżka w url() liczy się od położenia pliku CSS, nie od pliku HTML. Arkusz przeniesiony do podkatalogu css musi sięgać po obraz zapisem url("../obrazy/tlo.png").
W zadaniu praktycznym te właściwości wracają w trzech miejscach. Cień arkusz podaje GOTOWĄ składnią w treści polecenia i przepisuje się ją co do znaku, bez zamiany liczb na własne. Zaokrąglenie narożników 5 px to border-radius: 5px w selektorze wskazanego bloku. Kolory tła arkusz wypisuje nazwą albo szesnastkowo, na przykład „kolor tła banera DeepSkyBlue", „kolor tła stopki Maroon", #00838F, i wpisuje się je dokładnie, bo podobny odcień punktu nie daje. Wszystko idzie do zewnętrznego pliku dołączonego przez <link>, a styl w atrybucie style kosztuje punkt. Animacja bywa w arkuszu rzadko, ale kryterium podstawy mówi wprost o wykonaniu animacji na potrzeby strony, więc pulsujący napis i płynne podświetlenie menu trzeba umieć napisać z pamięci.
Ściąga
background-color: Tomato
kolor tła elementu
background-image: url("obrazy/tlo.png")
obraz w tle, ścieżka liczona od pliku CSS
background-repeat: repeat-x
tło powtarzane wyłącznie w poziomie
background-size: cover
obraz pokrywa całe pole, część wychodzi poza kadr
background-attachment: fixed
tło nieruchome względem okna przeglądarki
linear-gradient(to right, Tomato, DarkSlateGray)
przejście kolorów wzdłuż prostej, wartość dla background-image
box-shadow: 5px 5px 10px gray
cień: w prawo, w dół, rozmycie, kolor
border-radius: 5px
zaokrąglenie narożników 5 px, 50% daje koło
outline: 2px solid Tomato
kontur poza obramowaniem, nie zajmuje miejsca
opacity: 0.5
krycie całego elementu, od 0 do 1
list-style-image: url("rys.gif")
plik graficzny jako punktor listy
transition: background-color 0.3s ease
płynna zmiana tła w ciągu 0,3 sekundy
animation-duration: 2s
czas trwania jednego cyklu animacji
animation-iteration-count: infinite
animacja powtarzana bez końca