Возможности CSS3

@charset

Применяется для задания кодировки внешнего CSS-файла. Это имеет значение в том случае, если в CSS-файле используются символы национального алфавита.

@charset "кодировка";
				

Значение кодировки обязательно должно быть взято в кавычки.

@charset "UTF-8";
/* Должно идти первой строкой. Пред ней не должно быть ничего - даже комментариев */
				

Пример использования @charset→

@document

@document устанавливает стилевые правила на основе адреса документа. К примеру, если адреса мобильной и основной версии сайта различаются, то мы можем задать собственный стиль элементов для каждой версии.

Мы не будем рассматривать его работу, по скольку он поддерживается пока одним браузером. Более подробнее о нём можно почитать здесь →

@font-face

Определяет настройки шрифтов, а также позволяет загрузить специфичный шрифт на компьютер пользователя.

Вы можете использовать практически любые шрифты, в любых количествах. Однако, согласно основным принципам дизайна, считается что более 3 шрифтов в оформлении это ужасно.

@font-face {
    /* Простой пример подключения шрифта */
    font-family: "Имя Шрифта";
    src: url("путь/до/Шрифта");
}
				

@font-face {
    font-family: "Anonymous Pro";
    src: url("font/Anonymous_Pro.ttf");
}

p {
    font-family: "Anonymous Pro";
}
				

Пример использования @font-face→

В Интернете есть два наиболее удобных сервиса встраивания шрифтов в страницу: Шрифтовая белка и Google WebFonts.
Стоит их попробовать.

@import

Позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу, НО @import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

    @import url("путь/до/файла") [Тип Носителя, ...];
    @import "путь/до/файла" [Тип Носителя, ...];
				

Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоёмко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определённого устройства.

    @import "style/main.css" screen;
    @import "style/print.css" print;
				

Пример использования @import→

@keyframes

@keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени.

О нём и сопутствующих ему свойствах поговорим чуть далее в этой статье.

@media

Указывает тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, коммуникатор, монитор и др

О нём и сопутствующих ему свойствах узнаете в следующей лекции.

@page

Задаёт значение полей при печати документа.

    @page {Значение отступов};
				

Для установки значения полей на странице, используется универсальное свойство margin или его производные — margin-top, margin-right, margin-bottom и margin-left, задающие соответственно отступ сверху, справа, снизу и слева. Отрицательное значение допускается, но часть страницы может оказаться «отрезанной». Свойства border и padding не применимы.

Допустипо использование ключевых слов, после @page и пробел. Ключевое слово :left позволяет задать поля для всех левых страниц, :right — для всех правых, а :first — для первой страницы.

@page {
    margin: 250px;
}

@page :first {
    margin: 0;
}

@page :left {
    margin-right: 50px;
}

@page :right {
    margin-left: 50px;
}
				

Пример использования @page→

@viewport

Позволяет оптимизировать макет веб-страницы в зависимости от различных устройств и их размеров.

Мы не будем рассматривать его работу, по скольку он поддерживается пока одним браузером. Более подробнее о нём можно почитать здесь →

rotate()

Функция rotate() позволяет вращать элемент вокруг неподвижной точки. По умолчанию, вращение происходит вокруг центра элемента.

rotate() принимает только один параметр, который является значением угла и определяется в градусах (deg), градах (grad), радианах (rad) или в оборотах (turn) (один оборот эквивалентен полному кругу).

Отрицательные значения (например от -1deg до -360deg) поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.

#rotateDiv {
    transform: rotate(1rad);
}
				

Чтобы предотвратить неожиданное поведение, трансформируемые элементы не влияют на поток. Независимо от вращения, масштабирования или перемещения, они не будут влиять на другие элементы.
То есть, если повернуть элемент на 45°, он может наложиться на те элементы, которые находятся выше, ниже его или по бокам. Сначала веб-браузеры выделяют элементу то пространство, которое он занимал бы при обычных обстоятельствах (до преобразования), а затем они занимаются преобразованием элемента (его вращением, увеличением или наклоном). Этот процесс становится очевидным при увеличении размеров элемента путем использования функции преобразования scale().

