Влад Мержевич

Градієнтом називають плавний перехідвід одного кольору до іншого, причому самих кольорів та переходів між ними може бути декілька. За допомогою градієнтів створюються найхимерніші ефекти веб-дизайну, наприклад, псевдотривимірність, відблиски, фон та ін. Також з градієнтом елементи виглядають більш симпатично, ніж однотонні.

Окремої властивості додавання градієнта немає, оскільки він вважається фоновим зображенням, тому додається через властивість background-image або універсальна властивість background , як показано у прикладі 1.

Приклад 1. Градієнт

Тут обцінена ідіома зазвичай починає прозовий образ, але мовна гра не призводить до активно-діалогічного розуміння.

Результат даного прикладупоказано на рис. 1.

Мал. 1. Лінійний градієнтдля абзацу

В самому простому випадкуз двома кольорами, продемонстрованим у прикладі 1, спочатку пишеться позиція, від якої буде починатися градієнт, потім початковий і кінцевий колір.

Для запису позиції спочатку пишеться to, а потім додаються ключові слова top, bottom і left, right, а також їх поєднання. Порядок слів не є важливим, можна написати to left top або to top left . У табл. 1 наведено різні позиції і тип градієнта для кольорів #000 і #fff, інакше від чорного до білого.

Табл. 1. Типи градієнта

Позиція		Опис	Вид
to top	0deg	Знизу вгору.
to left	270deg	Справа наліво.
to bottom	180deg	Зверху вниз.
to right	90deg	Зліва направо.
to top left		Від правого нижнього кута до лівого верхнього.
to top right		Від лівого нижнього кута до правого верхнього.
to bottom left		Від правого верхнього кута до лівого нижнього.
to bottom right		Від лівого верхнього кута до правого нижнього.

Замість ключового слова допускається задавати кут нахилу градієнтної лінії, який показує напрямок градієнта. Спочатку пишеться позитивне чи негативне значення кута, потім до нього разом додається deg.

Нулю градусів (або 360 º) відповідає градієнт знизу вгору, далі відлік ведеться за годинниковою стрілкою. Відлік кута нахилу градієнтної лінії показано нижче.

Для значення top left і подібних йому кут нахилу градієнтної лінії обчислюється, виходячи з розмірів елемента так, щоб з'єднувати дві діагонально протилежні кутові точки.

Для створення складних градієнтів двох кольорів вже буде недостатньо, синтаксис дозволяє додавати їх необмежену кількість, перераховуючи кольори через кому. При цьому можна використовувати прозорий колір (ключове слово transparent ), а також напівпрозорий за допомогою формату RGBA, як показано у прикладі 2.

Приклад 2. Напівпрозорі кольори

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат цього прикладу показано на рис. 2.

Мал. 2. Градієнт із напівпрозорими квітами

Щоб точно позиціювати кольори в градієнті, після значення кольору вказується його положення у відсотках, пікселах або інших одиницях. Наприклад, запис red 0%, orange 50%, yellow 100%означає, що градієнт починається з червоного кольору, потім на 50% переходить в помаранчевий, а потім до кінця жовтий. Для простоти крайні одиниці на кшталт 0% і 100% можна писати, вони маються на увазі за умовчанням. У прикладі 3 показано створення градієнтної кнопки, в якій положення другого кольору із трьох задане як 36%.

Приклад 3. Градієнтна кнопка

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Натисни мене ніжно

Результат цього прикладу показано на рис. 3.

Мал. 3. Градієнтна кнопка

За рахунок завдання положення кольору можна отримати різкі переходи між кольорами, що у результаті дає набір однотонних смужок. Так, для двох кольорів треба вказати чотири кольори, перші два кольори однакові і починаються від 0% до 50%, кольори, що залишилися, також однакові між собою і тривають від 50% до 100%. У прикладі 4 смужки додаються як тло веб-сторінки. Через те, що крайні значення підставляються автоматично їх можна не вказувати, так що достатньо написати лише два кольори.

Приклад 4. Однотонні смужки

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Типова європейська буржуазність та доброчесність витончено ілюструє офіційну мову.

Результат цього прикладу показано на рис. 4. Зверніть увагу, що один із кольорів градієнта заданий прозорим, тому він змінюється опосередковано через колір тла веб-сторінки.

Мал. 4. Фон із горизонтальних смужок

Градієнти досить популярні серед веб-дизайнерів, але їхнє додавання ускладнюється різними властивостями під кожен браузер і вказівкою безлічі кольорів. Щоб вам було простіше створювати градієнти та вставляти їх у код, рекомендую сайт www.colorzilla.com/gradient-editor за допомогою якого легко налаштувати градієнти та одразу отримати потрібний код. Є готові шаблони(Presets), перегляд результату (Preview), налаштування кольорів (Adjustments), кінцевий код (CSS), який підтримує IE через фільтри. Для тих, хто працював у Фотошопі чи іншому графічному редакторі, Створення градієнтів здасться плювою справою, іншим не важко швидко розібратися. Загалом, всіляко рекомендую.

a! Градієнт є чудовим інструментом маніпуляції з кольором у CSS3. Замість використання зображення для створення ефекту градієнта на веб-сторінці, куди вигідніше буде скористатися CSS3 градієнтомі цим «полегшити» сайт. Оскільки користувачеві не потрібно буде витрачати час і трафік на завантаження фонового зображення. Існує два основні види градієнта: радіальний та лінійний. Сьогоднішній піст буде саме про них.

Лінійний градієнт

Як мовиться в класифікації, градієнти в CSS3є зображення. Їх немає спеціальних властивостей. А для оголошення використовується якість фонового зображення.

Загалом синтаксис градієнта (лінійного) виглядає так:

1 2 3 4 5 6 7

div ( background-image : -webkit-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; background-image : -moz-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; }

Отже, давайте все по порядку.

Насамперед, лінійний градієнт оголошено функцією linear-gradient() . Функція має три основні значення. Перше значення визначає вихідне положення. На прикладі зазначено top тобто. вихідне становище зверху. Можна також використовувати bottom, left та right;

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

Друге значення функції це початковий колір та його стоп позиція, яка вказана у відсотках. Оголошення цієї позиції не обов'язково, браузер за замовчуванням надасть першому кольору значення 0%.

Останнім значенням є другий колір та його стоп позиція. За замовчуванням набуває значення 100%. Ці крайні значення і вони мають на увазі, що перший колір відразу починає переходити до другого. Однак, якщо ми встановимо для першого кольору 50%, він тільки з середини доступної висоти почне переходити в другий. Ось так виглядає код:

Отримуємо однакові по висоті смужки. З чітким кордоном, переходу кольору не буде. Щоб краще зрозуміти як це працює, поекспериментуйте зі значеннями.

Радіальний градієнт також, як і лінійний, оголошується функцією, тільки вже radial-gradient() . Також є основні значення: це форма радіального градієнта (circle — коло або ellipse — еліпс), початковий і кінцевий колір. Синтаксис наступний:

