12 декабря 2009, 14:00

Универсальный метод декорирования блоков (via chikuyonok.ru)

В этот методе, для декорации блока (даже инлайнового), используется всего 5 элементов (4 декорируют) и один спрайт (картинка с декорацией).

Процитируем из сайта автора:
  • Первая область: растягивается по горизонтали и вертикали, background-position: top left;
  • Вторая область: ширина фиксированная, растягивается по вертикали, background-position: top right;
  • Третья область: растягивается по горизонтали, высота фиксированная, background-position: bottom left;
  • Четвертая область: ширина и высота фиксированная, background-position: bottom right.
Сам CSS не большой, и довольно понятный, лучше всего смотреть сразу на примерах:




зы: Казалось бы всё хорошо, но не забываем о ИЕ6. Он считает паддинги по своему, поэтому для него дополнительный стиль. А для того что-бы работали прозрачности в IE6-7, используем известный IE6 PNG-fix
ззы: Блок, в котором находится вся красота, не забываем делать либо position:absolute; либо position:relative;, а то всё полезет.

Удачи!

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter