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

17:35 

Еще о дополнительных блоках. Анимация.

Изумрудный Демон
Угрюм - и - Пиздат
О перемещении и полу прозрачности на примере аватарок было рассказано здесь. Об изменении размера и том как сделать аватарки черно-белыми здесь. Но думаю имеет смысл повторить на примере дополнительных блоков, дополнить и углубиться в детали.
Возьмем анимированную кошечку. Да, готовую. И да она нам подойдет только если фон дневника белый) Но мне главное объяснить принцип.

В любом графическом редакторе пере сохраняем ее как jpg.

Грузим оба изображения в БИ. Располагаем в правом нижнем (или левом) углу под меню.
Это статичное изображение. Оно у нас по умолчанию.
#add_block1 {width: 248px !important; height: 237px !important; background: url('/userdir/3/4/5/3/3453262/85444931.jpg') 0px 0px no-repeat; position: fixed !important; bottom:0px; right: 0px;z-index: 1;}
Это анимированное. Оно подгружается когда над ним мышка.
#add_block1:hover {width: 248px !important; height: 237px !important; background: url('/userdir/3/4/5/3/3453262/85444932.gif') 0px 0px no-repeat; position: fixed !important; bottom:0px; right: 0px;z-index: 1;}
Котейка обосновалась под меню.

Можно задать картинкам отступ сверху равный высоте меню, чтобы при маленьком разрешении экрана котя его не перекрывала. Но в этом случае учитывайте и пункты видимые гостям.

Вопрос: Полезно?
1. Да 
25  (100%)
2. Нет 
0  (0%)
Всего: 25

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

Комментарии
2018-01-02 в 21:31 

Bacca.
Рано или поздно, так или иначе
Спасибо! очень здорово! вроде все понятно. А откуда считаются отступы в данном случае?

2018-01-02 в 21:42 

Изумрудный Демон
Угрюм - и - Пиздат
Пожалуйста) Способов применения этого эффекта море. Анимировать можно пункты меню, ссылки, части поста... что угодно)
А откуда считаются отступы в данном случае? Тут позиция фиксированная. Отступы от границ экрана.

2018-01-02 в 22:45 

Bacca.
Рано или поздно, так или иначе
Попробовала я поселить у себя кошечку, чисто посмотреть. У меня с вашими настройками она сидит еще левее меню, а если задать отступ от левого края и посадить ее под меню - она перекрывает большую его часть. Задавала отступ сверху - или все равно перекрывает или уезжает вниз совсем. У меня очень длинное меню, поэтому "под меню" мне наверное не светит)) а вот просто как дополнительный блок анимированный, посаженный где-нибудь подбором - может быть. Я так поняла, он не привязывается именно к меню никак и гонять его можно по своему экрану туда-сюда.
Разрешение у меня 1920х1080, и все арвно перекрывает( сейчас отступ сверху 500рх.
И не с белым фоном - если взять прозрачный пнг на статичную часть и прозрачный гиф на анимированную ... или анимация на прозрачном не бывает?

2018-01-02 в 22:49 

Изумрудный Демон
Угрюм - и - Пиздат
Bacca., задайте position: absolute !important; и отступ сверху размером с меню.
анимация на прозрачном не бывает? бывает конечно. Любая бывает) Тогда статичный вариант сохраняйте в png.

2018-01-02 в 23:02 

Bacca.
Рано или поздно, так или иначе
Ага, я ж так и написала, прозрачный пнг.
Спасибо, попробую. А размер меню только перебором вычислить можно? Я бы его уменьшила, убрала некоторые ненужные ссылки. Смотрела ваши уроки по этому поводу, но там не те ссылки, что мне хотелось убрать. Но я вот подумала - каждой ссылке соответствует английский термин, его можно посмотреть в строке браузера, а для убирания вы давади один и тот же код, где менялось только название убираемого пункта, так? и если мне напр. надо убрать ссылку на свой профиль из меню, то в этот код надо подставить значение профиля ( а именно в строке он называется member. Или вот "мои ссылки - links.
Правильно я думаю или там другой принцип?

2018-01-02 в 23:10 

Изумрудный Демон
Угрюм - и - Пиздат
Основные элементы дизайна и их название вы можете посмотреть здесь info.diary.ru/index.php?title=CSS_%D0%B4%D0%BB%...
{display: none !important;} убирает элемент насовсем.

2018-01-03 в 00:12 

Bacca.
Рано или поздно, так или иначе
Спасибище. А код я давно припрятала, как раз думала спросить.

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