01:25 

Дополнительные блоки. Прозрачность.

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Для примера возьмем кота из моего оформления.
Я знаю что он жуткий, но мне нравится)
Грузим в БИ, прописываем общие свойства.
#add_block1 {width: 236px !important; height: 222px !important; background: url('/userdir/2/2/2/0/2220055/82354467.png') 0px 0px no-repeat; position: absolute !important; top: 200px; left:50%; margin-left: -250px; z-index: 2;}

БЛОК1 {ширина; высота; фоновое изображение; позиционирование;}

Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. То есть 0.1, 0.2, ... 1.0
Я хочу добиться эффекта когда кот не виден, только если его случайно задеть мышкой.
#add_block1 {opacity : 0.1 !important;}
На всякий случай говорю браузеру, что это значение важно.
#add_block1:hover {opacity : 1.0 !important;}
Вот что получается:

Но мне хочется плавности, поэтому я задаю время за которое кот сменит прозрачность с 0.1 на 1.0. В секундах.
#add_block1 { transition: all 2s;-moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s;}
И время за которое он снова станет полупрозрачным.
#add_block1:hover { transition: all 2s;-moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s;}
Свойство задаю само по себе и для различных браузеров.
Вот что получается в итоге:

Вопрос: Полезно?
1. Да 
23  (95.83%)
2. Нет 
1  (4.17%)
Всего: 24

@темы: как это сделано, возможности CSS, Кареглазый Демон

Комментарии
2018-01-03 в 00:31 

Bacca.
Рано или поздно, так или иначе
А вот это еще более здорово! И кот мне очень нравится :) И сам этот эффект очень классный.
И я уже лучше понимаю, о чем написано в коде.
Вы хорошо объясняете. Обязательно кого-нибудь так пристрою, когда сделаю себе наконец интересный фон.

2018-01-03 в 01:35 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Bacca., благодарю) Приятно что смог заинтересовать)

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Original Designs бесплатники, CSS и уроки по созданию оформлений.

главная