Фони в css3. Прозорість фону та інші фішки

21

Від автора: вітаю вас на сторінках нашого блогу! Продовжуючи тему css3, сьогодні я хотів би з вами поговорити про те, які нові можливості з’явилися в цій специфікації для визначення фонових зображень. А їх насправді досить багато, тому ми розглянемо ці можливості сьогодні. Отже, давайте дивитися як робити на css3 фон.

Що дає CSS3 для фонів

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

div{
width: 300px;
height: 300px;
background: pink;
}

Тепер додаємо наші фони:

background: url(box.png) no-repeat 50% 0%, url(box2.png) no-repeat 50% 50%, url(box3.png) no-repeat 50% 100%;
background-color: pink;

Фони в css3. Прозорість фону та інші фішки

Як бачите, я просто ставив коми після повного перерахування параметрів одного фону, після чого можна переходити до іншого. Загальний колір контейнера краще поставити окремо властивість background-color.

При використанні цього прийому не забувайте прибирати повторення у кожної картинки. Ви можете використовувати такі параметри, як url-адресу, повторення і позицію, що ми і зробили в даному випадку. Додатково можна встановити ще один параметр окремо, але ми його розглянемо трохи пізніше.

Важлива особливість – перекриття фонів

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

Фони в css3. Прозорість фону та інші фішки

На цій картинці коробка, яка лівіше всіх інших, перекриває праву, тому що стоїть в коді першої. Ось така особливість.

Завдання розміру фонам

Я говорив вам, що можна використовувати ще один параметр. Він визначає розмір фону. До речі, раніше цього властивості не було, воно з’явилося разом з CSS3. У властивості для визначення розміру одного фону використовується два параметри: розмір по ширині і по висоті. Ставити його можна в пікселях, відносних одиницях em або відсотках. Подивіться на цей синтаксис:

background-size: 60% 40%, 30px 30px, 20px 20px;

Отже, картинці, яка при перерахуванні фонів стоїть першою, будуть задані розміри 60% по ширині і 40% по висоті. Справжні розміри будуть залежати від розміру блоку. Друга і третя картинка одержують абсолютні, фіксовані розміри – по 30 і 20 пікселів з кожної сторони відповідно. І ось що вийшло:

background: url(box.png) no-repeat 50% 50%, url(box2.png) no-repeat 0% 0%, url(box3.png) no-repeat 100% 100%;
background-color: pink;
background-size: 60% 40%, 30px 30px, 20px 20px;

Фони в css3. Прозорість фону та інші фішки

Я трохи поміняв позицію картинок, щоб було видно кожну з них. Тепер перша за кодом стоїть по центру, друга – у верхньому лівому кутку, а третя – у нижньому. Як бачите, все спрацювало. Картинка по центру стала величезною (навіть її якість погіршилася), а інші дві навпаки зменшилися. Таким чином, ви можете змінювати розміри по своєму бажанню, отримавши саме те, що вам потрібно.

Новий спосіб вказівки фону – лінійний і радіальний градієнт

Так, ці нові штуки дозволили зробити верстку набагато більш цікавим процесом. Саме з появою CSS3 багато в чому відпала необхідність у використанні графіки для різних ефектів.

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

Фони в css3. Прозорість фону та інші фішки

Раніше на css таке можна було зробити, доводилося вирізати цю картинку і вставляти її. Як ви розумієте, це не найкращий підхід, тому що на завантаження зображення потрібно час. Тепер же з’явилася можливість писати градієнт кодом. Ось такий градієнт можна зробити на чистому CSS:

Фони в css3. Прозорість фону та інші фішки

А в коді це реалізується наступним чином:

background: linear-gradient(to right, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);

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

Напрямок можна вказувати і в градусах (deg), це дає набагато більше можливостей. Після цього записується колір в будь-якому колірному режимі. Самим останнім йде так званий колорстоп. Це необов’язковий параметр, він дозволяє визначити, в якому місці буде найбільш насичена частина кольору. Щоб зробити різкий перехід кольорів, потрібно встановити однаковий колорстоп обом кольорам.

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

Що ще можна робити в CSS3: плавна зміна фону, прозорість і напівпрозорість

Останні дві можливості, які ми з вами розглянемо. Повну прозорість можна встановити так:

background: transparent;

Напівпрозорість реалізується за рахунок завдання кольору rgba, де останній параметр якраз визначає її. Якщо записати так:

rgba(0, 0, 0, 0.1);

Якби не напівпрозорість, це був би чорний колір, але в дійсності він буде набагато світліше, і через нього будуть видні інші елементи, якщо вони там є (дивіться статтю про напівпрозорості фону). Щоб плавно змінити колір при наведенні використовуйте псевдоклас hover і властивість transition, в якому потрібно задати час, за який має бути здійснено плавний перехід.

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

Більш повно робота з фоном розбирається в преміум курсі (посилання дав вище). Я ж на цьому буду прощатися з вами. Підписуйтесь на блозі, щоб отримувати новини і бути в курсі нових подій у сайтобудуванні.