Ваш промокод mojWPAds на плагин рекламы для WordPress >>

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

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

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

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

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

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

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

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

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

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

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

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

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

<div style="height:50px;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkOTFjMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #7db9e8 0%, #d91c14 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(100%,#d91c14));
background: -webkit-linear-gradient(top,  #7db9e8 0%,#d91c14 100%);
background: -o-linear-gradient(top,  #7db9e8 0%,#d91c14 100%);
background: -ms-linear-gradient(top,  #7db9e8 0%,#d91c14 100%);
background: linear-gradient(top,  #7db9e8 0%,#d91c14 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#d91c14',GradientType=0 );color:#ffffff; font-size:24px;">Градиент #1</div>
Подсказка
Подобрав правильно цвета, вы существенно можете украсить свои статьи, придав каждой индивидуальность: будь то полностью фон тела статьи, либо отдельных блоков.

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

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

Подсказка

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

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

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

Спасибо.

Привет. Меня зовут Виталик.

Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 8 комментариев
  1. Женя says:
    http://tut-blog.ru

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

  2. Александра says:
    http://mal-domikru.net

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

  3. Константин says:
    http://wmascat.blogspot.com/

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

    • Виталий says:

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

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

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

  4. seogrot says:
    http://seogrot.com/

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

  5. Женя says:
    http://tut-blog.ru

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

  6. Denis says:
    http://webwmz.ru/

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

  7. Серегй says:
    http://plastichelper.ru

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.56MB | MySQL:136 | 0,335sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!