Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Как создать эффект скругления углов изображения с помощью 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-канал новостей на сайте?

Пошаговый обучающий Видео Курс по созданию сайтов.

Заказать создание Сайта или Блога.

 

Просмотров: 7993


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Александр
Дата: 2011-11-19

Что такое корень сайта и корневая папка в вордпрессе, и как к ней прописать путь? И вообще где она?)Надеюсь, ответите.

Комментарии добавил(а): АндрейК
Дата: 2011-11-19

Корень сайта или еще говорят корневая папка - это папка в которую закачивают все файлы и папки сайта. В большинстве случаев (почти на всех серверах) это папка: public_html

Комментарии добавил(а): Лиза
Дата: 2011-11-21

Добрый день. Первый раз делаю сайт. Делаю его в программе frontpage. Пробовала раз вставить скрипт, и ничего не получилось. Их вообще реально вставить во время разработки сайта в программе или только после перенесения сайта в интернет? Прошу помогите, и если вам не трудно, сделайте пошаговый урок, как работать со скриптами. Если можно в картинках :)

Комментарии добавил(а): АндрейК
Дата: 2011-11-21

Лиза. Все уроки по работе со скриптами находятся в разделе Скрипты, здесь: http://www.luksweb.ru/view_cat.php?cat=14

Комментарии добавил(а): Алексадр
Дата: 2011-11-22

АндрейК А где же её найти, эту папку? В админке сайта нету. Где она?

Комментарии добавил(а): Александр
Дата: 2011-11-23

В корень сайта положил. Что дальше? Ничего не получается. Куда вставлять эти листинги? Там,где "добавить картинку" свои коды.

Комментарии добавил(а): Григорий
Дата: 2011-11-09

Отличный скрипт. Примерно такого же я добивался через правку шаблона Joomla в Photoshop - оказывается все намного проще.

Комментарии добавил(а): Роман
Дата: 2011-11-10

У меня не работает

Комментарии добавил(а): Владимир
Дата: 2011-11-10

А для Ворд Пресса подходит?

Комментарии добавил(а): Ольга
Дата: 2012-03-15

Добрый день! Углы скруглились, красиво! мне нужно чтобы картинка располагалась справа от текста. Подскажите, как это сделать?

Комментарии добавил(а): АндрейК
Дата: 2012-03-15

Ольга, воспользуйтесь: align="left" или float

Комментарии добавил(а): Andrews32
Дата: 2014-07-10

В IE не работает

Комментарии добавил(а): Andrews32
Дата: 2014-07-10

Пытаюсь понять, как сделано здесь: http://ecoroom-tekstil.ru/#box_6 (Наши работы) Работает во всех браузерах

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT