Гораздо проще сделать тень для HTML элемента с помощью CSS, чем пилить изображение и добавлять его фоном в блоки.
Вот собственно об этом.
box-shadow:0 0 3px 2px #cecece; -webkit-box-shadow:0 0 3px 2px #cecece; -moz-box-shadow:0 0 3px 2px #cecece;
Префикс
- -moz- для firefox браузера
- -webkit- для chrome и safari
параметры для тени: <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
Можно задать без растяжения, тень будет поуже:
box-shadow:0 0 3px #cecece;
Внутренняя тень делается с помощью параметра inset:
box-shadow:inset 0 0 20px 0px #cecece; -webkit-box-shadow:inset 0 0 20px 0px #cecece; -moz-box-shadow:inset 0 0 20px 0px #cecece;
для одного элемента можно создать несколько теней, следующие тени добавляются через запятую.
В примере выше, тень по X не смещается - идет по одеим краям и внизу.
Для IE до IE9 можно использовать библиотеку PIE или свойство filter.