Как вставить линейный градиент в шапку блога

Градиент радуга

Здравствуйте уважаемые друзья, подписчики и просто интересующиеся. В статье: “Дизайн сайдбаров в резиновой теме F2” я рассказывал, как создать градиент в сервисе и затем, установить его в шаблон. Согласитесь, создание градиента для дизайна сайта довольно кропотливый труд, особенно, когда с первого раза градиент не подошёл по каким-то параметрам и приходится вновь заходить на сервис или в фотошоп для создания новой градиентной картинки. А многие из нас оставляют более или менее подходящий градиент в расчёте на то, что потом, как-нибудь, сделаю градиент до тонкостей подходящий по всем параметрам цветовой гаммы. У одних не хватает времени, у других – терпения, а временно оставленный градиент так и живёт на сайте в ожидание перемен. Ведь, как говорится: “Ничто не бывает таким постоянным, как временное”. Однако те, кто всё же создавал и размещал картинки в шаблоне ранее описанным способом, познал и извлёк для себя массу знаний и навыков. Сейчас я покажу вам более быстрый, а для кого-то и более лёгкий способ создать градиент, не обращаясь за помощью к сервису или к программе-редактору.

Данный способ подходит для многих шаблонов и тема F2 не является исключением, разница лишь в некоторых особенностях шаблонов. Метод называется: Линейный градиент (linear-gradient), создаваемый с помощью CSS. Градиент – фоновое изображение, в котором один из заданных цветов пропорционально (мягко) переходит в другой.

Начнём экспериментировать. Откройте админ панель вашего сайта, и зайдите в: Внешний вид/ F2 Настройки. В открывшемся окне снимите галочку в чекбоксе: Повторять рисунок в заголовке (стрелка 3), а затем, уберите галочку в чекбоксе: Использовать фоновый рисунок в заголовке (стрелка 4).  Не перепутайте порядок 3 и 4. Не переживайте, старые настройки никуда не денутся и если вы захотите вернуть всё обратно, нужно будет лишь поставить галочки на место.

Затем, откройте: Внешний вид/ Редактор, найдите вот такие строки:

/* Header */

#header {
margin:0;
height:250px;
background-image:url(images/fonhd.png); /*Фон установленный нами*/
    border:1px solid #aaa;
background:#6d97b7; /*Фон заданный автором шаблона*/
}

Шапка на тестовом блоге с этими настройками выглядит вот так:

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

