Скрыть страницу своего дневника ...

[UDFj]

... от любопытствующих глаз, не давая им пищу для пересудов.

Сама идея такого эффекта предложена сударем  Ловчий->.
Поскольку в моём дневнике, как на рождественской ёлке, уж-через-чур много всего навешано, дальше будут примеры либо без ссылок и со скринами, либо даже без скринов. Придётся примерять на себя.
Теперь расскажу как сделать так, чтобы, убрав мышку со страниц своего дневника, подошедшие глазки смотрели только на вас, а не на экран вашего монитора. Эффект работает, если мышка выведена за область просмотрового окна браузера, т.е. она либо где-то на полосе прокрутки окна, либо на панели закладок, либо на виндоусовской панели задач. А код такой:

.block_design {margin: 0; padding: 0; background: url('/userdir/2/5/0/5/2505934/75286979.jpg') no-repeat fixed 0 0 transparent; background-position: top; background-color: #000; border-style:none; font: normal 85% Times, New Roman; color: #735e5e; }
.block_design:hover {background: url('/userdir/2/5/0/5/2505934/77498298.jpg') no-repeat fixed 0 0 transparent !important; background-position: top !important; background-size: auto 100% !important; background-color: #000 !important; border-style:none !important; }

То есть, идея реализуется псевдоселектором :hover. Разбираем код:

— .block_design - все необходимые настройки для основного контейнера + атрибут background: url('_адрес из БИ_') , в котором прописывается NB! :

картинка того, что будут видеть те самые глазки,
когда мышка выведена за пределы окна

Например, как предположил всё тот же инициатор  Ловчий->, скрин какой-нибудь газеты от себя добавлю - "The Times", например, в оригинале ) ну, или что душе будет угодно.
— .block_design:hover - код для обычного нормального отображения дизайна. В атрибуте background: url('_адрес из БИ_') прописываем картинку. Затем во всех оставшихся атрибутах NB! смотрите внимательно в код обязательно прописываем !important, иначе ни эффекта ни любимой фоновой картинки в вашем дневнике не будет.

Думаю, для тега body то же будет работать.

запись создана: 25.04.2013 в 20:14

@настроение: Оставить что-то, надеюсь, полезное.

@темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

Comments

[Кареглазый Демон]

Ммм... а тут уютно)
Описанный вами эффект довольно интересен, хотя сфера его применения остается для меня весьма туманной)

[UDFj]

Ммм... а тут уютно)

Спасибо ) Да решила примерами добавить пост о фоновых изображениях на разных страница. А вот с избранным как-то не сложилось. Не понравилась картинка. И так её мостила и красила и эдак. А всё не то. Вернула оригинальную.

сфера его применения остается для меня весьма туманной)

Вы уже заметили, наверное, что у меня исчезает враппер, если мышку вывести за его пределы. Но, при это остаётся фоновая картинка САМОГО дневника. А этот эффект рассчитан на то, чтобы полностью "занавесить" страницу, убрав мышку за пределы просмотровой части окна. Даже не нажимая на кнопку вверху "свернуть". Эффект больше для тех, кто привык пользоваться мышкой и сочетанием клавиш "Пуск"+М не использует. Да и просто порой не хочется сворачивать все окна. А в ленте случается такооое пикантное, оляля )) Отъехал мышью и всёёё, и ничего, кроме возникшей газеты ))

[Кареглазый Демон]

А вот с избранным как-то не сложилось.

Зато цитатник завораживает.
Вот как) Предусмотрительно...