JavaScript, html5: как динамически создать эффект виньетки? - PullRequest
Новая
       30

JavaScript, html5: как динамически создать эффект виньетки?

1 голос
/ 12 июня 2011

Итак, что мне нужно, это просто: пользователь что-то нажимает, пользователь видит эффект виньетки на новом элементе div поверх всей страницы (с размером страницы) chrome set up page

Возможно ли это с помощью html5 canvas? И как это сделать?

1 Ответ

6 голосов
/ 12 июня 2011

Ну, это точно , как это делает страница настроек Chrome: http://jsfiddle.net/JRGHM/

.overlay {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-transition: 0.25s opacity;
  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                      rgba(127, 127, 127, 0.5) 35%,
                                      rgba(0, 0, 0, 0.7));
  bottom: 0;
  display: -webkit-box;
  left: 0;
  padding: 20px;
  padding-bottom: 130px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

Как видите, важной частью является градиент.

Вы можете заставить этот код работать во всех браузерах, которые поддерживают градиенты CSS3, добавив соответствующий синтаксис градиента: http://caniuse.com/#feat=css-gradients

...