Привіт, сьогодні ми поговоримо з вами про те як створити градієнт в CSS, і це не просто так, градієнт дуже поширений ефект на сайтах і застосовується повсюдно. Тому, якщо ми з вами вивчимо всі можливості завдання градієнтів, то неодмінно прискоримо роботу свого сайту. Також прийоми розглянуті в статті ми будемо використовувати при створенні шаблону wordpress при верстці макету і тому якщо ви не хочете пропустити вихід статті то обов'язково підпишіться на оновлення блогу.
Можливість задати градієнт засобами CSS з'явилася недавно. До цього така можливість реалізовувалася в такий спосіб: спочатку потрібно було вирізати картинку з градієнтом шириною в один піксель потім цю картинку задають фоном для потрібного блоку і тиражують її в потрібному напрямку.
Ось як це виглядало в CSS:
gradient background: url (picture.png) repeat-x # ссс;
>
Недоліки у цього методу очевидні - градієнт можна задати тільки для блоку з фіксованою шириною або висотою, довантажуючи картинку, хоч і маленьку ми знижуємо швидкість завантаження сайту, таким способом ми можемо поставити або вертикальний або горизонтальний градієнт, всі інші види такий спосіб не зможе реалізувати.
Також більш докладно про фон і його завдання ви можете дізнатися зі статті завдання фону в css де розказано як задати фон для об'єкта і як тиражувати цю картинку.
Як задати градієнт.
Ну а тепер давайте розглянемо безпосередньо властивості за допомогою яких ми можемо задавати градієнт на сайтах. Зараз в нашому розпорядженні є лінійний і радіальний градієнти. По черзі ми розглянемо ці види градієнтів, і всі їхні можливості, а також подивимося роботу на прикладах.
Для його реалізації у нас є властивість linear-gradient (); в якому ви можете задати параметри:
bg-position - цей параметр задає координати початку градієнта, можна задавати у всіх размерностях, які прийняті в веб, але найкраще застосовувати пікселі, так надійніше. Параметр не обов'язковий, за замовчуванням будуть задані параметри top 0px left 0px.
Angle - завдяки цьому параметру ви можете задати градус поширення, так як у нас лінійний градієнт то початкове значення буде 0deg.
color-stop - цей обов'язковий параметр, в ньому потрібно вказати як мінімум два кольори - верхнього і нижнього пікселя.
Де 30deg кут поширення градієнта.
Yellow і blue кольору першого і останнього пікселя в градієнті.
Ми все зробили, зберігаємо відкриваємо в браузері і ... нічого не бачимо! Все це тому що стандарти ще не вступили в силу браузери офіційно не підтримують цю команду. Так як бути в даній ситуації? Є вихід з ситуації, що склалася, потрібно явно вказати кожному браузеру що потрібно розпізнати цю команду.
background: -webkit-linear-gradient (30deg, yellow, blue);
background: -moz-linear-gradient (30deg, yellow, blue);
background: -o-linear-gradient (30deg, yellow, blue);
background: -ms-linear-gradient (30deg, yellow, blue);
Перший рядок задає градієнт в браузерах Гугл Хром і Сафарі.
Друга - код для Мазілу.
Третя для опери а четвертий для Інтернет Експлорер.
Ось бачите, така здавалося б хороша функція а перетворилася в такий довгий код. Також на випадок якщо у людини браузер не підтримує жодну з функцій потрібно задати фон для блоку, ось як виглядає фінальна версія команд для завдання градієнта в CSS.
background: # 999;
background: -webkit-linear-gradient (30deg, yellow, blue);
background: -moz-linear-gradient (30deg, yellow, blue);
background: -o-linear-gradient (30deg, yellow, blue);
background: -ms-linear-gradient (30deg, yellow, blue);
Тепер давайте подивимося результат роботи наших команд.
У всіх браузерах відображається однаково, на цьому наша робота можна сказати закінчена.
радіальний
Тепер давайте з вами поговоримо про ще одну можливість, яка у нас зараз є - радіальний градієнт. Він відрізняється від лінійного тим, що поширюється від центру і на всі боки.
Синтаксис цієї команди дуже схожий на лінійний, з тією лише відмінністю що додалася форма градієнта і розмір.
Ось загальний вид функції:
background: radial-gradient (
позиція або кут, форма або розмір, від-стоп, стоп-колір, до-стоп
);
У даній команді форму можна задати двома параметрами circle - коло і ellipse - овал. Це не обов'язковий параметр, за замовчуванням буде обраний ellipse.
closest-side - Найближча сторона. Градієнт буде поширюється від центру до ближньої стороні елемента (для circle), або до обох, і до горизонтальної та вертикальної стороні (для ellipse).
closest-corner - Найближчий кут. В цьому випадку градієнт буде поширюватися від центру до найближчого кутку елемента.
farthest-side - Найдальша сторона. Градієнт буде йти від центру в напрямку до найбільш віддаленій частині елемента (для circle), або до обох, горизонтальної та вертикальної, сторонам (для ellipse).
farthest-corner - Самий дальній кут. Розмір градієнта в такому випадку буде поширюватися від центру в дальній кут елементів.
contain - теж що і closest-side.
cover - теж що і farthest-corner.
Тепер подивимося роботу цієї властивості на прикладі.
background: radial-gradient (circle closest-side, # 000, # FFF, # 000);
Тут як і в попередньому випадку безпосередньо браузери не підтримують команду і тому потрібно написати наступний код:
background: -moz-radial-gradient (circle closest-side, # 000, # FFF, # 000);
background: -ms-radial-gradient (circle closest-side, # 000, # FFF, # 000);
background: -o-radial-gradient (circle closest-side, # 000, # FFF, # 000);
background: -webkit-radial-gradient (circle closest-side, # 000, # FFF, # 000);
результат:
Як бачите, зі статті з вступом нових стандартів в силу в руках верстальника виявиться багато корисних елементів, і це не тільки лінійний і радіальний градієнти в CSS, але і багато іншого. Тому, з нетерпінням чекаємо виходу нових стандартів і підписуйтесь на мій блог, всі нововведення я буду показувати на сторінках свого блогу.