mojwp.ru
Назад

CSS градиент или плавный переход цвета на сайте

Опубликовано: 01.06.2012
8
5131

css градиентВерстая сайт, либо совершенствую и украшая свой текущий, все чаще стали обращаться к такому цветовому приему, как градиент: переход цвета из одного оттенка в другой. Ранее это делалось при помощи статичных картинок.
Теперь же при помощи CSS можно сделать аналогичное, причем "отрабатывающее" во всех браузерах. Можно самому прописывать код градиента, а можно воспользоваться сервисом colorzilla.com, который предоставит сразу готовый код для всех браузеров.

Давайте покажу пару примеров градиента, чтобы вы могли представлять себе о чем идет речь:

Градиент #1
Градиент #2

Здесь у меня представлено 2 блока, где идет плавный переход цвета. Выбрать цвет и насколько он быстро должен переходить в другой цвет вы можете сами.

Кроссбраузерный CSS градиент от colorzilla.com

Перейдя по ссылке http://www.colorzilla.com/gradient-editor/ вы попадаете на страницу, где:

  • слева увидите варианты оформления градиента, с возможностью выбора цвета:

    кроссбраузерный css градиент

  • справа будет представлен код CSS, который отобразит градиент на сайте:

    кроссбраузерный css градиент

Данный код уже помещаете в нужный class или id в файле стилей шаблона. Так же можете применять градиент и отдельно в каждой статье.

К примеру: вот так выглядит код первого блока в самом начале статьи "Градиент #1":

Градиент #1

[infob name="Подсказка"]Подобрав правильно цвета, вы существенно можете украсить свои статьи, придав каждой индивидуальность: будь то полностью фон тела статьи, либо отдельных блоков.[/infob]

Что удобно при использовании подобного кода - он 100% будет кроссбраузерным (отображаться корректно на всех браузерах, за исключением старых версий IE), а так же сильно сэкономит время, т.к. не нужно вручную все прописывать.

Я показал не все возможности, т.к. рядовому блоггеру может никогда не понадобиться другие функции. Если же вы верстальщик, либо хотите им стать, то сможете без проблем разобраться, потратив часок-другой на изучение сайта.
[infob name="Подсказка"]

Чтобы узнать цвет любого элемента на "Рабочем столе" WinDows я пользуюсь "Пипеткой" программы FastStone Capture. У нее так же много возможностей в работе, что облегчает жизнь блоггеру: снять видеоподкаст, расставить стрелки по скриншоту, сделать скриншот (несколько опций), водяной знак и подписи.
Если ничем подобным не пользуетесь, то настало время.[/infob]

Ранее я публиковал статьи, где можете использовать градиент так же: Статичный текст на главной странице для продвижения, Описание некоторых стилевых свойств CSS на примере, Информация об авторе сайта без плагина и другие. Полистайте сайт и найдете применение.

А теперь просьба высказаться в комментариях об актуальности статьи, чтобы я мог понять потребности читателей mojWp.ru

Спасибо.

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Женя
    Опубликовано: 01.06.2012 Ответить на сообщение

    Совсем недавно, буквально 2 дня назад читал про градиент. У вас больше понравилось потому что все делается автоматически на сайте.

  • Александра
    Опубликовано: 01.06.2012 Ответить на сообщение

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

  • Константин
    Опубликовано: 03.06.2012 Ответить на сообщение

    Виталий, на самом деле в IE гораздо раньше появились все эти фишки - он первопроходец. Правда, для таких эффектов использовались фильтры (filter), а они не могут похвастать изысками. Так DXImageTransform.Microsoft.gradient, насколько я знаю, поддерживает только 2а цвета. Поддержка же CSS3 в IE появилась лишь в 9й версии браузера, и вот тут могут возникнуть проблемы. Решить их позволяет багфикс, который есть в упомянутом вами онлайн генераторе градиента - галочка IE9 Support. Как-то так. Удачи!

    • Виталий
      Опубликовано: 03.06.2012 Ответить на сообщение

      об этом написано в статье, что "продвинутые" должны обследовать сайт.

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

      профи даже не воспользуются представленной информацией, т.к. сделают все своими руками и не буду смотреть на сервисы.

  • seogrot
    Опубликовано: 04.06.2012 Ответить на сообщение

    Тоже немного интересуюсь возможностями, которые предоставляет css, приходилось сталкиваться и с градиентом. За сервис ColorZilla отдельное спасибо и +1 😉

  • Женя
    Опубликовано: 06.06.2012 Ответить на сообщение

    Уже пробовал использовать на практике. Очень удобно! Сайт даже добавил в закладки:)

  • Denis
    Опубликовано: 28.06.2012 Ответить на сообщение

    Полезная статья. Я только начал учить верстку и т.п., поэтому это статья 100% мне полезна, да и интересная была. СпасибО!

  • Серегй
    Опубликовано: 18.10.2012 Ответить на сообщение

    Сервис прикольный!!! уже год пользуюсь им=)
    применял градиент у себя на сайте при создании вертикального мега меню...
    шаблон делал без графики, только силами ксс, правда в "ослике" старшего поколения все без скругления и теней и т.д.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.