Ви впевнені, що все знаєте про такі прості CSS-властивості, як «box-shadow» і «background»? А, може, з їх допомогою ви можете намалювати цілу картину? У нас вийшло навіть 4 прикольних картинки на чистому CSS.
Нещодавно ми наткнулися на картинки, які, як стверджувалося, виконані на чистому CSS за допомогою всього лише одного блоку. Спочатку ми не повірили, що можливо зробити настільки гарні картинки тільки одними стилями. Нас дуже зацікавила дана тема, тому ми вирішили поглибити свої пізнання в background-ах і box-shadow-ах.
* Приклади в даній статті можуть неадекватно відображатися в старих версіях браузерів.
Наша перша проба виглядає так:
Ідея полягає в тому, щоб стилізувати один div так, щоб отримати закінчене зображення. Для цього зручно використовувати такі можливості CSS, як multiple background і box-shadow. А щоб не загубитися в стилях, ми використовували препроцесор Less і його фичу «злиття».
Злиття або merge дозволяють дописувати властивостями через кому або пробіл додаткові значення. У нашому випадку це мало сенс. Подивіться приклад:
При компіляції отримали такий рядок в CSS:
Погодьтеся, що така рядок не дуже проста для розуміння, а тут всього 2 фону.
Для простої іконки це не критично, але ось для повноцінної картинки дуже навіть. Наприклад, для малювання очі (приклад нижче) ми застосували одночасно 20 фонів.
Якщо все розміри вказувати у відсотках, то можна отримати масштабовану іконку. А ось і сам результат (порухайте повзунок для масштабування):
Перспективи малювання на чистому CSS не то щоб безмежні, але дуже широкі. Для підтвердження цих слів ми намалювали очей і піцу, кожен їх яких є всього одним блоком.