Mp3 Speler CSS-sjablonen

Volledig configureerbare MP3-speler CSS-templates

Met MP3-speler CSS-templates blijft de opname ongewijzigd, terwijl de speler de kleuren, formaten en afstanden van uw site overneemt. Nicepage biedt de meeste van deze instellingen in de eigenschappen van het Audio-element en het paneel voor spelerstijlen, met uw eigen regels voor wat daar eventueel ontbreekt.

De afspeelknop en voortgangsbalk stijlen

De stijlen van een speler zijn onderverdeeld in een paar afzonderlijke zones:

• De container, waar vulling, rand en schaduw de speler scheiden van nabijgelegen content.
• De afspeelknop, waarvan de kleur en grootte duidelijk zichtbaar moeten blijven tegen de hoes.
• De voortgangsbalk, met gevulde en ongevulde delen in verschillende tinten.
• Titel- en artiestentekst, qua grootte zo ingesteld dat een lange naam de knop niet verdringt.

Wanneer een voorinstelling een meer verfijnde vormgeving vereist, legt de Custom CSS-handleiding uit hoe u een elementklasse toewijst en CSS toevoegt op element-, pagina- of siteniveau. Een elementregel is geschikt voor één afwijkende speler, terwijl een siteregel ze allemaal uniform houdt. Omdat Nicepage aangepaste CSS niet rechtstreeks in de editor uitvoert, controleert u het resultaat in het paginavoorbeeld. De balk toont geen vulling totdat een nummer begint, waardoor een vulling die overloopt in de achtergrond onopgemerkt kan blijven.

Vier veelvoorkomende varianten vergeleken

Een compacte speler plaatst de knop, titel en balk in één smalle rij. De titel laten omlooptekst vormen werkt beter dan alle drie gelijkmatig verkleinen, aangezien de knop al moeilijk aan te tikken is ruim voordat de tekst te klein wordt. Bij een donkere speler werken de kleuren als een samenhangend geheel: een lichtgrijze vulling die er op wit prima uitzag, kan op antraciet wegvallen. Minimalistische ontwerpen laten randen en schaduwen weg, wat goed werkt zolang de knop maar blijft opvallen. Spelers met focus op artwork zetten de cover voorop; op een telefoon kan een grote afbeelding de bedieningselementen tot een smalle strook samenknijpen. CSS Grid of Flexbox kunnen de hoes naar een eigen rij verplaatsen zodra het scherm smaller wordt. Vaste pixelafmetingen werken goed voor een knop of miniatuur, maar een vaste breedte voor de hele speler veroorzaakt op kleine schermen meestal weergaveproblemen.

Beperkingen van standaard browserbedieningselementen

Standaard audiobedieningselementen van browsers verschillen per browser qua uiterlijk en volgen nauwelijks stijlregels; voor een schuifregelaar met een aangepaste vorm is dan ook een speciaal ontworpen interface nodig. Een opnieuw ontworpen afspeelknop laat afspelen en pauzeren nog steeds over aan de speler, en een herkleurde balk voegt geen zoekfunctie toe. Focus- en hoverstijlen helpen alleen waar het bedieningselement die statussen ondersteunt, en styling kan geen ontbrekende toetsenbordondersteuning toevoegen. Wanneer een aangepaste regel conflicteert met de stijlen van Nicepage, verwijder deze dan tijdelijk om te zien of deze de oorzaak is. Als het paneel en een paar regels ervoor zorgen dat de speler er in de preview goed uitziet, heeft het template zijn werk gedaan.