В закладки
База плагинов jQuery

Множество различных jQuery примеров, элементы CSS
и большое количество других инструментов для Вашего сайта!

> > Новые свойства CSS3
-->

25-10-2017

Статьи

Новые свойства CSS3

Новые свойства CSS3

Новые свойства CSS3

В CSS3 появилось много новых свойств:

 

@keyframes - описывает анимацию элемента, изменение значений указанных свойств

animation - позволяет задать вместе значения всех нужных для анимации свойств

animation-name - указывает имя анимации

animation-duration - длительность цикла анимации

animation-timing-function - тип временной функции анимации

animation-delay - задержка анимации

animation-iteration-count - количество повторов анимации

animation-direction - направление анимации, в одну сторону или в обе

animation-play-state - указывает запущена анимации или поставлена на паузу

 

background-clip - задает область заливки фона - под контентом, отступами или границей

background-origin - задает расположение фоновой картинки

background-size - задает размер фоновой картинки

 

border-bottom-left-radiusborder-bottom-right-radius - угол скругления нижних левого и правого углов

border-image - картинка на фоне границы, все свойства вместе

border-image-outset - выход картинки за пределы границы

border-image-repeat - повтор фоновой картинки

border-image-slice - смещение картинки фона границы

border-image-source - путь к картинке для фона границы

border-image-width - ширина картинки для фона границы

border-radius - угол скругления всех углов элемента

border-top-left-radiusborder-top-right-radius - угол скругления верхних левого и правого углов

 

box-shadow - тень блока

overflow-x - видимость лишнего контента по горизонтали

overflow-y - видимость лишнего контента по вертикали

opacity - прозрачность элемента

 

box-align - выравнивание дочерних элементов тянущегося бокса

box-direction - направление дочерних элементов

box-flex - растяжение элемента относительно родителя

box-flex-group - растяжение группы элементов относительно родителя

box-lines - количество строк дочерних элементов

box-orient - ориентация бокса

box-pack - выравнивание элементов по направлению бокса

 

@font-face - нестандартный стиль

 

marquee-direction - направление движения контента (для элемента marquee)

marquee-play-count - количество циклов движение контента

marquee-speed - скорость движения контента

marquee-style - тип движения контента

 

column-count - количество колонок

column-fill - тип заливки колонок контентом

column-gap - расстояние между колонками

column-rule - вид линии между колонками

column-rule-color - цвет линии между колонками

column-rule-style - стиль линии между колонками

column-rule-width - ширина линии между колонками

column-width - ширина колонки 

column - общее правило для колонок

 

text-overflow - скрытие лишнего текста

text-shadow - тень текста

word-break - перенос строки

word-wrap - перенос слова

 

transform - трансформация элемента

transform-origin - позиция трансформируемого элемента

transform-style - указывает, могут ли дочерние элементы подвергаться трехмерной трансформации

perspective - перспектива

perspective-origin - позиция перспективы

backface-visibility - видимость стороны элемента отвернутой при помощи трансформации

 

transition - переход элемента (например, при наведении)

transition-property - свойство для перехода элемента

transition-duration - длительность перехода

transition-timing-function - тип перехода (временная функция)

transition-delay - задержка перехода

 

appearance - задает тип поведения элементов

box-sizing - зависимость размера элемента от внутренних отступов

resize - задает возможность растягивания элемента 

 

Селекторы CSS

В CSS3 введены новые селекторы - псевдоклассы и псевдоэлементы:

 

:first-of-type - выбирает все элементы (по селектору), которые первые у родителя

:last-of-type - выбирает все элементы (по селектору), которые последние у родителя

:only-of-type - выбирает элементы (по селектору), которые такие единственные у родителя

:only-child - элемент, который единственный у родителя

:nth-child(n) - n-тый элемент среди дочерних своего родителя

:nth-last-child(n) - n-тый по счету с конца

:nth-of-type(n) - n-тый по типу у родителя

:nth-last-of-type(n) - n-тый с конца по типу у родителя

:last-child - последний дочерний элемент родителя

:root- корневой элемент, на HTML странице это <html>

:empty - выбор пустого элемента

:target - активное состояние анкора

:enabled - активный элемент управления формы

:disabled - неактивный элемент управления формы

:checked - выбранный элемент управления (input type radio, input type checkbox)

:not(selector) - элементы, которые не являются указанными селекторами

::selection - выбранный пользователем контент элемента

 

Псевдоэлементы :before и :after позволяют прорисовавыть на странице элементы, которых нет в HTML.

Читайте так же:

Здесь нет еще ни одного комментария...

Оставить комментарий

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Скачать
v.1.4.1 или v.3.0.0

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Популярное за неделю:

Шаблоны:

Подборки интерфейсов:

^