Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 10068 Просмотров
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Иногда возникает необходимость сделать некоторый элемент на странице с эффектом осветления либо затемнения (в общем - прозрачность).
Для чего это может понадобиться - подложка для элементов, блоки с счетчиками. Вот второй пример мы сейчас и рассмотрим.

Есть код счетчика, к примеру от SpyLog.
В менеджере модулей создаем новый модуль (предварительно отключив визуальный редактор для пользователя), вставляем код счетчика, публикуем модуль на нужной позиции, задаем ему CSS суффикс (для примера - spy). Конечно, можно вставить в index.php шаблона в определенный слой (ячейку) и задать класс, но чаще используют пользовательские модули (не лучше, но удобней).
В исходном коде у нас такая конструкция (у меня в шаблоне модули выводятся с помощью DIV):
Код: html4strict
<div class="moduletable-spy"><!-- SpyLOG -->some code<!--/ SpyLOG --></div>
Далее в файле стилей шаблона пишем загадочные строки:
Код: css
.moduletable-spy img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-opacity: 0.6;    /* Mozilla 1.6  */
-khtml-opacity: 0.6;  /* Konqueror 3.1, Safari 1.1 */
opacity: 0.6;         /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
filter: alpha(opacity=60); /* IE 5.5+*/
}
.moduletable-spy a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-opacity: 0.9;    
-khtml-opacity: 0.9;  
opacity: 0.9;        
filter: alpha(opacity=90);
}
Почему применяю описание для разных элементов - может быть я много не знаю, но в IE6 псевдокласс hover работает только для A, потому с помощью наследования добираемся до нужного нам элемента
В результате получили осветленную картинку счетчика, при наведении мышки она проявляется, естественно можно сделать и наоборот

Совершенно аналогично можно писать почти для любого элемента, разрешено использование background-color для осветления в разные тона.
« Последнее редактирование: 02.03.2010, 21:41:20 от beliyadm »
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

Спасибо! То, что нужно для ИЕ6+
*

ijturenkoff

  • Новичок
  • 3
  • 0 / 0
большое спасибо  8)
*

Beer

  • Завсегдатай
  • 1097
  • 41 / 1
  • БИРУ - БИР!
Доходчиво +1. Неспешно думал об этом - будем пробовать..))
*

Magnum

  • Захожу иногда
  • 269
  • 14 / 0
  • magnumblog.space
Все оно как бы хорошо..
Вот только данные параметры "true" для CSS 3, а при валидации которая идет через CSS 2.1 будет выдавать ошибку!
Так, что пользоваться или нет уже решать вам!
Я не волшебник. Я всего лишь учусь!
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Тема: Эффект затемнения для картинки (opacity)
Далее
Иногда возникает необходимость сделать некоторый элемент на странице с эффектом осветления.
То затемнение, то осветление…
Может свести к определению прозрачности, чтобы не путаться? Да и в поиске будет находится быстрее.
Ведь частично прозрачный элемент либо осветляется, либо затемняется, в зависимости от фона на котором он находится.
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Может свести к определению прозрачности, чтобы не путаться? Да и в поиске будет находится быстрее.
согласен :)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Magnum

  • Захожу иногда
  • 269
  • 14 / 0
  • magnumblog.space
Немного подкоректировав стили:
Код
.counter img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
opacity: 0.3;
filter: alpha(opacity=30);
}

.counter a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)";
opacity: 0.9;
filter: alpha(opacity=90);
}

Все равно валидатор ругается благим матом:
Цитировать
.counter img    Свойство -ms-filter не существует : "progid:DXImageTransform.Microsoft.Alpha(opacity=30)" "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"
.counter img    Свойство opacity не существует в CSS2.1, но существует в : 0.3 0.3
.counter img    Ошибка разбора opacity=30)
.counter a:hover img    Свойство -ms-filter не существует : "progid:DXImageTransform.Microsoft.Alpha(opacity=90)" "progid:DXImageTransform.Microsoft.Alpha(opacity=90)"
.counter a:hover img    Свойство opacity не существует в CSS2.1, но существует в : 0.9 0.9
.counter a:hover img    Ошибка разбора opacity=90)

Но в IE зато работает.. в коде первого поста не работало =)
Я не волшебник. Я всего лишь учусь!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Ховер эффект для изображения

Автор Оксана6767

Ответов: 16
Просмотров: 3595
Последний ответ 17.04.2019, 09:30:15
от bayersoff
Сделать эффект CSS у кнопок как у ссылки

Автор wishlight

Ответов: 1
Просмотров: 1043
Последний ответ 15.07.2018, 23:36:56
от AdWeb
Увиличение картинки при наведении

Автор vova630

Ответов: 0
Просмотров: 877
Последний ответ 25.03.2018, 02:45:33
от vova630
Стиль для всплывающего названия картинки- как?

Автор epson950

Ответов: 3
Просмотров: 1303
Последний ответ 03.11.2016, 01:04:05
от AlekVolsk
CSS Hover для картинки

Автор vitalid

Ответов: 19
Просмотров: 1475
Последний ответ 20.06.2016, 15:13:34
от vipiusss