Фоновый рисунок средствами CSS3

CSS3 все активнее шагает по тырнетам. Масса интересных плюшек уже была по многу раз описана, оспорена, опкакана или возвеличена до неприличия. Как бы там ни было, а все же возможность нарулить эффектную фишку без использования готовых картинок довольно заманчива.

Сегодня я хочу представить вам весьма интересный ресурс CSS3 Patterns Gallery, который позволяет быстро подобрать симпатичный рисунок фона для сайта и получить соответствующий код для файла стилей.

css3pat.jpg

Вот, к примеру, стильный карбон:

css3pat2.jpg

Код его выглядит следующим образом:

background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

По идее, фишка должна работать в Firefox 3.6+, Chrome, Opera 11.10+ и IE10+. Хотя, возможны и накладки.

Enjoy!

20.05.2011

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: