Установка фону та градієнтна

div { background-color: #b2b2b2; }

Прозорий фон

При використанні значення RGBa або HSLa як прозорого кольору фону гарною ідеєю буде забезпечити також запасний колір, тому що не всі браузери розуміють RGBa або HSLa. І коли браузер зустрічає значення, яке він не розпізнає, ігнорує його.

На щастя, є простий спосіб забезпечити запасний варіант для фону. CSS каскадує з верхньої частини файлу до його низу, таким чином ми можемо використовувати дві властивості background-color в єдиному наборі правил. Перша властивість background-color включатиме «безпечний» колір фону у вигляді шістнадцяткового значення, а друга властивість background-color використовуватиме RGBa або HSLa. При цьому якщо браузер розуміє значення RGBa або HSLa, то відобразить його, а якщо ні, то повернеться до шістнадцяткового значення перед ним.

div { background-color: # b2b2b2; background-color: rgba(0, 0, 0, .3); }

div { background-image: url("alert.png"); }

div { background-image: url("alert.png"); background-repeat: no-repeat; }

div { background-image: url("alert.png"); background-position: 20px 10px; background-repeat: no-repeat; }

div { background: #b2b2b2 url("alert.png") 20px 10px no-repeat; }

<code data-language="html"><div class="notice-success"> Ура! Вітаємо, ви це зробили!
</div>

.notice-success { background: #67b11c url( "tick.png") 20px 50% no-repeat; border: 2px solid #467813; border-radius: 5px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 15px 20px 15px 50px; }

Демонстрація фонової картинки

body { background : #293f50; color: #888; font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }

<code data-language="html"><header class="primary-header container group"> ...
</header>

.primary-header a, .primary-footer a { color: #fff; } 
.primary-header a:hover, .primary-footer a:hover { color: #648880; }

.hero { color: #fff ; line-height: 44px; padding: 22px 80px 66px 80px; text-align: center; }

 .btn { border-radius: 5px; color: #fff; cursor: pointer; display: inline-block; font-weight: 400; letter-spacing: .5px; margin: 0; text-transform: uppercase; }

.btn-alt { border: 1px solid #fff; padding: 10px 30px; } 
.btn-alt:hover { background: #fff; color: #648880; }

/*========================================Смуги========================================*/.row { background: #fff; min-width: 960px; padding: 66px 0 44px 0; }

<code data-language="html"><section class="row"> <div class="grid"> <!--Спікери--> <section class="teaser col-1-3"> ...
</section><!--Розклад--><section class="teaser col-1-3"> ...
</section><!--Місце проведення--><section class="teaser col-1-3"> ...
</section>
</div>
</section>

Вендорні префікси для градієнта

В уроці 4 , «Відкриваємо блокову модель», ми обговорювали додавання вендорних префіксів до нових властивостей або значень CSS, тому браузери можуть підтримувати недавно розроблені можливості CSS. Градієнти були одними із значень, які вимагали використання префіксів. На щастя, для більшості браузерів відпала потреба у префіксах для відображення градієнтів, проте все одно варто вказати префікси для забезпечення кращої підтримки.

Спершу ми почнемо обговорювати лінійні градієнти та включимо різні префікси. Після цього в інтересах стислості ми опустимо префікси, коли продовжимо обговорювати градієнти, в тому числі радіальні. створені за допомогою графічних редакторів та застосовували до елементів картинки як лінійні градієнти. Процес працював, але забирав час для реалізації і був надзвичайно негнучким. На щастя, ці часи пішли і лінійні градієнти тепер можуть бути задані в CSS. Якщо колір потребує зміни, не потрібно повторно розрізати зображення та завантажувати його на сервер. Тепер все, що потрібно зробити, це швидко змінити значення CSS. Краса.

div { background: #466368; background:-webkit-linear-gradient(#648880, #293f50); background:-moz-linear-gradient(#648880, #293f50); background: linear-gradient(#648880, #293f50); }

Лінійні градієнти визначаються за допомогою функції linear-gradient() у властивості background або background-image. Функція linear-gradient() повинна включати два значення кольору, перше з яких буде початковим кольорів, а друге кінцевим кольором. Браузер потім обробить перехід між двома кольорами.

Перед визначенням будь-якого градієнтного фону ми також вставимо властивість background за замовчуванням з однотонним кольором. Такий колір повинен бути використаний як запасний, якщо браузер не підтримує градієнт.

Зміна напрямку градієнта

За замовчуванням, лінійний градієнт рухається з верхньої до нижньої частини елемента, плавно переходячи між першим і другим значенням кольору. Цей напрямок, однак, може бути змінено за допомогою ключових слів або значення кута, заданого перед будь-якими значеннями кольору.="value">to right для вказівки напряму, в якому лінійний градієнт повинен просуватися. Ключові слова можуть бути об'єднані. Якщо ми хочемо, щоб градієнт переходив від лівої верхньої до правої нижньої частини елемента, ми можемо використовувати значення ключового слова to right bottom.

div { background: #466368; background: linear-gradient(to right bottom, #648880, #293f50); }

Коли ми застосовуємо діагональний градієнт у не зовсім квадратному елементі, градієнт не переходить безпосередньо з одного кута до іншого. Натомість градієнт визначить абсолютний центр елемента, помістить опорні точки в протилежних кутах, звідки він повинен просуватися і лише потім рушить у напрямку кута, заданому у значенні. Ці кути, які переміщує градієнт, називаються «чарівні куточки», оскільки вони є абсолютними. Ерік Мейєр проробив чудову роботу з викладом цього синтаксису у своїй статті Linear Gradient Keywords.

Крім ключових слів також допускаються кути. Якщо ми хочемо, щоб наш градієнт рухався до лівої верхньої частини елемента, ми можемо використовувати значення кута 315deg, також якщо ми хочемо, щоб наш градієнт рухався до правої нижньої частини елемента, ми можемо використовувати значення 135deg. Цей же підхід може бути застосований для будь-якого значення кута, від 0 до 360 º. виникає потреба у радіальному градієнті. Радіальні градієнти працюють так само, як лінійні і повторюють більшість тих же значень. Для радіальних градієнтів замість функції linear-gradient() у властивості background або background-image ми будемо використовувати функцію radial-gradient().

div { background: #466368; background: radial-gradient(#648880, #293f50); }

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

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

>Ручна робота з градієнтами може бути часом досить складною, особливо якщо ви початківець. На щастя, з'явилося кілька генераторів градієнтів CSS3. Кожен генератор працює трохи по-своєму, і деякі надають більше можливостей, ніж інші. Якщо ви зацікавилися, я рекомендую покопатися і знайти підходящий генератор для ваших потреб. ми можемо додати кілька кольорів до градієнта і змусити браузер зробити по всіх перехід. Для цього ми додамо стоп-колір в цю функцію градієнта з комами, які відокремлюють один колір від іншого. div { background: #648880; background: linear-gradient(to right, #f6f1d3, #648880, #293f50); }

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

div { background: #648880; background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50); }

Якщо не вказано інше, то перший колір буде позиціонуватися на 0% , а останній колір на 100%.

Приклад градієнта

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

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

HTML

<code data-language="html"><div class="notice-success" ;> Ура! Вітаємо, ви це зробили!
</div>

CSS

.notice-success { background: #67b11c; background: linear-gradient(#72c41f, #5c9e19); border: 2px solid #467813; border-radius: 5px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 15px 20px; }

На практиці

З наявним набором градієнтів давайте створимо нову смугу для нашого сайту Styles Conference, цього разу за допомогою градієнта.

1. Ми зробимо нову смугу з градієнтом за допомогою класу-alt. Оскільки для нової смуги встановлено ту ж властивість і значення min-width що і для класу row, ми об'єднаємо ці два селектори.

   .row, .row-alt { min-width: 960px; }

   Далі ми хочемо створити новий набір правил і застосувати стилі спеціально до класу row-alt. Ці нові стилі включатимуть градієнтний background, який починається з зеленого кольору і переходить до жовтого, зліва направо.

   Використовуючи функцію linear-gradient() з відповідними значеннями та вендорними префіксами, ми додамо градієнтний background для класу row-alt. Також увімкнемо один background перед градієнтним background як запасний варіант, на той випадок, якщо браузер не підтримує градієнти.

   Нарешті, ми також додамо і певний вертикальний padding. Наш оновлений розділ тепер виглядає так:

   .row, .row-alt{ min-width: 960px; } 
   .row { background: #fff; padding: 66px 0 44px 0; } 
   .row-alt { background: #cbe2c1; background:-webkit-linear-gradient(to right, #a1d3b0, #f6f1d3); background:-moz-linear-gradient(to right, #a1d3b0, #f6f1d3); background: linear-gradient(to right, #a1d3b0, #f6f1d3); padding: 44px 0 22px 0; }

2. Стилі row-alt на місці, давайте скористаємося ними на всіх наших внутрішніх сторінках. На даний момент вони містять елемент <section> з класом container. Потім всередині кожного <section> є елемент <h1>, який містить заголовок сторінки.

   Ми збираємося змінювати ці елементи <section> так само, як ми зробили розділ із тизером на головній сторінці. Ми обернемо кожен елемент <section> з класом container елементом <section> з класом row-alt. Потім змінимо кожен елемент <section> з класом container на елемент <div> для кращої відповідності семантики.

   Кожна з наших внутрішніх сторінок повинна тепер включати наступне:

   <code data-language="html"><section class="row-alt"> <div class="container"> <h1>...</h1>
   </div>
   </section>

3. Якщо ми оновлюємо наші внутрішні сторінки, давайте зробимо в них вступ трохи привабливішим. Почнемо з додавання вступу на кожній сторінці трохи нижче <h1> у кожному елементі <section> з класомrow-alt. Наша сторінка speakers.html, наприклад, тепер може включати наступний розділ:

   <code data-language="html"><section class="row-alt" > <div class="container"> <h1>Спікери</h1> <p>Ми раді вітати більше двадцяти спікерів, готових представити новітні технології в галузі.Готуйтесь до феєрії, що надихає.</p>
   </div>
   </section>

4. Додатково зі вставкою абза