Создание тени средствами JavaScript

02 января 2009 года
Mootools
  • Содержание

С помощью этого скрипта Вы можете наложить тень к любому объекту. Скрипт использует JavaSctipt-фреймворк Mootools 1.2. Использовать его достаточно просто, необходимо скачать библиотеку Mootools с официального сайта, скачать классы mooCanvas, mooCanvasShadow и подключить их к документу. 

<script src="js/mootools-1.2-core.js" type="text/javascript"></script>
<script src="js/moocanvas.js"></script>
<script src="js/mooCanvasShadow.js"></script>

Затем добавим событие domready, инициализирующий класс с требуемыми опциями:

window.addEvent('domready',function(){
	$('shadow').mooCanvasShadow({
		opacity: 0.2,
		size: 10,
		radius: 15,
		color: '#333333'
	});
})

Опции:

  • shadow - идентификатор элемента, образующего тень
  • opacity - непрозрачность
  • size - ширина тени
  • radius - радиус
  • color - цвет тени

Внимание! Для правильного отображения тени следует установить поля и отступы для body равными 0.

body {
	margin: 0;
	padding: 0;
}

Также не забудьте установить фон background у элемента shadow. Иначе Вы увидите слой тени прямо под вашим элементом.

Учтите, что слой shadow, "отбрасывающий" тень должен быть статическим. Так как его изменение размеров не приведет к изменению размеров тени, визуальный эффект нарушится.

Посмотреть пару примеров и скачать их можно на сайте источника.

Понравилась статья? Подпишись на RSS.

Pagination Class в CodeIgniter Многоуровневое выпадающее меню

Комментарии

  • virua написал 26 января 2009 года

    Ссылка около текста “или с моего САЙТА” ведет на DropDownMenu, думаю, это опечатка. Ведь ожидал увидеть “создание тени”.

    Ответить
  • Александр написал 26 января 2009 года

    Большое спасибо, исправил

    Ответить
  • juverman написал 28 июня 2009 года

    тень не работает в ФФ2, что очень странно. Даже в ие6 все ок

    Ответить