Использование стилевых спецификаций. (Тема 3)

Сентябрь 7, 2022

Главная
Алгебра
Использование стилевых спецификаций. (Тема 3)

Содержание

2. 1. Понятие таблицы стилей CSS (каскадные таблицы стилей): Расширяют возможности по оформлению страниц Отделяют содержание от
3. CSS Таблица стилей состоит из последовательности правил. Правило состоит из селектора и набора деклараций. Например: H1
4. Таблица стилей может размещаться либо в тексте страницы, либо в отдельном файле Таблицы стилей обеспечивают разделение
5. 2. Подключение таблиц стилей Связывание документа с таблицей стилей, размещенной в файле: Встраивание таблицы стилей в
6. таблица стилей в отдельном файле
7. Таблица стилей в тексте страницы … H1 {color: red; font-size: 14pt; text-align: center;} …
8. Таблица стилей в отдельном файле
9. Таблица стилей в теге font-style:italic; font-size:40pt;">ПРОБА Pr_1
10. 3. Селекторы { : ;..} H1 {color: red; font-size: 14pt; text-align: center;} P,LI {font-size: 12pt;} Виды
11. Основные селекторы Классовые селекторы: H1.bl {color:blue; size:20pt} или .bl {color:blue} TEXT ID селекторы: #rd {color:red} TEXT
12. дополнительные селекторы Селекторы на основе атрибутов H1[title] {color:blue; size:20pt} TEXT a[href="foo"] {color:red} TEXT a[href^="http"] {color:red} a[href$=".
13. Наследование и приоритет Наследование: border-collapse, border-spacing, caption-side, color, cursor, direction, empty-cells, font-family, font-size, font-style, font-variant, font-weight,
14. Приоритеты при задании стилей в порядке возрастания Самым низким приоритетом обладают встроенные стили браузера Пользовательский стиль
15. 4. Свойства основных элементов Группы свойств элементов: область размещения, позиционирование, фон, шрифт, текст, списки и т.д.
16. Область размещения элемента Pr_3
17. Свойства, характеризующие область размещения элемента
18. Задание свойств Свойства и их значения: Margin-left :40px;padding-top:30px; width:20%;max-width:900px; min-width:500px: Составные имена свойств: border-color:black; border-style:dotted; border-width:40px;
19. 5. Управление фоном background-color: | transparent | inherit background-color: #9A8B7F; background-color: maroon; background-color: rgb(r,g,b); background-color: rgba(r,
20. Фон Несколько изображений body { background-image:url(mammoth.gif), url(fon.gif), url(fon1.gif); Размер и положение background-repeat: no-repeat, repeat-x, repeat; background-position:
21. 6. Позиционирование элементов Свойства, используемые для позиционирования
22. block - элемент показывается как блочный, происходит перенос строк в начале и в конце содержимого, т.е.
23. position={absolute, fixed, relative, static} absolute - элемент удаляется из обычного потока документа подобно другим элементам, и
24. float: left | right | none | inherit left - выравнивает элемент по левому краю, а
25. свойство clear (запрет обтекания ): ♦ left — элемент должен находиться ниже всех плавающих элементов, параметр
26. Управление видимостью элементов и контента visibility={visible, hidden, collapse} visible - элемент отображается как видимый; hidden -
27. 7. Форматирование текстовых элементов
28. Свойства текстовых элементов (текст в целом) pr_10
29. Свойства списков Например, list-style:”url(‘bg.im’) inside” cursor: auto (вид курсора по умолчанию для текущего элемента), crosshair, default,
30. 8. Особенности спецификации CSS3 • закруглённые рамки; • создание тени к элементам; • линейные и сферические
31. Вендорные префиксы -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8*/ -moz-opacity:0.5; /* Mozilla 1.6 */ -khtml-opacity:0.5; /* Konqueror 3.1, Safari
32. Закругления border-radius border-radius: 13em 0.5em/1em 0.5em 20em; pr_12
33. Тень и градиент box-shadow, text-shadow Значения свойства: none - отменяет добавление тени. inset - тень выводится
34. Прозрачность .o1 {opacity: 0;} /* Полная прозрачность */ .o2 {opacity: 0.05;} /* Почти совсем прозрачный */
35. Шрифт @font-face { font-family: Pompadur; /* Имя шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со
36. трансформации transform: функция; Функция: rotate scale scaleX scaleY … pr_18 transition: переход [, переход ]* Переход:
37. Анимация Animation - это обобщенное свойство: animation-name — имя анимации; animation-duration — время проигрывания анимации; animation-timing-function
38. Список анимированных (для Safari и Chrome используется @-webkit-keyframes) переходов(ключевых кадров). Здесь — обозначение, которое определяет ключевой
40. Скачать презентацию

Слайд 2

1. Понятие таблицы стилей
CSS (каскадные таблицы стилей):
Расширяют возможности по оформлению страниц
Отделяют

содержание от форматирования
Каскадные – последовательно используется несколько таблиц, порядок их применения определен алгоритмом браузера
Версии CSS 2, CSS3

Слайд 3

CSS
Таблица стилей состоит из последовательности правил.
Правило состоит из селектора и набора

деклараций.
Например:
H1 {color: red; font-size: 14pt; text-align: center;}

правило

декларации

Слайд 4

Таблица стилей может размещаться либо в тексте страницы, либо в отдельном

файле
Таблицы стилей обеспечивают разделение контента и параметров форматирования
Для применения таблиц стилей необходимо разработать правила, указать какую таблицу использовать и какое правило к какому элементу применить

Слайд 5

2. Подключение таблиц стилей
Связывание документа с таблицей стилей, размещенной в файле:

REL=STYLESHEET TYPE=”text/css” HREF=”http://www.myserver.com/mysheet.css“>
Встраивание таблицы стилей в документ:

Импорт из файла или другой страницы:

Задание стиля для отдельного элемента с помощью атрибута STYLE:
STILE=”color:blue”

Слайд 6

таблица стилей в отдельном файле

Слайд 7

Таблица стилей в тексте страницы

…

…

Слайд 8

Таблица стилей в отдельном файле

Слайд 9

Таблица стилей в теге
ПРОБА

Pr_1

Слайд 10

3. Селекторы
<селектор> {<имя свойства>:<значение>;..}
H1 {color: red; font-size: 14pt; text-align: center;}
P,LI {font-size:

12pt;}
Виды селекторов:
имена тегов;
классовые селекторы (Class Selectors);
ID селекторы (ID Selectors);
контекстные селекторы (Contextual Selectors);
псевдоклассы и псевдоэлементы (Pseudo Classes, Pseudo element).

Слайд 11

Основные селекторы
Классовые селекторы:
H1.bl {color:blue; size:20pt} или .bl {color:blue}
TEXT

ID селекторы:
#rd {color:red}

TEXT

Контекстные селекторы:
OL LI {list-style-type: decimal}
UL LI { list-style-type: square}
H1 B, H2 B, H1 EM, H2 EM { color: red }
.reddish H1 { color: red }
DIV.sidenote H1 { font-size: large }

Слайд 12

дополнительные селекторы
Селекторы на основе атрибутов
H1[title] {color:blue; size:20pt}
TEXT

a[href="foo"]

{color:red}
TEXT
a[href^="http"] {color:red}
a[href$=". JPG"] {color:red}
Псевдо-классы :before и :after
.clearfix:after {content: "";…}
pr_2_1

Слайд 13

Наследование и приоритет
Наследование: border-collapse, border-spacing, caption-side, color, cursor, direction, empty-cells, font-family,

font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, quotes, text-align, text-indent, text-transform, visibility, white-space, word-spacing
При применении разных правил к одному и тому же элементу учитываются источник (авторский, пользовательский, браузер), тип селектора, порядок следования и директива !important
Директива повышения приоритета !important:
div {font-size:40; color:black !important}
pr_2_2

Слайд 14

Приоритеты при задании стилей в порядке возрастания
Самым низким приоритетом обладают встроенные

стили браузера
Пользовательский стиль в браузере
Наследуемые стили от родительских элементов
css-стили, заданные во внешних файлах, применяются последовательно в порядке подключения . Это же правило относится и к взаимному расположению правил внутри таблицы стилей.
По типу примененных селекторов:
теги (h1, div, p…)
классы и псевдоклассы (.item { }, :hover …)
атрибуты ( [attr=”value”], [type=”checkbox”] …)
ID-селекторы ( #main …)
Стили, заданные в атрибуте style тега (

)
Наиболее высоким приоритетом обладает декларация с сопроводительным словом !important

Слайд 15

4. Свойства основных элементов
Группы свойств элементов:
область размещения, позиционирование, фон, шрифт,

текст, списки и т.д.
Единицы измерения:
px(пикселы), in(дюймы), cm(сантиметры), mm(миллиметры), pt(1pt=1/72in), pc(1pc=12pt), % (проценты от род. элемента), em (текущий размер шрифта)
Цвет:
именем, “red” и т.д.
шестнадцатеричным значением, #6669FF
с помощью функции rgb, rgb(100,100,150) или rgb(50%,60%,50%)

Слайд 16

Область размещения элемента
Pr_3

Слайд 17

Свойства, характеризующие область размещения элемента

Слайд 18

Задание свойств
Свойства и их значения:
Margin-left :40px;padding-top:30px; width:20%;max-width:900px;
min-width:500px:
Составные имена свойств:
border-color:black; border-style:dotted; border-width:40px;
Обобщенное

свойство:
border:” black dotted 40px”;
Примеры записи обобщенных свойств:
div {border:”2 solid red”}

Слайд 19

5. Управление фоном
background-color: <цвет> | transparent | inherit
background-color: #9A8B7F;
background-color: maroon;
background-color: rgb(r,g,b);
background-color:

rgba(r, g, b, a);
background-image:url(путь к файлу) | none[, url(путь к файлу) | none]*
body { background-image:url(mammoth.gif), url(fon.gif), url(fon1.gif); }
background-attachment: fixed | scroll | local

Слайд 20

Фон
Несколько изображений
body { background-image:url(mammoth.gif), url(fon.gif), url(fon1.gif);
Размер и положение
background-repeat: no-repeat, repeat-x,

repeat;
background-position: center 100px, 0px 250px; }
background-size: 200px 50px;
px - в пикселях или любых других единицах измерения, принятых в СSS.
% - в процентах от размеров элемента, которому назначается фон.
cover – Растягивает фоновое изображение на весь блок.
contain – Растягивает фоновое изображение с сохранением пропорций до тех пор, пока его ширина или высота не упрётся в края блока.
auto - Исходный размер изображения (по умолчанию). В случае если значение auto присвоено только одной из сторон, то её размер вычисляется относительно размера второй стороны с указанным размером.
.fon1 {background-size: 200px 50px;}
.fon2 {background-size: 20% 80%;}
http://www.webremeslo.ru/css3/glava5.html pr_4

Слайд 21

6. Позиционирование элементов Свойства, используемые для позиционирования

Слайд 22

block - элемент показывается как блочный, происходит перенос строк в начале

и в конце содержимого, т.е. в его строках даже при наличии места другие элементы не размещаются;
inline - элемент отображается как встроенный в строку, поэтому содержимое элементов начинается с того места, где окончился предыдущий;
inline-block - создается блочный элемент (можно задавать размеры), при этом рядом могут располагаться строчные элементы;
list-item - элемент выводится как блочный и добавляется маркер списка;
pr_5
flex – блок, пространство которого автоматически заполняется дочерними блоками;
grid - для блока определяется виртуальная сетка, к которой могут привязываться дочерние элементы;
none - временно удаляет элемент из документа, занимаемое им место не резервируется и Web-страница формируется так, словно элемента и не было.
pr_6

display = {block, inline, inline-block, list-item, flex, grid, …, none}

Слайд 23

position={absolute, fixed, relative, static}
absolute - элемент удаляется из обычного потока документа

подобно другим элементам, и его положение задается атрибутами left, top, right и bottom относительно края окна браузера;
fixed - это значение похоже на absolute, привязывается к указанной параметрами left, top, right и bottom точке на экране, но не меняет своего положения даже при пролистывании страницы, разные браузеры реагируют на это свойство очень по разному;
relative - положение элемента устанавливается относительно его исходного места, добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра;
static - элементы отображаются как обычно, использование параметров left, top, right и bottom не изменяет местоположения.
По умолчанию - static.
pr_7

Слайд 24

float: left | right | none | inherit
left - выравнивает

элемент по левому краю, а все остальные элементы обтекают его по правой стороне.
right - выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none - обтекание элемента не задается.
inherit - наследует значение родителя.

Слайд 25

свойство clear (запрет обтекания ):
♦ left — элемент должен находиться ниже

всех плавающих элементов, параметр float которых выставлен в left;
♦ right — элемент должен находиться ниже всех плавающих элементов, параметр float которых выставлен в right;
♦ both — контейнер должен находиться ниже всех плавающих элементов, параметр float которых выставлен в left или right;
♦ none— поведение элемента по умолчанию (т. е. он может располагаться на одной линии с остальными плавающими элементами).
pr_8

Слайд 26

Управление видимостью элементов и контента
visibility={visible, hidden, collapse}
visible - элемент отображается как

видимый;
hidden - элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы;
collapse - применяется для содержимого ячеек таблиц, они реагируют, словно к ним было добавлено стилевое свойство display со значением none (строки и колонки убираются, а таблица перестраивается), Значение поддерживается не всеми браузерами.
overflow={auto, hidden, scroll, visible}
overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Смысл принимаемых значений:
visible - отображается все содержание элемента, даже за пределами установленной высоты и ширины;
hidden - отображается только область внутри элемента, остальное будет обрезано;
scroll - всегда добавляются полосы прокрутки;
auto - полосы прокрутки добавляются только при необходимости.
pr_9

Слайд 27

7. Форматирование текстовых элементов

Слайд 28

Свойства текстовых элементов (текст в целом)
pr_10

Слайд 29

Свойства списков
Например, list-style:”url(‘bg.im’) inside”
cursor: auto (вид курсора по умолчанию для текущего

элемента), crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait, url('путь к курсору‘)
pr_11

Слайд 30

8. Особенности спецификации CSS3
• закруглённые рамки;
• создание тени к элементам;
• линейные

и сферические градиенты;
• возможность задать прозрачный цвет;
• возможность задать свой шрифт;
• трансформации элементов;
• анимация.

Слайд 31

Вендорные префиксы
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8/
-moz-opacity:0.5; / Mozilla 1.6 /
-khtml-opacity:0.5; / Konqueror 3.1, Safari 1.1

Слайд 32

Закругления
border-radius
border-radius: 13em 0.5em/1em 0.5em 20em;
pr_12

Слайд 33

Тень и градиент
box-shadow, text-shadow
Значения свойства:
none - отменяет добавление тени.
inset -

тень выводится внутри элемента
4 числа - сдвиг по x, сдвиг по y, размытие, растяжение
цвет - цвет тени в любом доступном CSS формате (по умолчанию тень черная).
box-shadow: inset 0px 3px 20px 3px #f00, 3px 10px ;
pr_13, pr_13_1
Градиентная заливка:
linear-gradient(to top, #fefcea, #f1da36);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* для IE */
background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* для webkit */
background: -moz-linear-gradient(top, #ccc, #000); /* для firefox 3.6+ */}
Вместо left, top можно ставить координаты:
background: -webkit-gradient(linear, 30% 30%, 70% 70%, from(#ccc), to(#000)); /* для webkit */}
pr_14

Слайд 34

Прозрачность
.o1 {opacity: 0;} /* Полная прозрачность /
.o2 {opacity: 0.05;} / Почти

совсем прозрачный */
.o3 {opacity: .3;} /* Можно и так писать без нуля вначале */
.o4 {opacity: 0.5;} /* Полупрозрачный */
.o5 {opacity: 0.874;} /* Можно задавать очень точную степень прозрачности */
.o6 {opacity: 1;} /* Совсем не прозрачный */
pr_15

Слайд 35

Шрифт

pr_16

Слайд 36

трансформации
transform: функция;
Функция:
rotate
scale
scaleX
scaleY
…
pr_18
transition: переход [, переход ]*
Переход:
None
transition-property – список значений свойств
transition-duration –

длительность
transition-timing-function – функция изменения времени
transition-delay – задержка перед началом
например, transition:background 3s ease-out 1s
pr_17

Слайд 37

Анимация
Animation - это обобщенное свойство:
animation-name — имя анимации;
animation-duration — время проигрывания

анимации;
animation-timing-function — метод расчета промежуточных значений свойств для анимации;
animation-delay — задержка анимации;
animation-iteration-count — количество циклов анимации;
animation-direction — направление анимации;
animation-play-state — определяет, проигрывается ли анимация или стоит на паузе.
anima

Слайд 38

Список анимированных (для Safari и Chrome используется @-webkit-keyframes) переходов(ключевых кадров).
Здесь <селектор

кадра> — обозначение, которое определяет ключевой кадр (from или 0%, n%, to или 100%).

Использование стилевых спецификаций. (Тема 3)

Содержание

1. Понятие таблицы стилейCSS (каскадные таблицы стилей):Расширяют возможности по оформлению страницОтделяют

CSSТаблица стилей состоит из последовательности правил.Правило состоит из селектора и набора

Таблица стилей может размещаться либо в тексте страницы, либо в отдельном

2. Подключение таблиц стилейСвязывание документа с таблицей стилей, размещенной в файле:

таблица стилей в отдельном файле

Таблица стилей в тексте страницы … <br> H1</div></h2><div class="slides-content">{color: red; font-size: 14pt; text-align: center;} <br> …

Таблица стилей в отдельном файле

Таблица стилей в тегеПРОБАPr_1

ПРОБА

3. Селекторы<селектор> {<имя свойства>:<значение>;..}H1 {color: red; font-size: 14pt; text-align: center;}P,LI {font-size:

Основные селекторыКлассовые селекторы:H1.bl {color:blue; size:20pt} или .bl {color:blue} TEXT

TEXT

TEXT

TEXT

дополнительные селекторыСелекторы на основе атрибутов H1[title] {color:blue; size:20pt} TEXT a[href="foo"]

TEXT

Наследование и приоритетНаследование: border-collapse, border-spacing, caption-side, color, cursor, direction, empty-cells, font-family,

Приоритеты при задании стилей в порядке возрастанияСамым низким приоритетом обладают встроенные

4. Свойства основных элементовГруппы свойств элементов: область размещения, позиционирование, фон, шрифт,

Область размещения элементаPr_3

Свойства, характеризующие область размещения элемента

Задание свойствСвойства и их значения:Margin-left :40px;padding-top:30px; width:20%;max-width:900px;min-width:500px:Составные имена свойств:border-color:black; border-style:dotted; border-width:40px;Обобщенное

5. Управление фономbackground-color: <цвет> | transparent | inheritbackground-color: #9A8B7F;background-color: maroon;background-color: rgb(r,g,b);background-color:

ФонНесколько изображенийbody { background-image:url(mammoth.gif), url(fon.gif), url(fon1.gif); Размер и положениеbackground-repeat: no-repeat, repeat-x,

6. Позиционирование элементов Свойства, используемые для позиционирования

block - элемент показывается как блочный, происходит перенос строк в начале

position={absolute, fixed, relative, static}absolute - элемент удаляется из обычного потока документа

float: left | right | none | inherit left - выравнивает

свойство clear (запрет обтекания ):♦ left — элемент должен находиться ниже

Управление видимостью элементов и контентаvisibility={visible, hidden, collapse}visible - элемент отображается как

7. Форматирование текстовых элементов

Свойства текстовых элементов (текст в целом)pr_10

Свойства списковНапример, list-style:”url(‘bg.im’) inside”cursor: auto (вид курсора по умолчанию для текущего

8. Особенности спецификации CSS3• закруглённые рамки;• создание тени к элементам;• линейные

Вендорные префиксы-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8*/-moz-opacity:0.5; /* Mozilla 1.6 */-khtml-opacity:0.5; /* Konqueror 3.1, Safari 1.1

Закругленияborder-radiusborder-radius: 13em 0.5em/1em 0.5em 20em;pr_12

Тень и градиентbox-shadow, text-shadowЗначения свойства:none - отменяет добавление тени. inset -

Прозрачность.o1 {opacity: 0;} /* Полная прозрачность */.o2 {opacity: 0.05;} /* Почти

Шрифт<br> @font-face {<br> font-family: Pompadur; /* Имя шрифта */<br> src: url(fonts/pompadur.ttf);</div></h2><div class="slides-content">/* Путь к файлу со шрифтом */<br> }<br> P {<br> font-family: Pompadur;<br> }<br> pr_16

трансформацииtransform: функция;Функция:rotatescalescaleXscaleY…pr_18transition: переход [, переход ]*Переход:Nonetransition-property – список значений свойствtransition-duration –

АнимацияAnimation - это обобщенное свойство:animation-name — имя анимации;animation-duration — время проигрывания

Список анимированных (для Safari и Chrome используется @-webkit-keyframes) переходов(ключевых кадров).Здесь <селектор

Похожие презентации

1. Понятие таблицы стилей
CSS (каскадные таблицы стилей):
Расширяют возможности по оформлению страниц
Отделяют

CSS
Таблица стилей состоит из последовательности правил.
Правило состоит из селектора и набора

2. Подключение таблиц стилей
Связывание документа с таблицей стилей, размещенной в файле:

Таблица стилей в тексте страницы

…

…

Таблица стилей в теге
ПРОБА

Pr_1

3. Селекторы
<селектор> {<имя свойства>:<значение>;..}
H1 {color: red; font-size: 14pt; text-align: center;}
P,LI {font-size:

Основные селекторы
Классовые селекторы:
H1.bl {color:blue; size:20pt} или .bl {color:blue}
TEXT

дополнительные селекторы
Селекторы на основе атрибутов
H1[title] {color:blue; size:20pt}
TEXT

a[href="foo"]

Наследование и приоритет
Наследование: border-collapse, border-spacing, caption-side, color, cursor, direction, empty-cells, font-family,

Приоритеты при задании стилей в порядке возрастания
Самым низким приоритетом обладают встроенные

4. Свойства основных элементов
Группы свойств элементов:
область размещения, позиционирование, фон, шрифт,

Область размещения элемента
Pr_3

Задание свойств
Свойства и их значения:
Margin-left :40px;padding-top:30px; width:20%;max-width:900px;
min-width:500px:
Составные имена свойств:
border-color:black; border-style:dotted; border-width:40px;
Обобщенное

5. Управление фоном
background-color: <цвет> | transparent | inherit
background-color: #9A8B7F;
background-color: maroon;
background-color: rgb(r,g,b);
background-color:

Фон
Несколько изображений
body { background-image:url(mammoth.gif), url(fon.gif), url(fon1.gif);
Размер и положение
background-repeat: no-repeat, repeat-x,

position={absolute, fixed, relative, static}
absolute - элемент удаляется из обычного потока документа

float: left | right | none | inherit
left - выравнивает

свойство clear (запрет обтекания ):
♦ left — элемент должен находиться ниже

Управление видимостью элементов и контента
visibility={visible, hidden, collapse}
visible - элемент отображается как

Свойства текстовых элементов (текст в целом)
pr_10

Свойства списков
Например, list-style:”url(‘bg.im’) inside”
cursor: auto (вид курсора по умолчанию для текущего

8. Особенности спецификации CSS3
• закруглённые рамки;
• создание тени к элементам;
• линейные

Вендорные префиксы
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8/
-moz-opacity:0.5; / Mozilla 1.6 /
-khtml-opacity:0.5; / Konqueror 3.1, Safari 1.1

Закругления
border-radius
border-radius: 13em 0.5em/1em 0.5em 20em;
pr_12

Тень и градиент
box-shadow, text-shadow
Значения свойства:
none - отменяет добавление тени.
inset -

Прозрачность
.o1 {opacity: 0;} /* Полная прозрачность /
.o2 {opacity: 0.05;} / Почти

Шрифт

pr_16

трансформации
transform: функция;
Функция:
rotate
scale
scaleX
scaleY
…
pr_18
transition: переход [, переход ]*
Переход:
None
transition-property – список значений свойств
transition-duration –

Анимация
Animation - это обобщенное свойство:
animation-name — имя анимации;
animation-duration — время проигрывания

Список анимированных (для Safari и Chrome используется @-webkit-keyframes) переходов(ключевых кадров).
Здесь <селектор