scale()

Функция scale() позволяет изменять размер элемента. Она может увеличить или уменьшить элемент. Функция принимает либо один параметр, либо два параметра(через запятую).

    transform: scale(1.2);
    transform: scale(1.2, 3);
				

При указании одного праметра - изменение размеров элемента происходит одинаково по высоте и ширине; При указании двух параметров - первое значение изменяет размер элемента по горизонтали, второе по вертикали.

Значения парамтров функции, представляемое в скобках, по сути являются коэффициентами масштабирования - числом, на которое умножаются текущие размеры элемента. Например, 1 говорит об отсутствии масштабирования, .5 указывает на половину текущего размера, а 4 - на "учетверение" текущего размера. То есть числа между 0 и 1 приводят к уменьшению, а числа больше 1 - к увеличению элемента (значение 0 фактически делает элемент невидимым на странице).
Отрицательные значения отображают элемент зеркально по горизонтали.

Чаще всего масштабирование используется для визуальных изменений элемента на странице в динамическом режиме.

В CSS3 также предоставлены отдельные функции для горизонтального и вертикального масштабирования: scaleX проводит масштабирование по горизонтальной оси, а scaleY — по вертикальной.

    transform: scaleX(2);
    transform: scaleY(3);
				

translate()

Функция translate() позволяет перемещать элемент в плоскости (по осям х и у). Может принимать в качестве значений либо один параметр, либо два параметра(через запятую).

    transform: translate(20px, 40px);
    transform: translate(30px);
				

При указании одного параметра - элемент перемещается вдоль оси х; два параметра - первое значение для оси х, второе для оси у.

Сдвигая элемент на новое место, используя координаты x и y, не затрагиваются соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.

Это похоже на использование относительного позиционирования с помощью значений left и top.

В CSS3 предоставляются также две дополнительные функции для перемещения элемента только влево или вправо — translateX и только вверх или вниз - translateY.

    transform: translateX(20px);
    transform: translateY(30px);
				

Очень интересный эффект от функции translate можно получить при ее совместном использовании с CSS-переходами. Это сочетание позволяет анимировать перемещение элемента, показав его путешествующим по экрану.

skew()

Функция skew() позволяет искажать элемент, сдвигая его стороны вдоль линий.

Наклон элемента можно осуществить по его горизонтальной и вертикальной осям: это придает элементу трехмерное представление.

Эта функция преобразования используется редко, поскольку её последствия весьма непредсказуемы, а результат не обязательно привлекателен.

    transform: skew(30deg, 45deg);
    transform: skew(1rad);
				

Как и scale(), функция skew() принимает либо:

• один параметр: элемент искажается по горизонтали
• два параметра: первое значение искажает элемент по горизонтали, второе по вертикали

Если указано одно значение, второе будет определено браузером автоматически.

Как и rotate(), функция skew() принимает только значения угла, такого как градусы (deg).

Как и в случае с translate и scale, в CSS3 предлагаются отдельные функции для осей X и Y: skewX и skewY.

matrix()

Функция matrix() смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения.

    transform: matrix(a, c, b, d, x, y);
				

Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 - увеличивает.

Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение - вверх, отрицательное - вниз.

Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение - влево, отрицательное - вправо.

Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 - увеличивает.

Значение x смещает элемент по оси X, положительное - вправо, отрицательное - влево.

Значение y смещает элемент по оси Y, положительное значение - вниз, отрицательное - вверх.

Мы не будем детально рассматривать его работу, по скольку он сложен для понимание. Более подробнее о нём можно почитать здесь → и здесь →.

Множественные трансформации

Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.

    transform: scale(1.2) translateX(2in) rotate(330deg);
				

Браузер будет применять все эффекты в порядке следования функций.

transition-property

Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.

    background-color: #000;
    border-radius: 10px;
    transition-property: background-color;
    /* Так же разрещается следующая запись */
    transition-property: all;
    transition-property: background-color, border-radius;
				

all - значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.

.btn {
    background-color: #000;
    border-radius: 10px;
    transition-property: background-color, border-radius;
}

.btn:hover {
    background-color: #fff;
    border-radius: 50%;
}
				

