CCS 3 Шрифти Трансформація Анімація font l

CCS 3 Шрифти. Трансформація. Анімація.

font l font: [font-style||font-variant|| font-weight] font-size [/line-height] font-family font-style: normal | italic | oblique l font-variant: normal | small-caps l font-weight: bold|bolder|lighter|normal|100|200|300|400| 500|600|700|800|900 l

font l font: [font-style||font-variant|| font-weight] font-size [/line-height] font-family l font-size: <абсолютний розмір> | <відносний розмір> | <відсотки> xx-small; medium; large; xx-large l larger и smaller l

font l font: [font-style||font-variant|| font-weight] font-size [/line-height] fontfamily l l line-height: <множник> | <розмір> | <відсотки> | normal font-family: <шрифт> [, <шрифт>[, . . . ]] l l l serif; sans-serif; cursive; fantasy; monospace;

Властивості шрифтів l @font-face { властивості шрифту } l text-shadow: none | <тінь> [, <тінь>]* l <зсув по x> <зсув по y> <радіус розмиття> <колір> l word-wrap: normal | break-word

2 D трансформація l transform: translate() l rotate() l scale() l skew() l matrix() l <функція> [<функція>]* | none transform: translate(tx[, ty]) transform: rotate(<кут>) transform: scale(sx[, sy]); transform: skew (sx[, sy]);

3 D трансформація Функція Опис matrix 3 d (n 1, n 2, n 3, n 4, n 5 , n 6 , n 7 , n 8 , n 9, n 10, n 11, n 12, n 13, n 14, n 15, n 16) Визначає трьохмірну трансформацію, використовуючи матрицю 4 x 4 із 16 значений translate 3 d(x, y, z) Визначає трьохмірний перенос scale 3 d(x, y, z) Визначає трьохмірну трансформацію масштабування rotate 3 d(x, y, z, angle) Визначає трьохмірний поворот perspective(n) Визначає перспективний вид для трьохмірнотрансформованого елемента

Анімація l @keyframes <змінна> { [ from | to | <відсотки> ] [, from | to | <відсотки> ]* } l animation: animation-name || animationduration || animation-timing-function || animation-delay || animation-iterationcount || animation-direction || animationfill-mode || animation-play-state

Анімація animation-name: none | <ідентифікатор> [, none | <ідентифікатор>]* 2. animation-duration: <час> [, <час>]* 3. animation-timing-function: ease | easein | ease-out | ease-in-out | linear | stepstart | step-end | steps | cubic-bezier 4. animation-delay: <час> [, <час>]* 1.

Анімація animation-iteration-count: infinite | <число> 6. animation-direction: normal | alternate | reverse | alternate-reverse 7. animation-fill-mode: none | forwards | backwards | both 8. animation-play-state: running | paused 5.

Інтерфейс користувача 1. resize: none | both | horizontal | vertical 2. box-sizing: content-box | border-box | padding-box 3. outline-offset: <розмір>