Чем больше познаю CSS, тем больше он мне нравиться. Иногда можно увидеть удивительные и поражающие вещи которые реализуются только за счет одного CSS, выглядит очень стильно и к тому же почти ничего "не весит".
Часто в сайтах присутствуют линии которые разделяют какие-либо блоки, градиентные полоски в качество фона пунктов меню, кнопок, надписей, общий фон сайта и в большинстве случаев для этого используются увесистые png-изображения. Хотя часто такие изображения можно реализовать с помощью css, на глаз не будет видно какой-либо разницы, тем более для меня эту куда легче, чем открывать графические редакторы и там что-либо рисовать. Теперь именно так и стараюсь делать - вместо фоновых изображений использую css.
Итак, по поводу градиентных полос (полос на которых цвет плавно переходит из одного в другой, или оттенок цвета, прозрачность) - в css есть такое свойство как linear-gradient, с его помощью можно реализовывать градиентные полоски. Вот тут неплохо расписано: htmlbook.ru/css3-na-primerakh/lineinyi-gradient. Но зачем нам возиться с кодом, если можно пойти куда более легким путем?
Мне попался вот такой онлайн-инструмент: colorzilla.com/gradient-editor
На этой страничке с помощью мышки можно быстро создать необходимую градиентную полоску, которая будет корректно отображаться во всех браузерах.
Опишу некоторые возможности:
Presets - набор уже готовых градиентных полосок
Name - можно указать имя и сохранить Вами созданную полоску, в следующий раз при посещении она будет присутствовать в готовом наборе.
Ниже изображена цветная полоска, сверху и снизу расположены ползунки, которые вы можете передвигать.
Верхние ползунки отвечают за прозрачность. Нижние ползунки отвечают за цвет. Ползунки можно добавлять: установите указатель мышки сверху или снизу полоски, кликните когда появиться изображение пальца с плюсом. Если ползунок нужно удалить - просто утащите его куда-то вниз или вверх или воспользуйтесь кнопкой "delete" в блоке "stops".
В блоке "stops" можно указать процент прозрачности или цвет за который отвечает активный ползунок.
Preview: в этом блоке виден результат, так же тут можно указать размер полосы и направление градиента (горизонтальное, вертикальное, диагональное, угловое).
CSS: собственно сам код, который нам нужен.
