25-10-2017 Статьи Новые свойства 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-radius, border-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-radius, border-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. |
|
669 admin
|
|
Читайте так же:{related-news} |
|
Здесь нет еще ни одного комментария...
Оставить комментарий |
SEO-продвижение
Автоматическое продвижение сайта в TOP. |
Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.
Последняя версия jQuery:
v.1.4.1 или v.3.0.0
Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.