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

Последнее обновление 19.11.2015

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 (Вы еще не оценили)
Загрузка...

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

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

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




^