Лабораторная работа №6 – 2 Новые возможности в CSS3

Цель работы: изучить новые возможности для оформления фона web-страницы, текста, границ элементов, цвета; возможности использования градиента и трансформации в оформлении элементов.

Теоретические сведения

Фон

Свойство background-size устанавливает размер фоновых изображений (в пикселях или в процентах), например, background-size:150px 250px;

В свойстве background-image можно указать несколько фоновых изображений одновременно:- background-image: url (wis.gif), url (mount3.jpg);- background-size: 150px 40px, 100% 100%.

Цвет

- с помощью HSL – оттенок, насыщенность, яркость;

- с помощью RGBA – цвет и прозрачность;

- с помощью HSLA – цвет и прозрачность.

Границы

Свойство border-radius позволяет делать углы элементов сглаженными.

С помощью свойства box-shadow можно добавлять к элементам страницы тени.

С помощью свойства border-image можно вставлять произвольные изображения в качестве границы элемента.

Шрифт

Свойство @font-face позволяет подключать шрифты.

 @font-face {font-family:opensans;/* Задаем имя шрифта */src:url('opensans.woff')/* Указываем местонахождение нашего шрифта */ }

Текст

Свойство text-shadow добавляет к тексту элементов тени (можно несколько).

Указывается величина смещения тени от текста по горизонтали и вертикали (может быть отрицательной), а также радиус размытия и цвет тени.

Примеры:

text-shadow:3px 2px #FFAE00;

text-shadow:1px 1px 10px #FFAE00;

text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD.

Свойство text-overflow указывает, что должно случиться с текстом, вышедшем за пределы границ элемента.

Трансформации

Cвойство transform трансформирует элементы. Его значение – функция трансформирования:

- translate(x,y) смещает элемент на указанное количество пикселей по осям X и Y rotate(градусы) поворачивает элемент на указанное количество градусов по часовой стрелке;

- scale(x,y) растягивает элемент в ширину или высоту;

- skew(x,y) задает перекосы по оси X и Y под заданным углом.

Градиент

В CSS3 имеются встроенные свойства для создания градиентов. Для поддержки градиентов требуется добавить префиксы: для IE10+ требуется префикс -ms, для Chrome и Safari префикс -webkit, для Opera префикс -o и для Firefox префикс –moz.

- линейный градиент linear-gradient;

- сферический градиент radial-gradient.

Переходы

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

Контрольные задания

Задание 1. Продемонстрировать на своих web-страницах новые возможности CSS3 для оформления фона web-страницы, текста, границ элементов, цвета. Применить все описанные выше свойства для элементов своих web-страниц.

Задание 2. Изучить способы трансформации рисунка. Применить все способы для элементов на своем сайте (все 4).

Задание 3. Изучить возможности использования градиента. Применить все способы для элементов на своем сайте.

Задание 4. Научиться применять эффекты перехода. Применить все способы для элементов на своем сайте

Получившиеся HTML-документы сохранить в новых файлах и отразить в отчете.