Как создать эффект скругления углов изображения с помощью JavaScript
Автор: Андрей Краснокутский
Дата: 2011-11-09 Скругляем углы изображений используя JavaScript.
В этом уроке мы разберемся с работой скрипта JavaScript позволяющем создавать эффект скругления углов на изображениях. Кроме того этот скрипт позволяет наложить на изображение дополнительные эффекты: наложить градиент и эффект отбрасывания тени.
Самое замечательное в работе этого скрипта то, что визуальные эффекты создаются без использования графических программ, т.е. изображение не требуется обрабатывать например в фотошопе.
Ниже Вы видите пример работы скрипта:
До применения эффекта |
После применения эффекта |
|
|
Смоленск. Успенский собор Пресвятой Богородицы.
Для подключения скрипта скачайте архив. В архиве находится файл скрипта: glossy.js и исходник, в котором Вы можете посмотреть как это делается, если что-то не поняли в этом уроке.
Теперь о том как скрипт подключается. Распакуйте архив, файл glossy.js положите в корень сайта или любую другую папку, но при этом не забудьте прописать правильный путь до него. Далее назначаем изображению класс glossy. Полностью код подключения скрипта приведен в Листинге 1.
Листинг 1.
<script type="text/javascript" src="glossy.js"></script>
<img src="sobor.jpg" class="glossy" />
|
Первая строка - это стандартное подключение JavaScript. Вторая строка - задаем изображению класс glossy. Как видите все очень просто.
Можно регулировать радиус закругления углов на изображениях. Для этого нужно назначить изображению еще один класс: iradius, в котором и указывается значение закругления углов в цифрах от 20 до 50. Как это прописать практически? Смотрите Листинг 2. По умолчанию это значение принято 25.
Листинг 2.
<img src="sobor.jpg" class="glossy iradius50" />
|
Радиус скругления - 20 |
Радиус скругления - 50 |
|
|
Если Вы хотите убрать эффект тени для изображения, то нужно прописать еще один класс, запрещающий отбрасывать тень: класс - noshadow. Смотрим Листинг 3.
Листинг 3.
<img src="sobor.jpg" class="glossy noshadow" />
|
До применения эффекта |
После применения эффекта |
|
|
Смоленск. Памятник Александру Твардовскому и Василию Теркину.
Вот собственно говоря и все. В примерах и кодах листингов я исходил из того, что все файлы (скрипт и изображения) лежат в корневой папке сайта. Если у Вас эти файлы лежат в другом месте не забудьте прописать правильный путь до них.
Скрипт прост в установке и работает во всех распространенных браузерах.
Всего Вам доброго.
Читайте так же другие наши материалы.
Как работают поисковые роботы-пауки?
Почему большинство людей, не добиваются успеха?
Как сделать Базу Данных на Локальном сервере?
Как создать RSS-канал новостей на сайте?
Пошаговый обучающий Видео Курс по созданию сайтов.
Заказать создание Сайта или Блога.
Просмотров: 12023
Что такое корень сайта и корневая папка в вордпрессе, и как к ней прописать путь? И вообще где она?)Надеюсь, ответите.
Корень сайта или еще говорят корневая папка - это папка в которую закачивают все файлы и папки сайта. В большинстве случаев (почти на всех серверах) это папка: public_html
Добрый день. Первый раз делаю сайт. Делаю его в программе frontpage. Пробовала раз вставить скрипт, и ничего не получилось. Их вообще реально вставить во время разработки сайта в программе или только после перенесения сайта в интернет? Прошу помогите, и если вам не трудно, сделайте пошаговый урок, как работать со скриптами. Если можно в картинках :)
Лиза. Все уроки по работе со скриптами находятся в разделе Скрипты, здесь: http://www.luksweb.ru/view_cat.php?cat=14
АндрейК
А где же её найти, эту папку? В админке сайта нету. Где она?
В корень сайта положил. Что дальше? Ничего не получается. Куда вставлять эти листинги?
Там,где "добавить картинку" свои коды.
Отличный скрипт. Примерно такого же я добивался через правку шаблона Joomla в Photoshop - оказывается все намного проще.
А для Ворд Пресса подходит?
Добрый день! Углы скруглились, красиво! мне нужно чтобы картинка располагалась справа от текста. Подскажите, как это сделать?
Ольга, воспользуйтесь: align="left" или float
Пытаюсь понять, как сделано здесь: http://ecoroom-tekstil.ru/#box_6 (Наши работы) Работает во всех браузерах
|