Автор: Крис Койер
Перевод: Всеволод Козлов

Очень красивый эффект затенения нижней видимой части веб-страниц, реализация которого абсолютно несложна!

Page wrap

Фрагмент CSS-кода

* {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "Lucida Grande", Georgia, sans-serif;
font-size: 67.5%;
}
p {
font-size: 1.1em;
line-height: 1.6em;
}
#page_wrap {
width: 600px;
z-index: 1;
margin: 10px auto;
}
#bottom_fade {
width: 600px;
height: 200px;
z-index: 99;
position: fixed;
bottom: 0%;
background-image: url("bottom-fade.png");
}

Фрагмент HTML-кода

<div id="page_wrap">
<p>Здесь контент веб-страницы</p>
<div id="bottom_fade"></div>
</div>

Затенить серым css

Специально для тех, кто захочет скачать этот пример одним архивом для большей наглядности, посвящается:

[Скачать пример]

Оригинал статьи: CSS Trick: Fade Out the Bottom of Pages with a Fixed Position Image
































Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: