Fixed background images

30.01.09 дизайн, css

Наверное сразу лучше начать с простейшего примера

Разметка

<div class="content green">...</div>
<div class="content blue">...</div>
<div class="content yellow">...</div>

CSS

.green {
        padding:10px 20px 10px 200px;
        border-bottom:1px solid #666;
        background: transparent url(./circle_green.gif) 20px 20px fixed no-repeat;
}
.blue {
        padding:10px 20px 10px 200px;
        border-bottom:1px solid #666;
        background: transparent url(./circle_blue.gif) 20px 20px fixed no-repeat;
}
.yellow {
        padding:10px 20px 10px 200px;
        border-bottom:1px solid #666;
        background: transparent url(./circle_yellow.gif) 20px 20px fixed no-repeat;
}
...

Фактически все очень просто. Фоновым изображениям в блоках задается свойство background-attachment:fixed и при прокрутке одно изображение заменяется другим.

Не обошлось конечно без фиксов для ИЕ.

Примеры использования

• www.econsultancy.com/reports
• complexspiral demo (Eric Meyer)
• We Bleed Design (Bryan Katzel)

via http://www.askthecssguy.com/2009/01/mike_asks_the_css_guy_about_a.html

Комментарии

1. Красиво. Только не понятно где это может пригодиться.

   
   — Михаил    Mar 16, 04:26 PM    #

← предыдущая следующая →

В архив