Інлайнові стилі в background-image • Про CSS
Інлайнові стилі у background-image
Грала з кодами, виявила дивовижне: виявляється, всередині CSS-властивості background можна використовувати інші CSS-властивості, наприклад, box-shadow, outline, transform і навіть ще один background.
Очевидно, що ми не можемо просто взяти і засунути одну CSS-властивість до іншої: тіні та трансформації повинні застосовуватися до елемента. Як фон ми можемо використовувати кольори, градієнти і картинки, але не тільки: ще як фон можна використовувати SVG, причому не тільки у вигляді посилання на зовнішній файл, - також код SVG-елемента можна вставити безпосередньо в CSS, це робиться ось такий конструкцією: background-image: url("data:image/svg+xml. "); .
SVG можна вставити в CSS прямо як є, але такий код не працюватиме в IE. Однак якщо його заескейпити, код буде працювати у всіх браузерах, включаючи IE9.
І ось тепер якщо цьому svg всередині background задати якісь стилі в атрибуті style, вони будуть працювати! Можна використовувати звичайні стилі для HTML-елементів, тобто рамки (у тому числі border-image), тіні, фони (включаючи градієнти CSS) і навіть трансформації!
Наприклад, можна взяти такий код:
заескейпити його і використовувати як фон, при цьому всі інлайнові стилі збережуться:
Жовтий кружальце - це circle всередині svg, все інше - інлайнові стилі: градієнт, тінь і трансформації.
Насправді, щоб скористатися інлайновими стилями, потрібен лише елемент svg, його вміст не відіграє ролі і може бути відсутнім:
І все одно все працюватиме:
Цікаво, що такі стилі працюють у всіх сучасних браузерах, але у кожного свої уявлення про те, як це має виглядати у результаті:
Тіні, трансформації та градієнти працюють, градієнтповертається разом із фігурою. Порожні місця у кутах плитки фону заповнюються градієнтом.
transform-origin за умовчанням знаходиться у точці 0, 0 .
Тіні, трансформації та градієнти працюють, але тінь повертається разом із фігурою, а градієнт – ні.
transform-origin за умовчанням знаходиться у точці 0, 0 .
Тіні, трансформації та градієнти працюють, градієнт повертається разом із фігурою. Порожні місця у кутах плитки фону нічим не заповнюються.
transform-origin за умовчанням знаходиться у точці 0, 0 .
Трансформації та градієнти працюють, тіні – ні. Градієнт повертається разом із фігурою. Порожні місця у кутах плитки фону не заповнюються.
transform-origin за умовчанням знаходиться у точці 50%, 50%.
На відміну від решти браузерів, тут не працює transform-origin, заданий у відсотках, - при цьому ламається все тло. Також, якщо фігурі встановити border, відобразиться тільки він, а градієнти і тіні пропадуть.
З одного боку, інлайнові стилі у фоні всюди відображаються по-різному, з іншого — це настільки дивна конструкція, що незрозуміло, чому вона взагалі працює.
Стилі у фонах відкривають найширші можливості для експериментів і заразом дозволяють помріяти про різні можливості, яких зараз у фонах немає, але дуже хочеться, щоб були.
Наприклад, якщо робити патерни за допомогою градієнтів, іноді хочеться просто взяти та повернути плитку фону, наприклад, на 45 градусів, щоб вийшла луска:
(Нормально відображається тільки в Chrome та Opera)
Ще один варіант луски:
Або ось хочеться зробити складне тло з кількох градієнтів і повернути всю групу відразу (в даному випадку такою групою є напівпрозорий триколірний градієнт):
Або,наприклад, хочеться змінити розмір фону, але так, щоб якісь лінії зберегли свій розмір. box-shadow при ресайзі background-size саме так і працює:
(Chrome, Opera, Firefox, Safari)
Розрізняється тільки плитка фону, розмір тіней не змінюється. З цього можна зробити, наприклад, калейдоскопічний патерн:
(Chrome, Opera, Firefox, Safari)
Використовуючи border-image з градієнтами можна робити зовсім хитромудрі штуки:
(Chrome, Opera, Firefox, Safari)
Грати можна до безкінечності.
Я не знаю, як це знання можна прилаштувати до справи, але мене так вразила ця знахідка, що я вирішила про неї розповісти. І я досі під враженням від того, що в background-image можна використовувати трансформації та border-image, хоча практичної користі в цьому, мабуть, ніякої.
Якщо у вас є ідеї, куди це можна застосувати, поділіться.
Всі мої експерименти з інлайновими стилями можна побачити в цій колекції (краще дивитися в Хромі та Опері).