Кросбраузерні відбиття, світіння і розмиття CSS

13

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

Кросбраузерні відбиття, світіння і розмиття CSSКросбраузерні відбиття, світіння і розмиття CSS

Передумови

Вивчення даного матеріалу передбачає, що:

— Ви знаєте HTML;

— Ви знайомі з селекторами CSS і CSS2;

— Якщо хочете в точності відтворити зразок, то повинні знати, як працює тінь блоку box-shadow. Вона в цьому підручнику не є ключовою, так що вам доведеться осягати її самим. Якщо знадобиться пояснення, пропоную вам поглянути на статтю CSS3 vs. Photoshop : закруглені кути і тіні блоку.

Box-reflect vs. «Свій метод»

Box-reflect — властивість CSS, якраз призначене для цієї мети: створення відображень. Ми не станемо застосовувати box-reflect і mask-image, тому що:

— На момент написання цієї статті обидва властивості підтримуються тільки webkit (Chrome і Safari).

— Реалізація кишить помилками, якщо не сказати більше.

Коли Microsoft представив свої ефекти фільтра (згадайте епоху IE 4, вкладені таблиці для розмітки і зображення для відображень), застарілі фільтри не застосовувалися до всього цього елементу. Думаю, вони використовували якийсь вид граничного блоку з верхнього лівого та нижнього правого кута елемента, що мало сенс, оскільки, наскільки я знаю, не було способу вийти за межі цього блоку. Однак, так і не виправили.

Зараз, в століття Chrome 17, webkit зробив ту ж помилку. Малюнки маски, ключ до -webkit-box-reflect, роблять певний вид динамічного снэпшота межах граничного блоку, вставляють його знизу і змінюють непрозорість. Я постарався відновити демо-зразок з допомогою -webkit-box-reflect:

Кросбраузерні відбиття, світіння і розмиття CSS

Я його не закінчив, але проблема зрозуміла. У відображуваного елемента (будемо називати його ETBR — Element to be Reflected) є border-radius і box-shadow. Тінь блоку видно всередині, а не зовні граничного блоку.

У моєму власному методі матриця видозмінюється, вставлена тінь блоку і непрозорість замінять box-reflect і mask-image. Обмеження:

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

— Вбудована тінь блоку не впливає на текст відображуваного елемента (ETBR). Це відбувається, якщо колір тексту не такий же, як фоновий колір поверхні.

Пограти з зразком | Повноекранне зображення

Колір тексту не стає темніше там, де це робить фон. Тому, здається, не можна отримати інший колір і тінь блоку одночасно.

Вибір…

До речі кажучи, про матрицях і відображеннях…

Кросбраузерні відбиття, світіння і розмиття CSS

«Вибираєте синю таблетку – я показую, як відтворити демо-зразок крок за кроком. Обираєте червону – покажу, як зробити відображення чого завгодно і розповім, де можна купити відображають тіні за дуже привабливою ціною»

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

Додатково: підготовка

Демо-зразок починається з шаблону HTML5…

index.html

CSS3 Reflections

…і цього файлу CSS.

style.css

html {
height: 100%;
}
body {
text-align: center;
line-height: 1;
margin: 0;
padding: 0;
height: 100%;
}
p {
line-height: 1.2;
}

І, звичайно, в таблицю стилів додамо посилання:

CSS reflections!

2D, але 3D

Демо-зразок двомірний. Жодного 3D-елемента. Ми про це знаємо, але наша мета – змусити їх вважати, що ми це створили, а потім сфотографували фронтальний вид.

Кросбраузерні відбиття, світіння і розмиття CSS

Якщо ми хочемо змусити їх повірити, що це 3D, то повинні визначити, як об’єкти розміщуються і обертаються в тривимірному просторі. У демо-зразка є горизонт. Верхні 10% — це чорне «небо», інші 90% — фальшива тривимірна площину. Елемент списку і площина перпендикулярні один одному (під кутом 90°), відображення повинно бути паралельно коротким елементу.

Крок 1: додатковий Площину і елемент списку

HTML:

reflection

Відбиваний елемент (ETBR) – нащадок площині. Таким чином, він залишається в одному і тому ж положенні з видимим площині, а залишається світіння на площині.

body {
text-align: center;
line-height: 1;
margin: 0;
padding: 0;
background-color: #000;
height: 100%;
}
p {
line-height: 1.2;
}
#plane {
left: 0;
top: 10%;
width: 100%;
bottom: 0;
min-width: 1080px;
min-height: 600px;
position: absolute;
overflow: hidden;
overflow-x: visible;
}

Примітка:

— У площині є мінімальна ширина min-width і мінімальна висота min-height, тому що відображається елемент завжди видно.

— Переповнення overflow-y встановлено на hidden, тому світіння відбиваного елемента залишається на площині. (Небо повинно бути непроглядно чорним.)

— У площині немає фонового кольору, вона отримує своє забарвлення від світіння, що абсолютно безглуздо, але виглядає найкраще.

Крок 2: розмітка відображення

Визначте місце відбиваного об’єкта (ETBR), скопіювати, вставити всередину самого себе і перейменуйте в refl:

reflectionreflection

Тепер усередині css створіть селектор об’єкта. Додайте до селектору #refl, щоб наші стилі застосовувалися до обох елементів:

#ETBR, #refl {
}

По суті, CSS і HTML відбиття повинні бути такими ж, як CSS і HTML відбиваного елемента ETBR. Ми розмістимо, зеркалируем і приукрасим відображення, починаючи з кроку 5. А зараз ми приховаємо відображення.

#ETBR, #refl {
}
#refl {
display: none;
}

Internet Explorer – це завжди Internet Explorer, так що нам доведеться додати трохи умовного HTML:

CSS3 Reflections