Высокая сложность

Знак французских ВВС

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

рис. 1

Рис. 1

Обратная связь

Сделайте блок с фиксированным положением, который не будет изменять свою позицию при прокрутке страницы. Изначально блок практически полностью скрыт, но при наведении на него курсора мыши он плавно выезжает вправо (рис. 1). Если курсор убрать, то блок плавно возвращается в исходное положение.

Положение блока при наведении на него курсора

Рис. 1. Положение блока при наведении на него курсора

Ход конём

Сделайте таблицу 3х3 с фиксированной шириной и высотой ячеек. При щелчке по любой ячейке в ней выводится изображение коня (рис. 1). Повторный щелчок по ячейке убирает в ней коня. Код должен работать во всех современных браузерах.

Рис. 1

Рис. 1

Социальные связи

Сделайте страницу, как показано на рис. 1. Иконки вокруг изображений являются ссылками, при наведении на них они меняют свой цвет (рис. 2).

рис. 1

Рис. 1

Эквалайзер

Сделайте страницу, как показано на рис. 1. Ориентируйтесь на последние версии браузеров, использовать стилевые префиксы не обязательно.

Рис. 1

Рис. 1

Рамка

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

рис. 1

Рис. 1

Хостинг

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

Рис. 1

Рис. 1

Блок с указателем

Сделайте страницу, как показано на рис. 1. Ширина блока резиновая и меняется в зависимости от размеров окна браузера. Указатель всегда располагается посередине блока, размеры указателя фиксированы.

Рис. 1

Ниспадающее меню

Сделайте ниспадающее меню, показанное на рисунках.

Рис. 1. Исходный вид меню

Рис. 2. Вид меню при наведении на первый пункт

Рис. 3. Вид меню при наведении на второй пункт

Картинка с тенью

Создайте блок с тенью фиксированного размера, в котором отображается картинка (рис. 1). Код должен корректно работать во всех современных браузерах.

Картинка с тенью

Рис. 1. Картинка с тенью

Так-тикс

Поле для игры в так-тикс имеет размер 5х5 клеток, в каждой клетке содержится круглая фишка (рис. 1).

Исходное поле для игры в так-тикс

Рис. 1. Исходное поле для игры в так-тикс

При наведении курсора мыши на любую клетку подсвечивается ряд, строка и сама фишка (рис. 2).

Вид поля при наведении на клетку курсора мыши

Рис. 2. Вид поля при наведении на клетку курсора мыши

Шаги

Сделайте указатель шагов показанный ниже на рисунке. Шаги должны корректно отображаться в браузерах Opera 12+, Firefox 6+, Chrome 12+. Для IE достаточно сделать горизонтальные прямоугольники без стрелок и градиентов. Все элементы должны отображаться правильно независимо от выбранного текущего шага.

Электронный сомелье

Сверстайте форму из PSD-файла для ввода коктейля.

Автор описания и дизайна — Александр Шпак.

Рамка вокруг текста

Придумайте пять способов создания рамки вокруг абзаца произвольного текста (тега <p>). Изменять и модифицировать код HTML нельзя, все изменения делаются только через стили. Кроссбраузерность можно не учитывать.

Страницы