Vlastné CSS pre značku <audio>? - css, audio, html5, html5-audio

Vytváram webovú aplikáciu hudobného prehrávača, ktorá implementuje zvukovú značku HTML5, ale chcela by som, aby vyzerala konzistentne vo všetkých prehľadávačoch - je možné definovať môj vlastný CSS? A ako?

na zdravie

Fela

odpovede:

V súčasnosti neexistuje spôsob, ako upravovať HTML5 <audio> hráči používajúci CSS. Namiesto toho môžete opustiť internet control a implementujte svoje vlastné ovládacie prvky pomocou Javascriptu. Ak ich všetky nechcete implementovať sami, odporúčame vám použiť existujúci použiteľný zvukový prehrávač HTML5, napríklad jPlayer.

Zistil som dosť náhodou (pracoval soms obrázkami v tom čase), že tieň v rámčeku, polomer orámovania a prechody fungujú s prehrávačom zvukových značiek štandardu bažiny celkom dobre. Pracujem v prehliadačoch Chrome, FF a Opera.

audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

s: -

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow:  2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}

Udeľujem vám to iba „trochu naťahujeme“, ale robí z nich pohľad viac vzrušujúcim ako to, čo už je, a bez toho, aby sa v JS fanúšikom MAJOR venovalo veľa pozornosti.

NIE je k dispozícii v IE, žiaľ (zatiaľ nepodporuje prechodový bit), zdá sa však, že sa degraduje pekne.

Pre zvukovú značku existujú možnosti CSS.

Páči sa mi to: Šírka zvukovej značky html 5

Ale ak si s tým pohráte, uvidíte výsledky môžu byť neočakávané - od augusta 2012.

Okrem tieňovej skrinky, transformácie a orámovaniamožnosti uvedené v iných odpovediach, prehliadače WebKit v súčasnosti tiež dodržiavajú -webkit-text-fill-color, aby nastavili farbu čísiel „čas uplynul“, ale keďže neexistuje spôsob, ako nastaviť pozadie (ktoré sa môže líšiť v závislosti od platformy, napr. v niektorých operačných systémoch s vysokým kontrastom), odporúčame vám nastaviť -webkit-text-fill-color na hodnotu „počiatočný“, ak ste ju použili niekde inde a zvukový prvok to dedí, inak by niektorí používatelia mohli nájsť tieto čísla sú nečitateľné.