Стеклянная панель по всей странице

Question

Есть ли простой способ иметь «стеклянную панель» по всей HTML-странице, независимо от масштаба / слайд-событий / платформы / браузера {mobile / desktop}?

Под «легким» я подразумеваю что-то вроде поддержки чистого CSS, а не плагин.

Откат: советы плагинов также могут быть полезны.

Спасибо

Answer 1

Если вы просто имеете в виду слой поверх всего, попробуйте следующее:

#top-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
}

Вы можете установить opacity: 0.5;, если хотите, чтобы он был полупрозрачным.

AПример jsFiddle

Answer 2

Я бы использовал класс для этого.

div.glass-pane {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

Вы можете изменить высоту, ширину, верх и левое положение, чтобы «стеклянная панель» помещалась только в определенной области.Также вы можете добавить цвет (лучше всего использовать rgba или hsla и создать эффект стекла).Z-index поможет, если вы хотите создать модальное поле в верхней части панели.Затем просто используйте jQuery для добавления событий щелчка.

Я недавно опубликовал Расширение Chrome , которое использует этот эффект ( здесь источник ).

Answer 3

Стекло?Попробуйте этот CSS:

div#glassPane {
   height: 98%;
   width: 98%;
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 10px;
   background: rgba(0,0,0,0.25);
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   position: fixed;
   top: 1%;
   left: 1%;
}

См. Здесь пример: http://jsfiddle.net/vLTWK/

Подробнее см. Здесь:http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/#glassbox