div ( background : radial-gradient ( circle , # F9E497 , # FFAE00 ) ; }

Якщо не вказувати форму, то за замовчуванням буде встановлено еліпс.

Також за замовчуванням встановлено центральну позицію градієнта, її можна змінити. Позицію можна задати командами (top, bottom, left, right і center), а також їх комбінаціями, або вказати у відсотках або пікселях.

Комбінації команд:

• По центру вгорі – top – 50% 0%;
• У лівому верхньому кутку- Left top - 0% 0%;
• У правому верхньому кутку – right top – 100% 0%;
• По центру – center – 50% 50%;
• Ліворуч по центру – left center – 0% 50%;
• Праворуч по центру – right center – 100% 50%;
• По центру знизу – bottom – 50% 100%;
• У лівому нижньому кутку – left bottom – 0% 100%;
• У правому нижньому кутку – right bottom – 100% 100%.

Ось приклад із відсотками:

div ( background-image : radial-gradient (70% 20%, circle, #F9E497, #FFAE00); }

Перше значення по осі Хдруге по У.

Також радіальному градієнту можна задавати розмір. Розмір вказується через пробіл після форми градієнта. За замовчуванням застосовується farthest-corner(Далекому кутку). Розрахунок ведеться від центральної точкиградієнта до:

Щоб це краще зрозуміти розглянемо на прикладі. Градієнт еліптичної форми з білим початковим та кінцевим синім кольором:

div ( background-image : radial-gradient (230px 50px, ellipse closest-side, white, blue); }

Розмір розраховується з відстані до ближніх сторін, очевидно, що верхня ближче до осі Yі ліва по осі X.

А тепер до далеких сторін:

div ( background-image : radial-gradient (230px 50px, ellipse farthest-side, white, blue); }

Результат, як мовиться на особу. Розмір обчислюється із відстані до далеких сторін.

У радіальному як і лінійному градієнті для кольору можуть бути застосовані стоп позиції. Хочеться також помітити, якщо необхідно досягти прозорості кольорів, то використовувати слід rgba .

div ( background-image : linear-gradient (top, rgba (255, 90, 0, 0.2), rgba (255, 174, 0, 0.2)); }

Альфа канал, який останній і дорівнює 0.2 вказує на те, що від 100% кольору використовується тільки 20%.

В обох видах CSS3 градієнтаможна використовувати не два, а кілька кольорів.

div ( background-image : Linear-gradient(top , red , orange , yellow , green , blue , indigo , violet ) ; }

Для обох видів можна використовувати повторення кольорів. Тобто, із даних значень утворюється цикл. Функції градієнта, що повторюється, repeating-linear-gradient() — для лінійного і repeating-radial-gradient() — для радіального.

div ( background-image : repeating-radial-gradient (red, blue 20px, red 40px); }

0%, #FFAE00 100%);
/* для Firefox */
background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
/* для IE 10+ */ background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ;
}

div (
/* для Opera */
}

background-image : linear-gradient(top , #FF5A00 0% , #FFAE00 100% );

/* Стандартний синтаксис */

filter : progid: DXImageTransform.Microsoft .gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);

Де 33 відразу після ґрат це відсоток насиченості кольору.

Сподіваюся, що стаття виявилася для Вас корисною, а розглянута тема є повністю розкритою. Щоб залишатися в курсі свіжих статей та уроків, підписуйтесь наНезабаром, вже зовсім скоро, сайти легше завантажуватимуться, і робити їх можна буде взагалі без картинок. Вже зараз усучасних браузерах

можна зробити градієнтний фон будь-якої складності при

допомоги CSS

, і при цьому абсолютно без картинок.

Створюємо CSS-градієнти без картинок

Припустимо, що хочемо зробити градієнтний перехід у тлі від сірого до чорного. Для цього корпорація W3 запропонувала CSS3 використовувати спеціальну директиву linear-gradient.

Отже, за версією W3 для того, щоб зробити градієнтний фон, достатньо написати в селекторі блоку: Background: linear-gradient(start, color1 position1, color2 position2,...,colorN positionN);І браузер самостійно промалює градієнтний фон у блоці. Очевидно, що квітів іконтрольних точок у градієнті може бути багато. Параметр start вказує в якому напрямку має поширюватися градієнт - це може бути або top

для вертикально-спрямованого градієнта або
Для IE-подібних браузерів можна використовувати градієнти, засновані на фільтрах, а для браузерів на webkit (Safari, Chrome) та gecko (Mozilla), як завжди, існує альтернатива: -webkit-gradient і -moz-linear-gradient, які приймають схожі параметри . Як це все має працювати дивіться у наступному код-блоці:

Background: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); background: -moz-linear-gradient(top, #ccc, #000);

Після рендерингу це виглядає так.

червоний

Зелений

Синій

червоний

Зелений

Синій

Готовий код градієнта css

Параметри градієнт css генератора оналайн

1. Лівий колір градієнта. Підбираємо у блоку в лівій частині колір будь-яких відтінків за допомогою поєднання червоного, зеленого та синього кольору.
2. Правий колір градієнта. Вибираємо відтінок кольору праворуч.
3. Рівень між градієнтами. Відстань від лівої частини блоку, де почнеться градієнт.
4. Розмиття градієнта. Змішує два кольори від рівня між кольорами.
5. Кут межі градієнта. Напрямок лінії для рівномірної зміни кольору від 0 до 365 градусів.

Всі властивості градієнт css

Градієнт css накладається на елементи в lending pageтакі як

• Градієнт кнопкидля прикраси лендінг.
• Задній css градієнт фонусекції.
• Градієнт картинки css з прозорістю.
• Css градієнт текстувеликого заголовка.

Створимо простий елемент у тегу див з класом grad. Щоб накласти градієнт на клас gradзадаємо контур з шириною та висотоюу файлі стилів css. Після цього можна додати властивість градієнта, що вийшов у генераторі градієнта CSS. Gradient задається у властивості background, Потім пишемо префікс webkit linear gradientдля коректного відображення в різних інтернетбраузерів. По друге пишемо якого виду буде градієнт, Вибираємо з трьох.

1. Лінійний градієнт css. Складається з двох або більше кольорів. Колір змінюється від одного до іншого рівномірно по лінії із завданням кута.
2. Радіальний градієнт. Колір від одного до іншого рівномірно розподіляється у формі кола, всередині елемента.
3. Повторюваний градієнтіз властивістю repeating. Підходить до лінійного та радіального.

градієнт css приклади

Розберемо на прикладах усі види градієнтів.

1). Приклад linear-gradient() лінійний градієнт

У linear gradientкут нахилу задається параметром degабо ключами

Gradient1 (
background: linear-gradient(45deg, Aquamarine, GreenYellow);
}

Gradient2 (
background: linear-gradient(to top left, Fuchsia, MidnightBlue);
}

Gradient3 (
background: linear-gradient(to top, SaddleBrown 20%, OrangeRed 50%, Goldenrod 80%);
}

Gradient4 (
background: linear-gradient(to right, LightBlue 20%, LightGreen 20%, Thistle 80%, Wheat 80%);
}

2). Приклад radial-gradient() радіальний градієнт

Gradient5 (
background: radial-gradient(LightCoral, PapayaWhip);
}

За допомогою ключа atзадаємо точку початку радіального градієнта.

Gradient6 (
background: radial-gradient(at top, Turquoise, Azure);
}

Задаємо розміри еліпсав процентах

1. Перше значення ширина.
2. Друге висотаеліпса.

Gradient7 (
background: radial-gradient(40% 50%, MediumPurple, SeaShell);
}

Використовуємо ключ farthest-cornerдля виставлення розміру градієнта далекого кута.

Gradient8 (
background: radial-gradient( circle farthest-corner at 100px 50px, Yellow, DimGray);
}

Щоб градієнт став круглим пишем ключ circle, за умовчанням він у вигляді ellipse.

Gradient9 (
background: radial-gradient( circle at 70% 10%, LightCyan, Magenta);
}

3). repeating-linear-gradient або repeating-radial-gradient градієнт, що повторюється css

Gradient10 (
background: repeating-radial-gradient( circle, MediumSpringGreen, MediumSpringGreen 15px, Pink 15px, Pink 30px);
}

Gradient11 (
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 20px, #465298 10px, #465298 20px);
}