Псевдоклассы и псевдоэлементы.

Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Например,:hover может быть использован для изменения цвета кнопки при наведении курсора на неё.

div:hover{

background-color: #F89B4D;

}

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например,:visited), состояние содержимого (вроде:checked у некоторых элементов формы) или позиции курсора мыши (например,:hover определяет, находится ли курсор мыши над элементом).

 

Список стандартных псевдоклассов

·:active

·:any

·:any-link

·:checked

·:default

·:defined

·:dir()

·:disabled

·:empty

·:enabled

·:first

·:first-child

·:first-of-type

·:fullscreen

·:focus

·:hover

·:indeterminate

·:in-range

·:invalid

·:lang()

·:last-child

·:last-of-type

·:left

·:link

·:not()

·:nth-child()

·:nth-last-child()

·:nth-last-of-type()

·:nth-of-type()

·:only-child

·:only-of-type

·:optional

·:out-of-range

·:read-only

·:read-write

·:required

·:right

·:root

·:scope

·:target

·:valid

·:visited

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент::first-line может быть использован для изменения шрифта первой строки абзаца.

/* Первая строка каждого элемента <p>. */

p::first-line{

color: blue;

text-transform: uppercase;

}

 

Списокстандартныхпсевдоэлементов

 

::after

·::before

·::cue

·::first-letter

·::first-line

·::selection

·::slotted

·::backdrop

·::placeholder

·::marker

·::spelling-error

::grammar-error

Переходы и анимация

Эволюцией CSS3 стала возможность задавать поведение для переходов и анимации. Фронтенд-разработчики много лет просили реализовать эти взаимодействия внутри HTML и CSS, без использования JavaScript или Flash. Теперь их мечта сбылась.

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

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

Переходы

Как уже упоминалось, чтобы переход имел место, элемент должен получить изменение состояния и для каждого состояния должны быть определены разные стили. Самый простой способ задать стили для различных состояний — это воспользоваться псевдоклассами:hover,:focus,:active и:target.

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

В приведённом ниже примере блок изменит цвет фона в течение одной секунды в линейном виде.

.box {background: #2db34a;transition-property: background;transition-duration: 1s;transition-timing-function: linear;}.box:hover {background: #ff7b29;}

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

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

.box {background: #2db34a;-webkit-transition-property: background;-moz-transition-property: background;-o-transition-property: background;transition-property: background;-webkit-transition-duration: 1s;-moz-transition-duration: 1s;-o-transition-duration: 1s;transition-duration: 1s;-webkit-transition-timing-function: linear;-moz-transition-timing-function: linear;-o-transition-timing-function: linear;transition-timing-function: linear;}.box:hover {background: #ff7b29;}

Transition-property

Свойство transition-property определяет, какие именно свойства будут меняться в сочетании с другими свойствами перехода. По умолчанию, изменяться будут все свойства в различных состояниях. Тем не менее, только свойства заданные в значении transition-property будут затронуты в любых переходах.

В приведённом выше примере, свойство background определено в значении transition-property. Здесь background — единственное свойство, которое будет изменяться в течение 1 секунды в линейном виде. Любые другие свойства, включённые когда изменяется состояние элемента, но не добавленные в значение transition-property, не получат поведение перехода, как это установлено в свойствах transition-duration или transition-timing-function.

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

.box {background: #2db34a;border-radius: 6pxtransition-property: background, border-radius;transition-duration: 1s;transition-timing-function: linear;}.box:hover {background: #ff7b29;border-radius: 50%;}

Свойства в переходах

Важно отметить, что не для всех свойств может быть выполнен переход, а только для свойств, которые имеют различимую точку на полпути. Цвета, размеры шрифтов и тому подобное могут переходить от одного значения к другому, поскольку у них есть распознаваемые значения в промежутке друг с другом. У свойства display, например, не может быть перехода, поскольку оно не имеет никакой средней точки. Набор наиболее популярных свойств, к которым применим переход следующий.

· background-color

· background-position

· border-color

· border-width

· border-spacing

· bottom

· clip

· color

· crop

· font-size

· font-weight

· height

· left

· letter-spacing

· line-height

· margin

· max-height

· max-width

· min-height

· min-width

· opacity

· outline-color

· outline-offset

· outline-width

· padding

· right

· text-indent

· text-shadow

· top

· vertical-align

· visibility

· width

· word-spacing

· z-index

Transition-duration

Длительность перехода задаётся с помощью свойства transition-duration. В качестве значения этого свойства можно использовать основные значения времени, в том числе секунды (s) и миллисекунды (ms). Эти значения времени можно также задавать и дробными —.2s, например.

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

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

.box {background: #2db34a;border-radius: 6px;transition-property: background, border-radius;transition-duration:.2s, 1s;transition-timing-function: linear;}.box:hover {background: #ff7b29;border-radius: 50%;}

Функция перехода

Свойство transition-timing-function используется для задания скорости, с которой будет двигаться переход. Зная длительность из свойства transition-duration у перехода может быть несколько скоростей в пределах одной длительности. Некоторые наиболее популярные значения ключевых слов для свойства transition-timing-function включают linear, ease-in, ease-out и ease-in-out.

Значение linear определяет переход, движущийся в постоянной скоростью из одного состояния к другому. Значение ease-inопределяет переход, который начинается медленно и ускоряется на протяжении перехода, в то время как значение ease-outопределяет переход, который начинает быстро и замедляется в течение всего перехода. Значение ease-in-out определяет переход, который начинается медленно, ускоряется в середине, а затем снова замедляется перед окончанием.

За каждой функцией времени стоит кубическая кривая Безье, которую можно указать конкретно с помощью значения cubic-bezier(x1, y1, x2, y2). Дополнительные значения включают step-start, step-stop и значение steps(<число шагов>, <направление>).

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

.box {background: #2db34a;border-radius: 6px;transition-property: background, border-radius;transition-duration:.2s, 1s;transition-timing-function: linear, ease-in;}.box:hover {background: #ff7b29;border-radius: 50%;}

Transition-delay

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

.box {background: #2db34a;border-radius: 6pxtransition-property: background, border-radius;transition-duration:.2s, 1s;transition-timing-function: linear, ease-in;transition-delay: 0s, 1s;}.box:hover {background: #ff7b29;border-radius: 50%;}