23:21
ОбновитьСмайлыУправление мини-чатом
Вы вошли как Гость | Группа "Гости" | RSS

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Скрипты для сайта Ucoz » Скрипты Ucoz » Закругление углов у картинок через css (Закругление углов у картинок)
Закругление углов у картинок через css
AmazonkaДата: Суббота, 19.02.2011, 18:57 | Сообщение # 1
Майор
Группа: Администраторы
Сообщений: 37
[ ]
Offline

Очень простое настраиваемое закругление краёв любых картинок через css

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:

Code

<style type="text/css">   
.normal-img {
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
   box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
</style>

Немного разберём настройки:

-webkit-border-radius: 15px; - Степень закругления углов для Вебкит браузеров
-moz-border-radius: 15px; - Степень закругления углов для браузеров на движке Mozilla
border-radius: 15px; - Степень закругления углов для всех остальных браузеров

-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для Вебкит браузеров
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для браузеров на движке Mozilla
box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для всех остальных браузеров

Для того, чтобы придать картинке эффект закруглённых углов, достаточно присвоить ей класс "normal-img"

Code

<img src="Ссылка на картинку" width="100" height="100" class="normal-img" />

Ссылка на источник материала.

Форум » Скрипты для сайта Ucoz » Скрипты Ucoz » Закругление углов у картинок через css (Закругление углов у картинок)
Страница 1 из 11
Поиск:

Сделать бесплатный сайт с uCoz

www.owi.3dn.ru © Все права защищены! 2010-2011 Сайт оптимизирован под разрешение экрана 1280х1024 и браузеры Mozila Firefox
Загрузка...