Obraz i gradienty w CSS3

Jednostki rozdzielczości

Jednostki rozdzielczości

Jednosta	Opis
dpi	punkty na cal
dpcm	punkty na centymetr
dppx	punkty na "px"

Typ wartości Obraz

<image> = <url> | <image-list> | <element-reference> | <gradient>

Funkcje definiujące wypełnienie

Funkcja	Opis
url()	identyfikator pliku
image()	identyfikator obrazu
linear-gradient()	gradient liniowy
radial-gradient()	gradient radialny
repeating-linear-gradient()	powtarzanie gradiientu liniowego
repeating-radial-gradient()	powtarzanie gradiientu radialnego

Gradienty

<gradient> = [
<linear-gradient> | <radial-gradient> |
<repeating-linear-gradient> | <repeating-radial-gradient> ]

Gradient liniowy

Funkcja linear-gradient

background:
linear-gradient( [ [ angle | [ to left|right || top|bottom ] ] ,]? color-stop[, color-stop]+ )
np. background: linear-gradient(gray, white 20px)

Argument color-stop[, color-stop]+

linear-gradient(white,gray)

linear-gradient(white 20%,gray)

linear-gradient(white 20px,gray)

Argument angle | [ to left|right || top|bottom ]

np. 60deg	to top	to right	to bottom	to left
	to top left	to top right	to bottom left	to bottom right

Funkcja repeating-linear-gradient()

background:
np. repeating-linear-gradient(gray, white 20px)
np. background: repeating-linear-gradient(gray, white 20px)

Funkcja radial-gradient

background:
radial-gradient([[shape || size] [at position]?, | at position,]? color-stop [, color-stop]+)
shape = circle | ellipse size = closest-side | closest-corner | farthest-side | farthest-corner

Argument color-stop

radial-gradient(white,gray)

radial-gradient(white 20%,gray)

radial-gradient(white 20px,gray)

Argument shape i/lub size

shape || size	closest-side	closest-corner	farthest-side	farthest-corner
circle
circle

Argument position

position	left	center	right
top
center
bottom

Funkcja repeating-radial-gradient()

background:
np. repeating-radial-gradient(black, white 10px)

Właściwości obrazów

Dopasowanie obrazu

object-fit:
fill;	contain;	cover;	none;	scale-down;

Pozycja obrazu*

object-position:
position

*) [CSS3BG]

Rozdzielczość obrazu

image-resolution:
from-image; || resolution && snap?

Orientacja obrazu

image-orientation:
angle np. 180deg