background-image: linear-gradient(#008000, #FFFF00); (зелёный и жёлтый).

причём, для каждого браузера создадим индивидуальную строку. Смотрите, как должно получиться:

#header {
margin:0;
height:250px;
background-image:url(images/fonhd.png);
border:1px solid #aaa;
background:#6d97b7;
background-image: linear-gradient(#008000, #FFFF00); /*Базовый образец*/
background-image: -webkit-linear-gradient(#008000, #FFFF00); /*Chromium*/
background-image: -moz-linear-gradient(#339900, #CCFF33); /*Mozilla Firefox*/
background-image: -ms-linear-gradient(#339900, #CCFF33); /*Microsoft IE*/
background-image: -o-linear-gradient(#339900, #CCFF33); /*Opera*/
}

Обновите файл, перейдите на главную страницу сайта и обновите её (F5). Вот что мы видим: по умолчанию цвета распределяются сверху вниз.

Если нужно перевернуть градиент по вертикали, цветовые коды в скобочках можно поменять местами. Но можно применить и другой приём. В скобках, перед цветовыми кодами дописать: bottom (нижний). Т.е. мы указываем браузеру, что отображать цвета нужно снизу-вверх. Давайте попробуем.

#header {
margin:0;
height:250px;
background-image:url(images/fonhd.png);
border:1px solid #aaa;
background:#6d97b7;
background-image: linear-gradient(bottom, #008000, #FFFF00);
background-image: -webkit-linear-gradient(bottom, #008000, #FFFF00);
background-image: -moz-linear-gradient(bottom, #339900, #CCFF33);
background-image: -ms-linear-gradient(bottom, #339900, #CCFF33);
background-image: -o-linear-gradient(bottom, #339900, #CCFF33);
}

Обновляем файл, переходим на главную страницу, обновляем страницу и видим, что градиент перевернулся.

Если нужно осветлить левый верхний угол, а правый нижний затемнить, пишем 135deg или top left.

#header {
margin:0;
height:250px;
background-image:url(images/fonhd.png);
border:1px solid #aaa;
background:#6d97b7;
background-image: linear-gradient(135deg, #008000, #FFFF00);
background-image: -webkit-linear-gradient(135deg, #008000, #FFFF00);
background-image: -moz-linear-gradient(135deg, #339900, #CCFF33);
background-image: -ms-linear-gradient(135deg, #339900, #CCFF33);
background-image: -o-linear-gradient(135deg, #339900, #CCFF33);
}

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

Если добавить третий цвет и уменьшить угол,

#header {
margin:0;
height:250px;
background-image:url(images/fonhd.png);
border:1px solid #aaa;
background:#6d97b7;
background-image: linear-gradient(105deg, #008000, #FFFF00, #008000);
background-image: -webkit-linear-gradient(105deg, #008000, #FFFF00, #008000);
background-image: -moz-linear-gradient(105deg, #008000, #FFFF00, #008000);
background-image: -ms-linear-gradient(105deg, #008000, #FFFF00, #008000);
background-image: -o-linear-gradient(105deg, #008000, #FFFF00, #008000);
}

то получится вот так:

Если поставить знак минус перед числовым значением угла, то градиент развернётся в противоположную сторону. Вообщем, играться с цветами и градусами можно до бесконечности, в нашем распоряжении 360 градусов и тысячи различных цветов и оттенков. Тематика о градиентах в CSS довольно обширная, целые книги написаны, а у нас сегодня другая задача.

Как вставить градиент CSS в сайдбар

В таблице стилей найдите вот эти строки:

#sidebar_left{
float:left;
width:200px;
margin:0 0 0 -240px;
position:relative;
}
#content{
float:left;
width:92%;
margin-right:-100%;
padding:20px 4%;
overflow:hidden;
background:#fff;
}
#sidebar_right{
float:right;
width:200px;
margin:0 -240px 0 0;
position:relative;

Возьмём левый сайдбар (sidebar_left) и добавим следующее:

    background-image: linear-gradient(left, #CCCCCC, #FaFaFa);
background-image: -webkit-linear-gradient(left, #CCCCCC, #FaFaFa);
background-image: -moz-linear-gradient(left, #CCCCCC, #FaFaFa);
background-image: -ms-linear-gradient(left, #CCCCCC, #FaFaFa);
background-image: -o-linear-gradient(left, #CCCCCC, #FaFaFa);

В скобках указываем: left (читать слева) и два цвета: светло-серый и почти белый. Получается вот такой градиент:

Чёткой границы между сайдбаром и текстовым полем зрительно не ощущается, переход от тёмной расцветки к более светлой, как бы ненавязчиво, направляет и концентрирует внимание на основном элементе сайта  – контенте. Дизайнеры рекомендуют при вёрстке (редактировании) сайта использовать 2-3 основных цвета и столько же оттенков (не более). Слишком яркий, разноцветный дизайн отвлекает и порой, раздражает, что зачастую отбивает желание вторично посещать такой сайт.  Желательно подбирать цвета мягких, не вызывающих тонов. В данном посте я лишь показываю, как можно использовать CSS для изменения дизайна и куда именно добавить коды в теме F2. Цвета беру случайные, чтобы нагляднее выглядели образцы.

Переходим в правый сайдбар, вводим такие же данные, как и в левом сайдбаре, только, в скобках, вместо: left (слева), пишем: right (справа).

background-image: linear-gradient(right, #CCCCCC, #FaFaFa);
background-image: -webkit-linear-gradient(right, #CCCCCC, #FaFaFa);
background-image: -moz-linear-gradient(right, #CCCCCC, #FaFaFa);
background-image: -ms-linear-gradient(right, #CCCCCC, #FaFaFa);
background-image: -o-linear-gradient(right, #CCCCCC, #FaFaFa);

В итоге, в таблице стилей должно получиться вот так:

#sidebar_left{
float:left;
width:200px;
margin:0 0 0 -240px;
position:relative;
height:355em;
background-image: linear-gradient(left, #CCCCCC, #FaFaFa);
background-image: -webkit-linear-gradient(left, #CCCCCC, #FaFaFa);
background-image: -moz-linear-gradient(left, #CCCCCC, #FaFaFa);
background-image: -ms-linear-gradient(left, #CCCCCC, #FaFaFa);
background-image: -o-linear-gradient(left, #CCCCCC, #FaFaFa);
}
#content{
float:left;
width:92%;
margin-right:-100%;
padding:20px 4%;
overflow:hidden;
background:#fff;
}
#sidebar_right{
float:right;
width:200px;
margin:0 -240px 0 0;
position:relative;
height:355em;
background-image: linear-gradient(right, #CCCCCC, #FaFaFa);
background-image: -webkit-linear-gradient(right, #CCCCCC, #FaFaFa);
background-image: -moz-linear-gradient(right, #CCCCCC, #FaFaFa);
background-image: -ms-linear-gradient(right, #CCCCCC, #FaFaFa);
background-image: -o-linear-gradient(right, #CCCCCC, #FaFaFa);
}

А на главной странице должно получиться примерно так:

На данном сайте, всё сделано по такому же принципу.

Как вставить радиальный градиент в подвал темы F2

В подвале так же, можно применять линейный градиент (radial-gradient), но хотелось бы ещё упомянуть о радиальном градиенте, что я и сделаю, используя (footer) подвал тестового блога. В таблице стилей найдите: Footer и добавьте следующие строки: (выделено синим)

/* Footer */
#footer {
text-align:center;
font-size:0.9em;
background:#27567a;
color:#aac;
border:1px solid #999;
        background-image: radial-gradient(#088400,#C2E100);
background-image: -webkit-radial-gradient(#088400,#C2E100);
background-image: -moz-radial-gradient(#088400,#C2E100);
background-image: -ms-radial-gradient(#088400,#C2E100);
background-image: -o-radial-gradient(#088400,#C2E100);
}

Смотрим что получилось: По умолчанию градиент отображается в виде элипса (ellipse).

Чтобы градиент отображался в виде круга, нужно воспользоваться значением circle (круг). Добавьте в каждую строчку слово circle перед первым цветовым кодом.

background-image: radial-gradient(circle,#088400,#C2E100);

В этом случае, цвета будут равномерно распределяться во все стороны от центра к краям.

Как сделать градиент полупрозрачным

Чтобы сделать градиентный фон частично прозрачным, можно использовать функцию RGBA, где: R – Red (Красный); G – Green (Зелёный); B —  Blue (Синий); А – Аlpha (Альфа) – составляющая расширенной цветовой модели RGB, с помощью которой, задаётся непрозрачность фона. В CSS, используя свойство Opacity, можно задать непрозрачность изображения, которое измеряется в процентном отношении и выражается в виде десятичного числа от 1 до 0 (нуля), где: 1 – 100%-ная непрозрачность, 0 (ноль) – полная прозрачность. Но такое свойство определяет непрозрачность полностью для всего элемента, включая шрифты и изображения находящиеся на изменяемом фоне.

Использование RGBA меняет ситуацию, полупрозрачным становится только тот элемент, которому задаётся процентное отношение прозрачности, которое так же выражается в виде десятичного числа от нуля до единицы. Проще говоря, 0.1 = 10%; 0.35 = 35% и т.д. Следует обратить внимание, что числовое значение прозрачности всегда пишется через точку. Числовые значения цветовых оттенков всегда пишутся через запятую.

Многие таблицы цветовой гаммы снабжены отображением как шестнадцатеричного цветового кода, так и числовые значения оттенков RGB. Например:

шестнадцатеричный цветовой код:  #996633 в RGB будет выглядеть как: (153,102,51)

Чтобы перевести цветовой код из формата HEX в RGB, можно воспользоваться простым конвертером, который установлен на этом сайте в левом сайдбаре внизу. Левый сайдбар отображается на главной странице сайта.

В окошке: HEX код по умолчанию вставлен код белого цвета, нужно вместо него вставить свой скопированный код и нажать на кнопку: Конвертировать в RGB. После чего, в трёх окошках вы увидите числовые значения кода RGB. Эти значения нужно поочерёдно скопировать и вставить в изменяемый код CSS. Например:

background-image: -webkit-radial-gradient(rgba(8,132,0,1), rgba(194,255,0,0.8));

Как видите, числовые значения Альфа, так же добавлены. В первом цветовом коде RGBA непрозрачность не задана  и отображена цифрой: 1 (100%), во втором, задана непрозрачность: 0.8 (80%).

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

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

#footer {
text-align:center;
font-size:0.9em;
background:#27567a;
color:#aac;
border:1px solid #999;
      background-image: -webkit-radial-gradient(center center,rgba(8,132,0,1)10px,rgba(194,255,0,0.8)80%);
background-image: -moz-radial-gradient(center center,rgba(8,132,0,1)10px,rgba(194,255,0,0.8)80%);
background-image: -ms-radial-gradient(center center,rgba(8,132,0,1)10px,rgba(194,255,0,0.8)80%);
background-image: -o-radial-gradient(center center,rgba(8,132,0,1)10px,rgba(194,255,0,0.8)80%);
}

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

Удачи и успехов Вам!

  © Михаил Ковеньков

 

Поделиться ссылкой: