елементи аудіо
Насамперед давайте поглянемо на DOM. який у нас є на даний момент. Скрипт в другій статті цього циклу додав повзунок і інші функції, реалізуючи підхід поступового поліпшення, і в результаті вийшов наступний код:
оформлення аудіо
CSS, який застосований до плеєра, використовує кілька технік від середнього до просунутого рівня. Початковий CSS скидає модель box-sizing, встановлює загальне оформлення для аудіоплеєра і повністю приховує елемент
Далі оформимо елементи з різною інформацією всередині плеєра, встановивши їм кордону з усіх боків, щоб між ними був роздільник. За допомогою CSS (на жаль, нестандартного - прим. Перекл.) Елемент input з типом range зроблений вертикальним для Webkit і Chrome:
Для кнопок використовується іконочние шрифт з семантичними лигатурами, щоб перетворити їх текст в зображення.
Також я зробив оформлення для елемента
У наступній статті я буду використовувати Web Audio API, щоб додати і анімувати відображення шкали для правого і лівого каналів плеєра.
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...