Новости Joomla

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

xchesh

  • Захожу иногда
  • 277
  • 10 / 1
Как сделать размытый фон всплывающего блока?
Т.е. у нас нету статической картинки, есть какой-то контент сайта, при этом есть скролл, но всплывающего блока фон должен быть прозрачным-расплывчатым.
Простой пример - прозрачность окон в windows 7.
Прозрачность меню Ubuntu 11+.
*

Entombed

  • Захожу иногда
  • 114
  • 11 / 0
  • Ума палата ... да ключ потерял
http://htmlbook.ru/blog/poluprozrachnyy-fon ... может такое решение подойдет?
Ничто не вечно под луной
*

xchesh

  • Захожу иногда
  • 277
  • 10 / 1
http://htmlbook.ru/blog/poluprozrachnyy-fon ... может такое решение подойдет?
Конечно огромное вам спасибо, что показали, как же делать фон полупрозрачным! И никак rgba с этим не справляется...
Мне нужен не просто прозрачный, а размытый фон. Именно фон сайта, а не картинки.
*

Entombed

  • Захожу иногда
  • 114
  • 11 / 0
  • Ума палата ... да ключ потерял
Я что то не понял сразу ... нужен фильтер blur http://habrahabr.ru/post/144852/ описаны варианты
Ничто не вечно под луной
*

xchesh

  • Захожу иногда
  • 277
  • 10 / 1
Я что то не понял сразу ... нужен фильтер blur http://habrahabr.ru/post/144852/ описаны варианты
blur фильтр поддерживается только в webkit браузерах.
Уже нашел кое-какое решение, но оно применимо только к конкретному элементу, а не к заданной области.
использовать filter: blur(2px); для понятливых браузеров, а для непонятных использовать svg:
Код: css
.filter
    {
        filter: url(/css/filter.svg#blur); /* FF, IE10 & Opera */
        -webkit-filter: blur(3px);
    }
filter.svg
Код
<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2 1" />
    </filter>
  </defs>
</svg>

Это решение помогает размыть какой угодно блок.
Но задача стоит в другом. Размыть только часть блока, над которым всплывает окно.
И это еще не главная проблема.
Если применять к какому-то определенному элементу этот прием, то видно применение фильтра. Т.е. нету анимации размытия.
*

xchesh

  • Захожу иногда
  • 277
  • 10 / 1
Есть решение для изображений.
С хабра
Но опять же, нас интересуют блоки сайта, а не конкретное изображение.

У меня есть некоторые мысли, по поводу реализации возможности размытия любого места сайта, но для этого нужно сделать скриншот страницы.
Есть мысли, как сделать скриншот документа на js?
« Последнее редактирование: 09.08.2013, 12:38:45 от xchesh »
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Гуглите html2canvas. И да прибудет с вами Сила…
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Некорректное отображение сайта на смартфоне

Автор Bazilio_69

Ответов: 0
Просмотров: 1329
Последний ответ 04.09.2024, 20:36:06
от Bazilio_69
Изменить заголовок в шапке сайта

Автор kunsaid

Ответов: 0
Просмотров: 2773
Последний ответ 03.12.2022, 18:34:32
от kunsaid
Адаптивное меню для сайта на CSS

Автор YuliaOks

Ответов: 1
Просмотров: 1369
Последний ответ 02.06.2019, 19:31:23
от Taatshi
Дублирование блока при переключение на английский модулем GTranslate

Автор kostey

Ответов: 1
Просмотров: 1395
Последний ответ 07.12.2018, 14:18:17
от kostey
Появление свободного пространства внизу сайта

Автор Андрей Нестеров

Ответов: 13
Просмотров: 1794
Последний ответ 23.11.2018, 09:16:36
от Support