OS X Yosemite меню размытие фона в CSS

Question

OS X Yosemite меню размытие фона в CSS

Я ищу способ получить эффект размытого фона OS X 10.10, работающий в css. Размытие с помощью filter:blur или фильтра Гаусса SVG также размывает границу, поэтому это не будет работать.

Вот пример эффекта:

706 4

css filter effect blur

4 ответов:

Comments

Ничего не найдено.

Giacomo Paita · Accepted Answer · 2014-08-02 02:45:08

Вы можете использовать Css3 и JS, как описано в этой статье . Ниже вы можете найти фрагмент кода Css, для полного рабочего примера, пожалуйста, обратитесь к оригинальному сообщению и скрипке ниже:
/* TRANSFORMATIONS */
 .glass.down {
 /* Fallback for browsers that don't support 3D Transforms */
 transform: translateY(100%) translateY(-7rem);
 transform: translateY(100%) translateY(-7rem) translateZ(0);
}

.glass.down::before {
 transform: translateY(-100%) translateY(7rem);
 transform: translateY(-100%) translateY(7rem) translateZ(0);
}

.glass.up, .glass.up::before {
 transform: translateY(0);
 transform: translateY(0) translateZ(0);
}
Смотрите эту демонстрацию: http://jsfiddle.net/cQQ9u/

Yi Feng Xie · Accepted Answer · 2014-10-21 19:30:27

Это CSS, имитирующий OSX Yosemite

Таблица стилей

body {
  background-image: url('your image');
  background-size: cover;
  font-size: 14px;
}

.block {
  color: #000;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  background: inherit;
  position: relative;
}

.block:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    -webkit-filter: blur(10px) saturate(2);
}

.title {
    font-size: 1.4em;
    font-weight: 300;
    color: #222;
    padding: 8px;
    background: rgba(235,235,235,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: center;
}

.content {
    padding: 8px;
    background: rgba(255,255,255,0.66);
}

И ваш html, как следующий

<div class="block">
  <div class="title">Hello World</div>
  <div class="content">This is your main content!</div>
</div>

Пример

Введите описание изображения здесь

Nonoche · Accepted Answer · 2015-12-27 17:10:18

Вы можете достичь этого эффекта с помощью свойства background-filter css webkit

Https://webkit.org/demos/backdrop-filter/

Marconi · Accepted Answer · 2014-10-27 16:51:02

Это просто обходные пути... он работает только с фоном изображения и не будет работать с текстом (например, если мы хотим создать модальные окна).... вы можете объединить css и js, чтобы получить некоторый подобный эффект, но пока мы не можем получить правильное поведение с чистым CSS. Это моя идея, и я надеюсь, что некоторые CSS-гуру могут мне противоречить, но я думаю, что это предел технологии CSS3..... может быть, в будущем мы сможем это сделать.