Как Вы можете увидеть плавного перехода нет. Нам поможет в этом....

transition-duration

Задаёт промежуток времени, в течение которого должен осуществляться переход.Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.

Чтобы указать продолжительность анимации, используется свойство transition-duration. Ему передается или значение в секундах, или значение в миллисекундах (тысячных долях секунды).

Так же можно указать отдельную продолжительность для каждого анимируемого свойства. Например, когда посетитель проводит указатель мыши над кнопкой, может потребоваться, чтобы цвет текста изменялся быстрее, цвет фона изменялся немного медленнее, а цвет границы изменялся заметно медленнее. Для этого нужно перечислить анимируемые свойства, используя свойство transition-property, а затем перечислить показатели продолжительности с помощью свойства transition-duration.

    background-color: #000;
    border-radius: 10px;
    transition-property: background-color;
    transition-duration: .8s;
	
    /* Так же разрещается следующая запись */
    transition-property: background-color, border-radius;
    transition-duration: .8s, 950ms;
				

Порядок перечисления показателей продолжительности должен соответствовать порядку перечисления свойств.

.btn {
    background-color: #000;
    border-radius: 10px;
    transition-property: background-color, border-radius;
	transition-duration: .8s;
}

.btn:hover {
    background-color: #fff;
    border-radius: 50%;
}
				

transition-timing-function

Чтобы анимированный переход заработал, нужно только установить значения для свойств transition-property и transition-duration. Но с помощью свойства transition-timing-function можно также контролировать и скорость хода анимации.

Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.

В предназначении этого свойства нетрудно и запутаться: оно управляет не продолжительностью анимации (для этого есть свойство transition-duration), а скоростью хода анимации. Например, можно начать анимацию медленно, а затем быстро ее завершить, создавая эффект незаметного в начале и быстрого в конце изменения фонового цвета.

Свойство transition-timing-function может получать в качестве занчения ключевые слова:

• linear - Переход происходит равномерно на протяжении всего времени, без колебаний в скорости.
• ease - Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце.
• ease-in - Переход начинается медленно, а затем плавно ускоряется в конце.
• ease-out - Переход начинается быстро и плавно замедляется в конце.
• ease-in-out - Переход медленно начинается и медленно заканчивается.
• cubic-bezier(x1, y1, x2, y2) - Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.

  Для создания более реалистичных анимаций используйте функцию cubic-bezier
  

  

  Обязательно посетите сайт EASINGS.NET и этот сайт.

transition-delay

Можно задержать время начала анимации перехода, воспользовавшись свойством transition-delay, т. е. как долго переход должен ждать, прежде чем начнётся на самом деле.

Необязательное свойство. Не наследуется.

Как и с transition-duration вы можете использовать секунды (s) или миллисекунды (ms).

    transition-delay: 300ms;
    transition-delay: .4s, 1500ms, 2s;
				

Как и в случае применения свойства transition-duration, для каждого свойства можно указать свое время задержки. Порядок перечисления показателей времени должен соответствовать порядку перечисления этих свойств для transition-property.

transition: transition-property transition-duration transition-timing-function transition-delay;
				

transition: 1s;
				

transition: all 1s ease 0s;
				

transition: all 1s;
				

@keyframes myAnimation {
    from {
        box-shadow: 2px 2px 10px rgba(0,0,0, 0.5);
    }
    
    to {
        box-shadow: 0px 0px 0px rgba(0,0,0, 1);
    }
}
				

@keyframes move {
    from, to {
        top: 0;
        left: 0;
    }
    
    25%, 75% {
        top: 100%;
    }
	
    50% {
        top: 50%;
    }
}
				

@keyframes myFrame {
    from { /* ... */ }
    
    to { /* ... */ }
}

.selector {
    animation-name: myFrame;
}
				

.selector {
    animation-duration: 10s;
}
				

.selector {
    animation-iteration-count: 3;
}
				

animation: animation-name 
           animation-duration 
           animation-timing-function 
           animation-delay 
           animation-iteration-count 
           animation-direction;

				

animation: move .3s, back 4s steps(10, start) infinite;