Делаем css градиент с помощью онлайн генератора

Дата: / Автор поста:


Привет всем читателям сайта WPsovet.ru. Я хочу у вас сразу же спросить, какие три самые важные вещи в блоге, да и вообще в любом сайте? Начните строить список по важности. Я расставил эти правила вот так:

  1. Информативность и полезность.
  2. Быстродействие.
  3. Дизайн.

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

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

Сайт называется colorzilla. Работает в режиме визуального редактора, вам остается лишь скачать CSS код и присоединить его к любому элементу задав ему класс. Не пугайтесь все очень просто. Давайте я выложу скриншот, на нем все поясню, и расскажу как приделать css градиент.

  1. Здесь уже готовые образцы, можете использовать их как начальные и редактировать.
  2. На этой площадке, настраиваем количество градиентов и цветов, которые будут у вас, минимум два, максимум до бесконечности.
  3. Нажимая на каждый бегунок из второго пункта, здесь можно настроить его цвет (color) и процент занимаемого места (location), по умолчанию место делится между всеми поровну.
  4. Это сам внешний вид того как будет выглядеть градиент. Здесь самый полезный пункт Orientation, то есть можете настроить направленность, горизонталь, вертикаль, диагональ и так дале. На пункт size не обращайте внимания, он просто регулирует область просмотра. Чек бокс IE говорит что вы можете включить адаптацию с internet explorer, но при включении получатся такая ерунда, не советую.
  5. Сам код, который будем прикручивать. Хочу вам показать еще один плюс сервиса, видите три столбика, каждый включает адаптацию к разным браузерам, это вообще очень классная вещь, вопрос мультибраузерности решен.
  6. Color format- это формат цвета в котором идет кодировка, для нас блоггеров нужна кодировка hex, хотя и остальные подойдут, но я бы не экспериментировал. Галочка Comments добавляет и отключает подсказки в коде, это просто вам как указатель, где чего находиться.

Ну что процесс понравился? Мне очень, теперь вопрос как это все поставить на блог, все очень просто. К примеру мы хотим сделать градиент фоном заголовка h2, надеюсь вы знаете что это такое. Теперь давайте зададим стиль нашему h2, например «grad» идем в файл style.css и в самый низ вставляем его и задаем параметры, которые скопировали с colorzilla. В моем случае все будет выглядеть так

.grad{
background: #298c1c; /* Old browsers */
background: -moz-linear-gradient(left,  #298c1c 0%, #a01e1e 21%, #23dd42 43%, #23dd42 47%, #23dd42 47%, #1a0d54 66%, #82a358 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #298c1c 0%,#a01e1e 21%,#23dd42 43%,#23dd42 47%,#23dd42 47%,#1a0d54 66%,#82a358 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #298c1c 0%,#a01e1e 21%,#23dd42 43%,#23dd42 47%,#23dd42 47%,#1a0d54 66%,#82a358 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#298c1c', endColorstr='#82a358',GradientType=1 ); /* IE6-9 */
}

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


<h2 class="grad">тут ваш текст</h2>

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

Тут ваш текст

Это просто пример, можно сделать в миллионы раз лучше, кстати все градиенты, что видите на моем блоге сделаны именно в колорзилле.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

    Комментариев пока нет, будьте первым.

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

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

    *

    ;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

    Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.