Градиентный фон без картинок: секретный сервис верстальщика

25 февраля, 2014

Если вы профессиональный верстальщик, то вам наверняка знаком этот замечательный сервис, который в два клика позволяет задать градиентный фон без картинок на чистом CSS любому блоку. Но если раньше вы не знали о существовании такого сервиса, настоятельно рекомендую прочитать статью целиком. Такой сервис помогает создать профессиональный дизайн для сайта с минимумом усилий.

Во многих дизайнах используются градиентные фоны, кнопки и прочие элементы. Они смотрятся эффектно и врятли дизайнеры захотят от них отказаться. А верстальщики потом ломаю голову над тем, как разрезать картинку, чтобы сверстать блок так, чтобы он при этом еще и резинился.

Верстаются такие блоки зачастую так: отрезается небольшая полосочка градиентного фона шириною в 1px и высотою 100% исходного градиента. Затем эта полосочка с помощью CSS размножается по горизонтали. Для маленьких блоков, фон можно сделать в виде картинки. Так сделаны кнопки в меню моего сайта. Но при таком решении элемент не будет динамически растягиваться, поэтому идеальным его не назовешь.

Спешу порадовать, проблемы уже в прошлом: современные браузеры поддерживают градиенты на уровне CSS. Но прописывать стилей придется много, так как нужно учесть варианты записи для большинства популярных браузеров. Вы думаете профессиональные верстальщики делают это в ручную? Зачем тратить свое время на то, что лучше сделает другой. Барабанная дробь: онлайн генератор градиента. На сайте можно выбрать готовую цветовую схему либо задать свою из картинки. А градиент можно получить горизонтальный, вертикальный, наклонный (двух видов) или круговой. Не сервис, а мечта!

Для старых браузеров, которые не поддерживают эти стили, фон будет однородным. Не велика беда, нужно вовремя обновлять ПО, тогда и красотой всей сможешь насладиться.



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

2 комментария »

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









Копирование материалов разрешено при наличии активной ссылки на источник