powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Эффект матового стекла на части страницы
8 сообщений из 8, страница 1 из 1
Эффект матового стекла на части страницы
    #39219066
Alexey Agafonov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Всем привет.

Есть некий сайт и в ней выпадающее меню. Я хочу сделать так, что все, что под этим меню было с эффектом матового стекла, это фильтр blur. Но фильтр применяется к слою или другому объекту, но всему, а нужно сделать так, чтобы он применялся к части страницы, которая ПОД слоем. Это вообще реально? Может, плагинами какими...

Заранее спасибо.
...
Рейтинг: 0 / 0
Эффект матового стекла на части страницы
    #39224487
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alexey Agafonov,

по-моему нужно спроектировать структуру страницы так, чтобы часть страницы которая под слоем была бы "слоем или другим объектом" &)
...
Рейтинг: 0 / 0
Эффект матового стекла на части страницы
    #39224642
Alexey Agafonov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Нельзя, это выпадающее меню над произвольной картинкой. Как вариант, может, сохранить кусок экрана в объект JS типа img и к нему применить фильтр? Только можно ли так сохранить?
...
Рейтинг: 0 / 0
Эффект матового стекла на части страницы
    #39224743
dimonz80
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Alexey Agafonov,

filter ( в тч blur) применяется ко всему поддереву элементов


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<style>
   #content_to_blur {
     -webkit-filter: blur(4px);
   }
    #non_blured {
     -webkit-filter: none;
   }
</style>

<div id='content_to_blur'>
  Здесь размыто должно быть
  <div id='non_blured'>
      А тут нет
  </div>
</div>



#non_blured будет размыт в любом случае, для того чтобы этого не было надо его выносить из #content_to_blur

Если нет возможности/желания выносить неразмываемый кусок за пределы размываемого в HTML, можно попробовать вынести с помощью JS типа так (на jQuery)

Код: javascript
1.
2.
3.
var nonBlured = $('#non_blured');
nonBlured.detаch();
$('body').append(nonBlured);


но тут возможно руками придется выставлять позиционирование + если в нашем куске есть элементы формы, то тоже придется повозится
...
Рейтинг: 0 / 0
Эффект матового стекла на части страницы
    #39224782
Alexey Agafonov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
dimonz80,

спасибо, но тут все сводится к применению фильтра ко всему div. Можно уточнить задача так - у нас есть <div> (или <img>, не важно) некими размерами и наполнением (картинка, теста) и есть другой div, меньше, который заходит частично на первый. Вот в области перекрытия сделать blur.
...
Рейтинг: 0 / 0
Эффект матового стекла на части страницы
    #39224824
dimonz80
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Alexey Agafonovdimonz80,

спасибо, но тут все сводится к применению фильтра ко всему div. Можно уточнить задача так - у нас есть <div> (или <img>, не важно) некими размерами и наполнением (картинка, теста) и есть другой div, меньше, который заходит частично на первый. Вот в области перекрытия сделать blur.

так?
...
Рейтинг: 0 / 0
Эффект матового стекла на части страницы
    #39224830
dimonz80
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Alexey Agafonov,


Кажись оно
...
Рейтинг: 0 / 0
Эффект матового стекла на части страницы
    #39224935
Alexey Agafonov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
dimonz80, спасибо, но не совсем. Второй div может наезжать частично на текст, картинки и даже части яндекс-карт (api встроен). Судя по изящности решения более простых вопросов, понимаю, что мой решить нельзя
...
Рейтинг: 0 / 0
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Эффект матового стекла на части страницы
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]