reklama
dofollow
Subscribe via RSS
RSS
Вторник, 30.04.2024, 04:28
Приветствую Вас Гость | RSS

Главная » 2011 » Июль » 21 » Как сделать в uCoz эффект прозрачности изображения.
13:36
Как сделать в uCoz эффект прозрачности изображения.
   Многие видели подобное в Интернете и уже знают, как сделать картинку или баннер прозрачным, этак на процентов 40-50 в статичном состоянии и при наведении мышью на изображение, чтобы оно возвращалось в нормальное, четкое и не прозрачным состояние. Обычно так скрывают излишне пестрые и ненужные, в дизайнерском плане, баннеры или наоборот применяют данных эффект прозрачности, как оригинальный дизайнерский ход. Как использовать эффект прозрачности решать Вам, а я сейчас расскажу, как это можно сделать в юкоз.

Эффект прозрачности картинки

   Для создания прозрачности нужно добавить парочку строчек в стили css. Как заходить туда помните? Панель управление сайтом → управление дизайном → таблица стилей (CSS). Итак, нам нужно добавить в самый низ пару строчек следующего кода:

Code
/* ----////// Прозрачность изображений /////------- */

#prozrachnost a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40); 
}

#prozrachnost a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}

   А что дальше, спросите Вы! Теперь нам достаточно «закрыть» нужные нам картинки, баннера или другую графику в специальный див. Это делается так:

Code
<div id="prozrachnost">Тут могут быть ваши изображения или баннеры</div>

   Все банально просто, но эффектно. )))

P.S. Этот эффект прозрачности работает только с изображениями, которые являются одновременно и ссылками.

Введите свой email адрес:

Хочешь получать первым новые статьи блога? Подпишись на рассылку! ;)


Категория: Юкоз полезности :) | Просмотров: 4824 | Добавил: DrUcoz | Теги: эффект, картинка, баннер, прозрачность, uCoz, изображение, юкоз | Рейтинг: 4.7/3
Всего комментариев: 3
0  
3 Михаил   (16.11.2011 11:41) [Материал]
div id="prozrachnost"><img src="/pict/pict150/6.gif" alt=""></div></a>
вот так будет корректно оформление**?? у меня не работает что то... хотя в таблицу стилей вставил код...

0  
2 DrUcoz   (26.07.2011 09:38) [Материал]
Хм... как вариант. Большое спасибо за подробную полезную информацию!

+1  
1 футболмастер   (25.07.2011 20:09) [Материал]
Полезный пост. Но тут присутствуют пару нюансов. Смотри:

1. Для полной кроссбраузерности лучше использовать код

img.transparent {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Mozilla */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Хорошие браузеры */
opacity: 0.5;
}

2. "Теперь нам достаточно «закрыть» нужные нам картинки, баннера или другую графику в специальный див." - Я думаю что легче присвоить класс или идентификатор к изображению, быстрее и экономнее (пример. <img class="transparent" alt="Прозрачная картинка" />)

3. "Этот эффект прозрачности работает только с изображениями, которые являются одновременно и ссылками." - Спорное утверждение. Например. я часто использовал в свои дизайны прозрачность над изображениями которые не являлись ссылками. Эффект смены прозрачности при :hover прекрасно работал.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Вот еще парочка, другая интересных обзоров и полезных статей от Доктора Юкоз:

Как узнать размер главной страницы сайта?! (4)
Зарабатываем с юкоз. (6)
Почти месяц! (0)
Устанавливаем блок с рекомендацией использовать в uCoz браузер Mozilla Firefox. (2)
Как распознать юкоз сайт? (2)
Поиск очередной жертвы. (3)
Покупка индивидуального ip-адреса для сайта на юкоз. (1)

Обои uCoz от Доктора Юкоз:

сайты дизайн обзор DrUcoz реклама Доктор пузомерки баннер адрес айпи обмен анекдоты unet SEO фотошоп блог обои юкоз Байт яндекс yandex апрель Беларусь Вордпресс партнерка система pr статья icon заработок тиц комментарии Блоггер deposifiles деньги ап google Доктор Юкоз топ обои обои uCoz акция Сайт иконка AJAX картинка Блоги Ю.Блоги dofollow вебмастер посещаемость интернет uCoz домен инструкции uCoz FireFox Mozilla Firefox логотип год ссылки статьи favicon Аккумулятор 2012 ссылка wordpress Webmoney юкоз проект Шаблон работа

Мини-профиль

В начале пути uCoz

Категории блога

Юкоз блоги :) [11]

Обзоры блогов, сделанных в uCoz.

Юкоз форумы :) [0]

Обзоры форумов, сделанных в uCoz.

Юкоз порталы :) [4]
Юкоз коммерческие сайты! [1]
Юкоз ужасы :( [5]
Юкоз прочее :) [26]
Юкоз полезности :) [28]

Инструкции по установке различных примочек для uCoz и полезные советы, которые могут пригодиться вебмастерам этой системы.

Интересное вне Юкоз [4]
Мир вебмастера [31]
Обои Юкоз [4]
Минусы uCoz [2]
Плюсы uCoz [4]
Личное [2]
Переходим на Wordpress [2]

Все, что связанно с Вордпресс движком и переходом на него с uCoz.

Стихи про Интернет [1]
Как поменять стандартный дизайн шаблона от uCoz? Ответы тут! [2]

В этой категории со временем будут собраны инструкции по смене дизайнов ко всем стандартным шаблонам uCoz.

Продам шаблон для uCoz. [0]

Рекламуля

Я Доктор Юкоз

Доктор Юкоз

Статистикуля


Онлайн всего: 1
Гостей: 1
Пользователей: 0



Кто сегодня посетил блог:


ТУТ опубликовано статей( 119 ),
комментариев к статьям( 374 ), активных пользователей ( 253 ).

Программульки

Мой блог адаптирован под браузер ChromiumСкачать/Download
Всегда свежая версия браузера Chromium, официально выпущенная uCoz, использовав который, Вы не увидите надоевшую рекламу от uCoz!

Поисковичек Доктора