CSS3
Блок с тенью
Сделайте блок, показанный на рис. 1. Блок содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px.
Рис. 1
Гламурная кнопка
Сделайте кнопку как на рисунке, используя только CSS.
Значки для листания фотографий
Добавьте круглые значки поверх фотографии размером 600х380 пикселов, как показано на рис. 1. Значки должны располагаться по центру на расстоянии 16px от нижнего края. При наведении на значок курсор мыши превращается в «руку».
Нумерация
Создайте страницу на HTML5 реализующую нумерацию, представленную на рис. 1. Страница должна корректно смотреться в последних версиях Chrome, Safari и Firefox.
Рис. 1
Обязательные поля формы
Сделайте форму, показанную на рис. 1, в которой поля обязательные к заполнению отмечены крестиком, а необязательные поля зеленой галочкой. При корректном заполнении обязательных полей должен меняться и рисунок возле поля.
Рис. 1. Вид формы
Последняя линия справа
Придумайте три способа, как убрать последнюю линию справа от ссылки. При этом допускается только редактировать стили без изменения HTML-кода внутри <body>.
Рис. 1. Ссылки с линией справа
Создание меню с тенью
Создайте меню, показанное на рисунке, на HTML5 с помощью тегов <ul>, <li> и с соблюдением ряда условий.
Таблица с зеброй
Измените стиль для таблицы, чтобы она получилась, как показано на рис. 1. Вносить изменения в код таблицы нельзя, всё оформление должно делаться только через стили.
Рис. 1. Таблица с зеброй
Текст для галочки
Создайте страницу, показанную на рис. 1. Текст возле отмеченных галочек должен выделяться фоновым цветом. Код должен корректно работать в последних версиях браузеров Internet Explorer, Firefox, Opera, Safari, Chrome.
Рис. 1. Пример страницы
Цветные колонки в таблице
Создайте таблицу представленную на рис. 1. Должны соблюдаться следующие условия:
- валидный строгий XHTML-код;
- валидный CSS 3;
- к тегам внутри таблицы запрещается добавлять идентификаторы и классы;
- содержимое третьей колонки выравнивается по центру.
Шаги
Сделайте указатель шагов показанный ниже на рисунке. Шаги должны корректно отображаться в браузерах Opera 11.10, Firefox 6, Chrome 12, Safari 5. Для IE достаточно сделать горизонтальные прямоугольники без стрелок и градиентов. Все элементы должны отображаться правильно независимо от выбранного текущего шага.
