39. Создание динамических эффектов: создание ссылок-кнопок, подсветка кнопок и текста. Пример.

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

Весь фокус заключается в том, что для ссылок в обычном состоянии задается стиль, имитирующий выпуклую кнопку. Определяются фон, рамка и цвет текста. Эффект "выпуклости" достигается подбором цвета границ. Когда кнопка выпуклая, ее верхняя и левая границы должны быть светлее по тону, чем нижняя и правая, когда кнопка выбирается (на нее наводится курсор), цвета границ меняются и кажется, что происходит "нажатие" кнопки. Для цвета границ лучше всего оттенки серого, они по тону подходят к любому цвету, какой бы вы ни указали для кнопки. При этом ссылка остается ссылкой, а не кнопкой.

Проиллюстрируем сказанное на примере. Запишем стиль для ссылки в обычном состоянии: 

A { background:#0099FF;  border-top: 1px solid #D5D5D5; border-left: 1px solid #D5D5D5;  border-bottom: 1px solid #4E4E4E;  border-right: 1px solid #4E4E4E; color:#FFFF99; font: 0.8em Tahoma, sans-serif;  text-decoration:none; padding: 2px 5px; }

А теперь для ссылки во время наведения на нее курсора мыши меняем местами цвета границ: 

A: hover { border-top: 1px solid #4E4E4E;  border-left: 1px solid #4E4E4E;  border-bottom: 1px solid #D5D5D5;  border-right: 1px solid #D5D5D5; }

Запишем код нескольких ссылок, чтобы посмотреть на результат: 

<A HREF="#">Главная</А> <A HREF="#">0 компании</А> <A HREF="#">Продукция</А> <A HREF="#">Галерея</А>

40. Анимация с помощью css: синтаксис, свойства и их описание. Пример.

С приходом поддержки в современных браузерах css 3-й версии, у веб мастеров появилось мощное средство реализации простейшей анимации на страницах.

К такой анимации можно отнести: Плавное изменение цвета, размера, положения и прозрачности элементов. И всё это возможно благодаря свойству transition.

Описание

Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration,transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript.

Синтаксис

transition: <переход> [, <переход> ]*

Здесь:

<переход> = [ none | <transition-property> ] || <transition-duration> ||  <transition-timing-function> || <transition-delay>

Значения

none

Отменяет эффект перехода.

<transition-duration>

Описание

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.

Синтаксис

transition-duration: <время> [,<время>]*

<transition-timing-function>

Описание

Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).

<transition-delay>