Задачи для решения

Основы

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Задержка

Повторите страницу по данному по образцу (наведите мышкой на элемент и подержите ее 3 секунды):

Вы можете открыть этот пример в отдельной вкладке браузера.

Инпут в фокусе

Для решения задач данного блока вам понадобится следующий псевдокласс: focus.

Повторите страницу по данному по образцу (поставьте курсор в инпут и повторите его поведение):

Вы можете открыть этот пример в отдельной вкладке браузера.

Транзишн и продвинутые селекторы

Повторите страницу по данному по образцу (при наведении на зеленый блок, все красный блоки плавно увеличат свою ширину):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на один из красных блоков):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на один из красных блоков):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на один из красных блоков):

Вы можете открыть этот пример в отдельной вкладке браузера.

Подсказка

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Пошаговые полоски

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Кривые Безье

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Индикатор

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Анимированные тени

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Выпадающая менюшка

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.