Сьогодні я розкажу про те, як зробити background за допомогою градієнту традиційним способом і використовуючи лише CSS 3. Також, у цій статті ми розглянемо чудовий сайт www.colorzilla.com та два його сервіси. Ця стаття буде особливо корисною веб дизайнерам, які втомилися від стандартних рішень і шукають нові можливості реалізації амбітних проектів. Прочитавши цю статтю, ви навчитеся створювати градієнт через CSS 3 в три кліки, і створювати градієнт традиційним методом за допомогою малюнку.

Найчастіше, якщо в макеті використовується градієнт, він лінійний і йде строго горизонтально або вертикально для того, щоб при верстці сторінки не виникало труднощів. В основному, градієнтний background не реалізується через CSS 3, тому що це досить незручно й складно. Проте, прочитавши цю статтю Ви зрозумієте, що градієнтний background за допомогою CSS 3 можна зробити в три кліки мишкою.

Як зробити градієнтний background (фон) за допомогою 1px малюнка

Як зробити градієнтний background традиційним способом:

У нас є слой (

) якому ми присвоїли клас “gradient”

Топ коментаторів

який, наприклад, буде шапкою блоку з коментарями. Нашому класу в стилі задаємо висоту і ширину

 .gradient {height:50px; width:300px;}

Для того, щоб у ньому зробити градієнтний background в слої “gradient”, потрібно вирізати смужку. Назвемо її, наприклад, bg1.jpg. Ширину прийнято задавати 1px – так градієнт вийде найбільш згладженим. За клонування (розмноження) по осях відповідають параметри repeat-y і repeat-х. Лінивий новачок у web дизайні відразу спитає: “-Чи не легше вирізати jpg потрібного розміру наприклад 300px на 50px і задати background одним малюнком?” Легше, але так робити неправильно, тому що не потрібно забувати про оптимізацію графіки на сайті.

Залишаеться в стилі класу “gradient” дописати наступне:

.gradient {height:50px; width:300px; background:url(../images/bg1.jpg) repeat-x;}

Ось що у нас получиться:

градієнтний background за допомогою CSS3

Про муніси цього способу, думаю, більшість читачів вже здогадалися і мінус цей називаеться IE (internet explorer). Не дивлячись на галочку IE9 під віконцем з кодом, цей код працює криво в нових Експлоуерах, і не працює зовсім в старих. Пора вже заборонити використання IE якимось законом, а ще краще, щоб добрий геній програміст написав вірус, який знищить всі internet explorer у всьому світі, тому що саме цей браузер гальмує розвиток веб дизайну, використання CSS 3 таHTML 5.

Отже, завдяки цій статті Ви познайомилися з чудовим сервісом colorzilla.com / gradient-editor, корисним плагіном “піпеткою” і дізналися як зробити градієнтний background через CSS 3 та як зробити градієнтний background клонувавши однопіксельний малюнок. Пробуйте та користуйтесь з задоволенням 🙂

13,724 переглядів

2 Response Comments

  • master-html  11/01/2012 at 19:08

    Если нужна амксимальная кроссбраузерность, то, конечно, лучше делать градиент по старинке – картинками.

  • Admin  11/01/2012 at 20:18

    Согласен, я тоже за метод картинки

Leave A Comment

Вас також зацікавить


Fatal error: Uncaught Error: Object of class WP_Post could not be converted to string in /home/wcdt00/wcdt.com.ua/www/wp-content/plugins/qtranslate/qtranslate_core.php:455 Stack trace: #0 /home/wcdt00/wcdt.com.ua/www/wp-content/plugins/qtranslate/qtranslate_core.php(460): qtrans_strftime('%d', 1345029896, '15', Object(WP_Post), '') #1 /home/wcdt00/wcdt.com.ua/www/wp-includes/class-wp-hook.php(288): qtrans_dateFromPostForCurrentLanguage('15', 'd', Object(WP_Post)) #2 /home/wcdt00/wcdt.com.ua/www/wp-includes/plugin.php(206): WP_Hook->apply_filters('15', Array) #3 /home/wcdt00/wcdt.com.ua/www/wp-includes/general-template.php(2417): apply_filters('get_the_date', '15', 'd', Object(WP_Post)) #4 /home/wcdt00/wcdt.com.ua/www/wp-content/themes/alterna/inc/shortcodes.php(1454): get_the_date('d') #5 /home/wcdt00/wcdt.com.ua/www/wp-includes/shortcodes.php(325): alterna_blog_list_func(Array, '', 'blog_list') #6 [internal function]: do_shortcode_tag(Array) #7 /home/wcdt00/wcdt.com.ua/www/wp-includes/shortcodes.php(199): preg_replace_ca in /home/wcdt00/wcdt.com.ua/www/wp-content/plugins/qtranslate/qtranslate_core.php on line 455