|
|
|
|
Как создать эффект скругления углов изображения с помощью JavaScript Автор: Андрей Краснокутский Дата: 2011-11-09 Скругляем углы изображений используя JavaScript.В этом уроке мы разберемся с работой скрипта JavaScript позволяющем создавать эффект скругления углов на изображениях. Кроме того этот скрипт позволяет наложить на изображение дополнительные эффекты: наложить градиент и эффект отбрасывания тени. Самое замечательное в работе этого скрипта то, что визуальные эффекты создаются без использования графических программ, т.е. изображение не требуется обрабатывать например в фотошопе. Ниже Вы видите пример работы скрипта:
Смоленск. Успенский собор Пресвятой Богородицы.
Для подключения скрипта скачайте архив. В архиве находится файл скрипта: glossy.js и исходник, в котором Вы можете посмотреть как это делается, если что-то не поняли в этом уроке. Теперь о том как скрипт подключается. Распакуйте архив, файл glossy.js положите в корень сайта или любую другую папку, но при этом не забудьте прописать правильный путь до него. Далее назначаем изображению класс glossy. Полностью код подключения скрипта приведен в Листинге 1. Листинг 1.
Первая строка - это стандартное подключение JavaScript. Вторая строка - задаем изображению класс glossy. Как видите все очень просто. Можно регулировать радиус закругления углов на изображениях. Для этого нужно назначить изображению еще один класс: iradius, в котором и указывается значение закругления углов в цифрах от 20 до 50. Как это прописать практически? Смотрите Листинг 2. По умолчанию это значение принято 25. Листинг 2.
Если Вы хотите убрать эффект тени для изображения, то нужно прописать еще один класс, запрещающий отбрасывать тень: класс - noshadow. Смотрим Листинг 3.
Листинг 3.
Смоленск. Памятник Александру Твардовскому и Василию Теркину.
Вот собственно говоря и все. В примерах и кодах листингов я исходил из того, что все файлы (скрипт и изображения) лежат в корневой папке сайта. Если у Вас эти файлы лежат в другом месте не забудьте прописать правильный путь до них. Скрипт прост в установке и работает во всех распространенных браузерах. Всего Вам доброго.
Читайте так же другие наши материалы. Как работают поисковые роботы-пауки? Почему большинство людей, не добиваются успеха? Как сделать Базу Данных на Локальном сервере? Как создать RSS-канал новостей на сайте? Пошаговый обучающий Видео Курс по созданию сайтов. Заказать создание Сайта или Блога.
Просмотров: 11003 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Александр Что такое корень сайта и корневая папка в вордпрессе, и как к ней прописать путь? И вообще где она?)Надеюсь, ответите. Комментарии добавил(а): АндрейК Корень сайта или еще говорят корневая папка - это папка в которую закачивают все файлы и папки сайта. В большинстве случаев (почти на всех серверах) это папка: public_html Комментарии добавил(а): Лиза Добрый день. Первый раз делаю сайт. Делаю его в программе frontpage. Пробовала раз вставить скрипт, и ничего не получилось. Их вообще реально вставить во время разработки сайта в программе или только после перенесения сайта в интернет? Прошу помогите, и если вам не трудно, сделайте пошаговый урок, как работать со скриптами. Если можно в картинках :) Комментарии добавил(а): АндрейК Лиза. Все уроки по работе со скриптами находятся в разделе Скрипты, здесь: http://www.luksweb.ru/view_cat.php?cat=14 Комментарии добавил(а): Алексадр АндрейК А где же её найти, эту папку? В админке сайта нету. Где она? Комментарии добавил(а): Александр В корень сайта положил. Что дальше? Ничего не получается. Куда вставлять эти листинги? Там,где "добавить картинку" свои коды. Комментарии добавил(а): Григорий Отличный скрипт. Примерно такого же я добивался через правку шаблона Joomla в Photoshop - оказывается все намного проще. Комментарии добавил(а): Роман У меня не работает Комментарии добавил(а): Владимир А для Ворд Пресса подходит? Комментарии добавил(а): Ольга Добрый день! Углы скруглились, красиво! мне нужно чтобы картинка располагалась справа от текста. Подскажите, как это сделать? Комментарии добавил(а): АндрейК Ольга, воспользуйтесь: align="left" или float Комментарии добавил(а): Andrews32 В IE не работает Комментарии добавил(а): Andrews32 Пытаюсь понять, как сделано здесь: http://ecoroom-tekstil.ru/#box_6 (Наши работы) Работает во всех браузерах Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |