CSS3 градиент. Делаем это легко. 22.05.2013

Здравствуйте! Сегодня у нас поистине интересная тема. Потому как от ее изучения зависит наше умение верстать красочные, симпатичные сайты. Тема нашего поста - CSS3 градиент. По сути то, можно и без него обойтись... Но, если сравнить две картинки, на которой есть градиент и не которой нет, то безусловно выгодней выглядеть будет та, на которой градиент есть.

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

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

Для начала мы с вами разберем по полочкам теоретические моменты как это делается. Просто потому что без понимания как делается CSS3 градиент нам будет сложно ориентироваться в чужом коде, если возникнет такая необходимость. А далее рассмотрим сложные задачи и легкие пути их решения.

CSS3 градиент. Как это делается?

Собственно ничего сложного в этом нет. Для объекта, который мы делаем надо задать два фоновых цвета.

Выглядит это вот так:

background: linear-gradient (top, #000, #fff);

эту строчку мы вставим для того объекта, для которого хотим задать градиент. Где top — это у нас позиция по которой будет идти градиент, top означает что он будет сверху вниз, от черного к белому.

Ну вот, ничего сложного. А на самом деле? Эту комбинацию надо сделать кроссбраузерной. Т.е. чтоб она одинаково отражалась во всех браузерах. А вот это сделать уже сложнее и что если перед нами встанет задача сделать, например, вот это:

Согласитесь, не очень стандартный пример ))) Когда-то мне было необходимо сделать именно так.  Я потратил часов 5 чтоб сделать что то подобное, но получилось только приближенно... И вот после этого, я нашел решения данной проблемы.

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

Я рекомендую использовать вот эти два:

  1. Ultimate CSS Gradient Generator;
  2. CSS3 Gradient Generator

Действительно классное решение и экономия массы времени и не надо запоминать килограммы комбинаций. Я даже вам их не стал рассказывать, потому как потребность в их изучении просто отпадает.

Надеюсь эта коротенькая статья оказалась для вас полезной! Подписывайтесь на обновления блога и не пропускайте новых статей. Буду рад благодарностям в комментариях ))) И с удовольствием отвечу на любые вопросы по теме.

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

Добавить комментарий

ВКонтакте