Tła i obramowania w CSS
CSS umożliwia szczegółowe kontrolowanie wyglądu elementów poprzez tła (kolory, obrazy, gradienty) oraz obramowania (linie, zaokrąglenia, cienie). Dzięki nim można uzyskać estetyczny, nowoczesny i atrakcyjny wizualnie interfejs.
1. Tła (background)
a) Kolory w tle
Najprostsze tło można ustawić kolorem:
- Wartość może być podana jako nazwa koloru, HEX, RGB(A), HSL(A).
- Domyślnie tło wypełnia cały obszar elementu, łącznie z paddingiem (ale nie marginesem).
b) Obrazy w tle
Obrazy można wczytywać za pomocą background-image:
Dodatkowe właściwości:
background-repeat:repeat(domyślne),no-repeat,repeat-x,repeat-y.background-size:auto,cover(dopasowanie do całego elementu),contain(dopasowanie, zachowując proporcje).background-position:left top,center,right bottom, wartości procentowe lub piksele.background-attachment:scroll(przewija się z treścią),fixed(pozostaje nieruchome),local.
Przykład:
Efekt background-attachment: fixed często używany jest w tzw. parallax effect.
c) Skrócona składnia (background)
Możemy połączyć wszystkie właściwości w jednej linijce:
2. Gradienty w tle
Gradienty w CSS traktowane są jak obrazy tła (background-image). Dzięki nim można tworzyć płynne przejścia między kolorami.
a) Gradient liniowy (linear-gradient)
Tworzy przejście kolorów w linii prostej. Składnia:
Przykłady:
Można podawać wiele kolorów i punkty procentowe:
b) Gradient radialny (radial-gradient)
Tworzy przejście od środka koła lub elipsy. Składnia:
Przykłady:
c) Gradient stożkowy (conic-gradient)
Nowy typ gradientu (CSS3) – rozchodzący się wokół punktu w kształcie stożka. Składnia:
Przykłady:
Świetnie nadaje się do tworzenia diagramów kołowych i efektów wizualnych.
3. Obramowania (border)
Obramowania pozwalają dodawać linie wokół elementów.
a) Podstawowe obramowanie
Składnia:
Przykład:
Dostępne style obramowań:
solid– pełna linia,dashed– przerywana,dotted– kropkowana,double– podwójna linia,groove,ridge,inset,outset– efekty 3D,none– brak obramowania.
Można też ustawić osobno dla każdej krawędzi:
b) Zaokrąglone rogi (border-radius)
Pozwala zaokrąglić rogi elementu.
border-radius: 50%→ koło/okrąg (jeśli element jest kwadratem).- Można definiować różne wartości dla poszczególnych rogów:
c) Cienie (box-shadow)
Dodaje cień do elementu (nie tylko do tekstu). Składnia:
Przykład:
offset-x,offset-y– przesunięcie cienia (poziomo, pionowo),blur– rozmycie,spread– rozprzestrzenienie,color– kolor (zazwyczaj półprzezroczysty).
Można stosować wiele cieni oddzielonych przecinkami: