Фоновий малюнок засобами CSS3

Фоновий малюнок засобами CSS3

Автор TechDude

Категория: Для веб-майстра

CSS3 все активніше крокує по інтернету. Маса цікавих плюшек вже була по багато разів описана, оскаржена, опкакана або возвеличена до непристойності. Як би там не було, а все ж можливість зробити ефектну фішку без використання готових картинок досить приваблива.

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

Ось, наприклад, стильний карбон:

Код його виглядає наступним чином:

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+. Хоча, можливі й накладки.

16 Август 2012

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

rss
Про блог
TechDude.Blog – персональний блог, который не имеет одной конкретной тематики. Тут вы найдете интересные и полезные статьи про: интернет, гаджети, музику, видео, спорт, искусство, web и социальные сервисы.
Надеемся, что Вам понравиться!
Подпишитесь на обновления блога и получайте свежие новости на свой E-mail. Введите свей e-mail тут:


Флаг
Розмовляй українською!
Якщо вважаеш потрібним зберегти українську мову – просто розмовляй українською. УкрЦентр