Стара школа: ефект «матового скла» за допомогою зображень
Розмітка порівняно проста. Унасвсегоодін article, що містить контент.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Вищенаведений CSS створить розмите і підсвічується накладення. Так само нам знадобиться зрушити його до низу сторінки, залишивши рівно стільки місця, щоб було видно текст заголовка. Так як розмите зображення є дочірнім елементом оверлею, то, крім того, доведеться змістити його назад вгору до протилежної величиною для того, щоб воно залишалося вирівняним по фону body. Так як в демо прикладі вживаються переходи, я вирішив скористатися перетвореннями CSS, а не властивістю background-attachment, тому що перетворення CSS можуть прискорюватися апаратними засобами.
Примітки
Якщо хочете ще краще розібратися в даній схемі, то я побудував детальну версію ефекту. Вищенаведена техніка дуже прямолінійна і підкріплена потужною браузерної підтримкою. Хоча я трохи пожвавив демо приклад переходами. у всіх інших потрібних властивостей - генерується контенту. непрозорості. перетворень і background-size - є солідна браузерна підтримка аж до IE 9 (за винятком OperaMini).
Нова школа: «матове скло» за допомогою фільтрів
Методика дублювання зображень вимагає підтримки розмитого зображення поряд з вихідним оригіналом, що може виявитися проблемним, якщо вам потрібно заново застосовувати цей ефект до безлічі зображень. Наприклад, адаптивному дизайну при різних розмірах екрану потрібно підкачка різних зображень. Або ж шаблонні розмітки можуть поставляти їх динамічно (наприклад, різні зображення заголовка для окремих посад блогу). У подібних випадках слід генерувати цей ефект, використовуючи тільки вихідне зображення. Зрештою, ми ж всього лише розмиваємо його.
Ось тут найзручніше скористатися фільтрами CSS. Вони дають можливість застосовувати розмиття вже в браузері за допомогою властивості CSS filter.
До накладення «матового скла» можна модифікувати CSS так, щоб це виявилося вихідне зображення з застосованим до нього фільтром blur.
Підводні камені
Раз плюнути, правда? На жаль, фільтри CSS занадто новомодний винахід. Це означає, що їм можуть знадобитися Вендорний префікси, а їх браузерна підтримка не виявиться загальної. Однак у фільтрів довша історія взаємин з SVG і застосування фільтрів SVG до HTML-контенту за допомогою CSS підтримується браузерами набагато краще. Їх можна легко додавати в якості альтернативного варіанту там, де фільтри CSS не підтримуються. Насправді вищенаведений демопрімер працює саме так.
Щоб додати фільтр SVG, ми включимо в розмітку HTML трохи вбудованого SVG і звернемося до фільтру за допомогою url (). Професійний натяк: альтернатива цьому варіанту - закодувати фільтр SVG і звернутися як до dataurl, але такий формат трохи складніше читається в статті.
Може виявитися, що браузером не підтримуються ні фільтри CSS, ні SVG. У такому випадку користувач побачить текст на підсвіченому (підфарбовані, але не розмитому) тлі, що теж виглядає не надто убого.
висновок
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Практика HTML5 та CSS3 з нуля до результату!