Диагональные полоски как фоновое изображение

С помощью одной лишь 4-пиксельной картинки и одной строчки в CSS создаем полосатый фон для любого блока, причем любого цвета и направления. Выглядит это вот так:

Цветные диагональные полоски
#alertbox {
background: #FF0000 url(diagonals.gif);
}

Для того чтобы изменить цвет полосок нужно изменить значение цвета для background (первое свойство) на любое, нужно вам. Естественно не забываем прописать правильный путь к картинке diagonals.gif

Саму картинку тоже можно и нужно изменять, на пример, для того чтобы изменить направление полосок, достаточно всего лишь выполнить Edit – Transform – Flip Horizontal в Фотошопе. Можно так же изменить цвет непрозрачных частей картинки с белого на серый или черный.

Самое главное не забывать включать фантазию ;)

This entry was posted in CSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

Leave a Reply

Your email is never published nor shared. Required fields are marked *

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>