CSS3 эффект глубины

Если смотреть мой бложик в каком-нибудь современном браузер (говоря современный Я исключаю из списка IE), то можно заметить прикольный эффект – верхняя часть как бы нависает на страницей :) сделано это следующим образом.

body:before { /** перед body **/
	  content: ""; /** содержимого нет **/
	  position: fixed; /** положение зафиксировано **/
	  top: -10px; /** уползаем чуток вверх **/
	  left: 0; /** прижаты к левому краю **/
	  width: 100%; /** 100% ширина **/
	  height: 10px; /** высота 10пкс **/
	  z-index: 100; /** чтобы быть выше всех **/
	  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); /** rgba - использование прозрачности **/
	  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}

Таким образом получается объект, который висит перед BODY, и его делит пополам верхняя часть браузера, поэтому верхней рамки мы не видим. Чтобы увидеть объект – можно добавить что-нибудь в content.

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *