Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!
Стили CSS - Затеняем нижнюю видимую часть веб-страниц с помощью зафиксированного изображения
Опубликовано Март 14th, 2008 в CSS |
Автор: Крис Койер
Перевод: Всеволод Козлов
Очень красивый эффект затенения нижней видимой части веб-страниц, реализация которого абсолютно несложна!
Фрагмент 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 Trick: Fade Out the Bottom of Pages with a Fixed Position Image
Похожие статьи по блогингу и веб-местерингу:
Fatal error: Call to undefined function: similar_posts() in /home/u82003/w3school.ru/www/blog/wp-content/themes/w3school-blog/single.php on line 35