Ефект поштової марки - it in russian

Хочу розповісти вам про цікавий ефект, відкритий мною недавно під час верстки.

«Ефект поштової марки» - будемо називати його так - полягає в «накладення» властивості border-style зі значенням dashed на властивість box-shadow (CSS3). Суть в тому, що якщо підібрати правильно кольору рамки і тіні, то через контраст кольору фону блоку і кольору рамки створюється враження, що краю блоку не рівні, а хвилеподібні, як у поштової марки.

Ефект поштової марки - it in russian

Єдиний нюанс полягає в підборі кольору. В даному випадку колір рамки #ddd, а колір тіні #aaa. Таким же чином можна підібрати будь-які однорідні кольору і зробити тінь від поштової марки будь-якого кольору.

Ефект поштової марки - it in russian

код CSS

Плюси: таке незвичайне і приємне оформлення робиться двома рядками css і не потрібно ніяких картинок різати, вставляти частинами і писати досить громіздкий css

Мінуси: очевидно, що відтворювати цю красу будуть тільки браузери підтримують CSS3, та й ті не без тарганів. Opera, наприклад, малює штрихи рамки з різною частотою зверху-знизу і зліва-праворуч. Адекватно поводяться, на жаль, тільки FF і Chrome.

Працездатність: IE9 + FF3,5 + Opera10,5 + Chrome1,0 +