CSS3

CSS3

Новое в CSS3

Borders
Backgrounds
Gradients
Text Effects
Fonts
2D Transforms

3D Transforms
Transitions
Animations
Multiple Column
User Interface

Границы

Свойства, позволяющие скруглять углы прямоугольных элементов (border-radius), создавать эффект тени (box-shadow), использовать в качестве рамки изображение (border-image)

Свойство border-radius

сглаживает углы элементов

border-radius: top-left-radius top-right-radius bottom-left-radius bottom-right-radius
border-radius:10px 20px 50px 15px;
border-radius:5px;

или
border-top-left-radius – верхний левый угол элемента
border-top-right-radius – верхний правый угол элемента
border-bottom-left-radius – нижний левый угол элемента
border-bottom-right-radius – нижний правый угол элемента

Свойство box-shadow

добавляет тень к элементам

box-shadow:x-offset y-offset shadow-size shadow-color
box-shadow: 10px 10px 5px #888888;

Свойство border-image

вставка произвольных изображений в качестве границы элемента

border-image: (1) (2) (3)
(1) – url файла с изображением-границей
(2) – величина отступа от каждого края изображения для разрезания изображения на 9 частей
(3) – повтор изображения (repeat), повтор изображения и масштабирование его так, чтобы на стороне элемента оказалось целое число изображений (round) или растягивание (stretch) для заполнения границы элемента

border-image: url(image.png) 50 round;

Фон

Свойства позволяют масштабировать фоновое изображение (background-size), использовать несколько фоновых изображений (расширенное background-image) или определить область позиционирования фонового рисунка (background-origin)

Свойство background-size

задает размер фонового изображения

background-size: width height | cover | contain;cover – масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блокаcontain – масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока

background-size: 307px 230px;
background-size: cover;
background-size: contain;

Градиенты

позволяет использовать градиент в качестве фона элемента

Свойство background

значение linear-gradient создает линейный градиент
значение radial-gradient создает радиальный градиент

background: linear-gradient(red, blue);
background: linear-gradient(to right, red , blue);
background: linear-gradient(to bottom right, red , blue);
background: linear-gradient(red, orange, yellow, gre
en, blue, indigo, violet);
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

Свойство background

background:
linear-gradient(45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2)),
linear-gradient(-45deg, rgba(0,186,0,0.2) 50%, transparent 50%, transparent);

Текстовые эффекты

Свойства позволяют создавать эффект тени для текста (text-shadow), разрывать принудительно длинные слова (word-wrap)

Свойство text-shadow

добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия

text-shadow: x-offset y-offset shadow-size shadow-color
text-shadow: 7px 7px 5px navy;

Свойство word-wrap

указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область

word-wrap: normal | break-word
normal – строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега
)
break-word – перенос строк добавляется автоматически, так, чтобы слово поместилось в заданную ширину блока

Шрифты

Возможно подключение любых шрифтов

div { font-family:heinrich;}

Трансформация

Свойство transform (2d и 3d)трансформирует элемент, позволяет масштабировать, вращать, сдвигать, наклонять элемент, а также комбинировать виды трансформаций

В качестве значения данного свойства указывается одна из функций трансформирования

2D трансформация

функции трансформирования
rotate()
translate()
scale()
skew()
matrix()

2D трансформация

transform: rotate(30deg);
transform: translate(50px,50px);
transform: scale(1.5,0.5);
transform: skew(30deg,20deg);

Переход

Свойства позволяют устанавливать эффект перехода между двумя состояниями элемента, расположенного в html-документе

Свойство transition-property

transition-property: property
property – свойство, которое будет изменяться в процессе перехода
можно через запятую указать несколько свойств или использовать несколько свойств transition-property

transition-property: top;
transition-property: width;
transition-property: background-color;или
transition-property: top, width, background-color;

Свойство transition-duration

transition-duration: time
time – время, в течение которого будет изменяться свойство, заданное свойством transition-duration
можно через запятую указать несколько времен или использовать несколько свойств transition-property

transition-duration: 1s;
transition-duration: 12s;
transition-duration: 0.5s;или
transition-duration: 1s, 12s, 0.5s;

Псевдоклассы

:hover
transition выполняется при наведении указателя мыши

:active
transition выполняется при наведении указателя мыши и удерживании нажатой левой кнопки мыши

Анимация

задается с помощью ключевых кадров @keyframes
для настройки анимации используется универсальное свойство animation
animation: name duration timing-function delay iteration-count direction;

Анимация

animation-name – определяет имя ключевого кадра, связанного с селектором
animation-duration – определяет продолжительность анимации
animation-timing-function – определяет функцию скорости анимации
animation-delay – определяет задержку перед началом анимации
animation-iteration-count – определяет число повторов анимации
animation-direction – прямое или обратное воспроизведение анимации

Колонки

позволяет расположить текст в несколько колонок без использования таблиц или слоев, задать количество колонок(column-count), установить величину отступа между колонками текста (column-gap), установить ширину, цвет и стиль оформления пространства между колонками (column-rule)


Свойство column-count

задает количество колонок , на которые необходимо разбить текст выбранного элемента
column-count: column_number;

Свойство column-gap

устанавливает величину отступа между колонками текста

column-gap: npx;

Свойство column-rule

устанавливает ширину, цвет и стиль оформления пространства между колонками
column-rule: width style color; 

Колонки

.newspaper
{
column-count: 3;
column-gap: 40px;
column-rule: 4px outset #ff00ff;
}

Цвет

цвет может задаваться с помощью модели HSL (Hue, Saturation, Lightness) – оттенок, насыщенность, светлота

.hsl1 {background-color: hsl(0,30%,50%);}
.hsl2 {background-color: hsl(120,100%,80%);}
.hsl3 {background-color: hsl(240,100%,50%);}

Цвет

цвет может задаваться с помощью модели RGBA (Red, Green, Blue, Alpha) – позволяет определять цвет и прозрачность одновременно (0 - максимальная прозрачность, 1 - минимальная прозрачность)

.alpha1 { background-color: rgba(0, 0, 0, 0.6); }

Вендорные префиксы

Вендорные префиксы – это префиксы для экспериментальных CSS-свойств, еще не принятых в стандарте, используемые производителями (вендорами) браузеров

Вендорные префиксы

-o- браузер Opera
-moz- браузеры из семейства Mozilla
-ms браузер Internet Explorer
-webkit- браузеры Safari и Chrome

Вендорные префиксы

.round
{
-o-border-image:url(border.png) 30 30 round
-moz-border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;
border-image:url(border.png) 30 30 round;
}

Свойства width

min-widthустанавливает минимальную ширину элементаЕсли окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки
max-widthустанавливает максимальную ширину элемента

@-правила

Используются при задании стилей для различных устройств

@import (аналог тега link)

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу
@import url("имя файла") [типы носителей];@import "имя файла" [типы носителей];

@media

Позволяет указать тип носителя, для которого будет применяться указанный стиль, в качестве типов выступают различные устройства, например, принтер, монитор и др.
@media тип1 [, тип2] {Описание стиля}

@media

Правило @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств
Иногда имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости
В подобном случае следует воспользоваться тегом с атрибутом media