Шапка сайта

CSS3

Урок 3 Текст Исходник Упражнения
Урок 5 Фон Исходник Упражнения
Урок 6 Цвет Исходник Упражнения
Урок 7 Рамки Исходник Упражнения
Урок 8 Тени Исходник Упражнения
Урок 9 Градиент Исходник Упражнения
Урок 12 Анимация Исходник Упражнения

Упражнение

X
  1. Выведите горизонтальное меню с использованием тега ul.
  2. Сделайте рамку у каждого элемента меню справа.
  3. У последнего элемента меню рамки быть не должно.

Примечание: Используйте псевдоэлемент last-child.

  1. Создайте блок шириной 300px.
  2. Выведите 5 результатов поиска. Например, «стандартов выбрать: html или xhtml. и для облегчения вашего выбора я решил разобрать разницу между html и xhtml. главное отличие между html и xhtml в том, что».
  3. Всё, что не вмещается в 300px должно обрезаться и после этого ставиться многоточие.

Примечание: Сделайте 5 разных результатов поиска: чтобы одни вмещались, а другие нет. И 1 из вариантов обязательно сделайте без пробелов, например, символов 200 без единого пробельного символа.

  1. Найдите любой понравившийся Вам шрифт http://xfont.ru
  2. Конвертируйте его в нужный формат.
  3. Подключите шрифт к сайту.
  4. Выведите через тег какой-нибудь текст этим шрифтом.
  1. Найдите достаточно крупное изображение (в хорошем качестве): автомобиль, фотографию актёра (актрисы), певца, мобильного телефона – чего угодно.
  2. Вставьте на фон страницы это изображение и растяните его на весь экран.
  3. Создайте блок, внутри которого вставьте любую картинку и растяните её на всю ширину блока.
  4. Внизу справа вставьте ещё маленькую картинку (например, с каким-нибудь логотипом).
  1. Выполните первые 2 пункта из предыдущего упражнения.
  2. Создайте блок с фоном красного цвета и прозрачностью 0.5.
  3. Для тех, кто знает JavaScript:
    1. Сделайте две кнопки «+» и «-».
    2. При клике на «+» увеличивайте прозрачность цвета фона на 0.1.
    3. При клике на «-» уменьшайте прозрачность цвета фона на 0.1.
  1. Сделайте блок с закруглениями со всех сторон по 5px.
  2. Сделайте блок с закруглениями только сверху по 5px.
  1. Добавьте блок и сделайте у него тень двойную тень зелёного цвета.
  2. Добавьте заголовок в теге h1 и сделайте у него тень синего цвета.
  1. Сделайте градиент снизу вверх от чёрного к белому.
  2. Для тех, кто знает JavaScript:
    1. Добавьте форму со следующими полями: начальный цвет, конечный цвет, угол.
    2. Сделайте градиент у блока, считав данные из формы, причём делайте это динамически, то есть непосредственно при вводе данных. Другими словами, никаких кнопок быть не должно. Пользователь начинает вводить и если данных уже достаточно, то градиент сразу отрисовывается.
  1. Выведите изображение, повёрнутое на 90 градусов.
  2. Для тех, кто знает JavaScript:
    1. Сделайте две кнопки под изображением из 1-го пункта: «Повернуть на 90 градусов влево» и «Повернуть на 90 градусов вправо».
    2. При клике по кнопке «Повернуть на 90 градусов влево» поверните изображение из 1-го пункта на 90 градусов влево.
    3. При клике по кнопке «Повернуть на 90 градусов вправо» поверните изображение из 1-го пункта на 90 градусов вправо.
    4. Безусловно, пользователь может кликать по кнопке много раз, и каждый раз изображение должно поворачиваться в нужную сторону на 90 градусов.
  1. Сделайте меню с подменю (например, через ul).
  2. При наведении курсора мыши плавно раскройте подменю пункта, на который был наведён курсор мыши, без использования JavaScript.
  1. Выведите блок с красным цветом фона.
  2. Плавно измените его цвет сначала на синий (40% длительности от анимации), а затем на зелёный (60%), затем обратно на красный (100%).
  3. Сделайте анимацию повторяющейся 2 раза и длительностью 5 секунд.