Tło i obramowanie w CSS3

Plansza interaktywna styczeń 2015

URL:
http://www.plotkarka.eu/PI/css3-background/
Autor:
Radosław Kowaluk

Właściwości tła

Kolor tła
background-color:
color transparent;
np. background-color: gainsboro; background-color: transparent;
Obraz tła
background-image:
imagenone;
np. background: url(w3c.logo.png);background: none;
Powtarzanie grafiki tła
background-repeat:
repeat-x; repeat-y; repeat; no-repeat;
repeat-x; repeat-y; repeat; no-repeat;
Pozycja tła (można defiować length lub percentage - Przykład 1.)
background-position: left; center; right;
top; left top; center top; right top;
center; left center; center center; right center;
bottom; left bottom; center bottom; right bottom;
Sposób przewijania tła (Przykład 1)
background-attachment:
scroll;fixed;

Właściwości tła

Przycięcie obrazu tła CSS3
background-clip:
border-box; padding-box; content-box;
border-box;
padding-box;
content-box;
Dopasowanie obrazu tła CSS3
background-origin:
border-box; padding-box; content-box;
border-box;
padding-box;
content-box;
Wielkość obrazu tła CSS 3 (można defiować cover; contain;)
background-size: length percentage auto;
length 10px 10px; 50% 20px; auto 20px;
percentage 10px 50%; 50% 50%; auto 50%;
auto 10px auto; 50% auto; auto auto;
Tło i multitło CSS 3
background:
background-image || background-position || background-repeat || background-attachment || background-color
np. background: url('logo.w3c.png') no-repeat right;
[ bg-layer , ]* final-bg-layer

Multitło

Właściwości obramowania

Kolor obramowania; Kolor obramowania: lewy, prawy, górny, dolny
border-color:
color {1,4}

np. border-color: silver gray;
Kolor obramowania; Kolor obramowania: lewy, prawy, górny, dolny
border-left-color: border-right-color: border-top-color: border-bottom-color:
color
Styl obramowania; Styl obramowania: lewy, prawy, górny, dolny
border-style:
line-style {1,4}

none;

hidden;

dashed;

groove;

solid;

dotted;

double;

ridge;

inset;

outset;
Styl obramowania: lewy, prawy, górny, dolny
border-left-style: border-right-style: border-top-style: border-bottom-style:
line-style
Szerokość linii; Szerokość linii: lewej, prawej, górnej, dolnej.
border-width:
line-width {1,4}

thin;

medium;

thick;

length np. 4px;
Szerokość linii; Szerokość linii: lewej, prawej, górnej, dolnej.
border-left-width: border-right-width: border-top-width: border-bottom-width:
line-width
Obramowania: wszystkie, lewe, prawe, górne, dolne
border: border-left: border-right: border-top: border-bottom:
border-width||border-style||border-color

np. border-bottom: solid gray;

np. border-bottom: 2px solid;

np. border-bottom: 2px solid gray;

Właściwości obramowania

Efekty, zaokrąglone narożniki, Obramowanie obrazem

Wszystkie, górne lewe i prawe oraz dolne lewe i prawe CSS 3
border-radius:border-top-left-radius:border-top-right-radius:border-bottom-left-radius: border-bottom-right-radius:
length | percentage {1,4} length | percentage/length | percentage

np. 10px;

np. 5px/10px;

length | percentage

10px

10px

10px

10px
Obramowanie obrazem CSS3 źródło obrazu, Sposób powtarzania, Szerokość obramowania, Obramowanie zewnętrzne, Sposób powtarzania
border-image:
border-image-source || border-image-slice [ / border-image-width | / border-image-width? / border-image-outset ]? || border-image-repeat

np. border-image: url(w3c.logo.png) 10 1 repeat;
Cień CSS3
box-shadow:
none; inset? && length {2,4} && color?

none;

np. box-shadow: 3px 3px;

np. box-shadow: inset 3px 3px 3px silver;

Właściwości obramowania