Как на CSS сделать размытие в стиле iOS7?

Question

[Lici]

Вот это модное размытие, как эффект матового стекла, как его сделать в CSS3?

Пример: тыц.

Answer 1

[Сергей Протько]

filter: blur(5px);

CSS Filter Effects

Comments

[Станислав Маркин]

Я бы еще добавил белый фон и opacity(.4)

[Сергей Протько]

blur будет применять размытие для всего блока. Если он полупрозрачный, то как раз таки добиваемся нужного нам эффекта:

jsfiddle.net/SvH6w/6

[Lici]

@Fesor А как сделать размытие не содержимого блока, а того, что за ним?

[Lici]

@korobochkin ну почему, всегда можно сделать ублюдочный костыль в виде относительно позиционированного элемента с более низким z-index и поднянуть его под нужный блок, а блок сделать без фона. вот и будет что надо. но это быдловерстка.

[Сергей Протько]

Для любителей извращений есть canvas, с которым можно сделать все что угодно. Можно вытащить кусок фона через штуки типа html2canvas и применить блур.

Вот тут обсуждаются различные кастыли.

[Lici]

@Fesor а у меня чего-то не выходит новый вопрос задать (каптча не показывается), спрошу тут:

Вот страница: tkstour.com/bilety например
Есть 2 блока, левый и правый .

Левый должен быть фиксированной ширины width: 240px;
Правый должен заполнять всю центральную часть сайта, которая, в свою очередь, меняется в зависимости от ширины окна браузера.

Я уже игрался с overflow: hidden, с разными float, с min-width и max-width, с display, со всем что знаю или нагуглил. Даже display table пробовал.

Почти то, что надо получается, если сделать sitebar, например, width=30%, а rt_main width=70%. И тогда они оба резиновые и остаются на месте.

Но мне нужно сайдбар - фиксированный, а основной блок - резиновый. А сейчас просто при уменьшении окна так, что этому блоку остается меньше места, чем в max-width - он спрыгивает вниз, под блок сайдбара.

Верстал не с нуля и уже об этом пожалел, вот тянутся подобные странности через весь процесс.

[Сергей Протько]

а вы пробовали искать что-нибудь по запросам "fixed width sidebar fluid content"? Тема довольно заезженная, единственное затруднение - выбрать подходящий вариант. Например вот

[Lici]

@Fesor нашел уже решение через calc, благодарю. Все остальные решения не сработали, в той или иной мере.

Answer 2

[Руслан]

+ SVG Filters, для кроссбраузерности.