Odtwarzacz Mp3 Szablony CSS

W pełni konfigurowalne szablony CSS odtwarzacza MP3

Dzięki szablonom CSS odtwarzacza MP3 samo nagranie pozostaje niezmienione, podczas gdy odtwarzacz przyjmuje kolory, rozmiary i odstępy Twojej witryny. Nicepage gromadzi większość tych ustawień we właściwościach elementu audio oraz w panelu stylów odtwarzacza, pozostawiając miejsce na własne reguły w przypadku bardziej specyficznych potrzeb.

Stylizowanie przycisku odtwarzania i paska postępu

Style odtwarzacza dzielą się na kilka odrębnych stref:

• Kontener, w którym wypełnienie, obramowanie i cień oddzielają odtwarzacz od sąsiadującej zawartości.
• Przycisk odtwarzania, którego kolor i rozmiar muszą dobrze kontrastować z okładką.
• Pasek postępu, z wypełnioną i niewypełnioną częścią w różnych odcieniach.
• Tekst tytułu i wykonawcy, dopasowany rozmiarem tak, aby długa nazwa nie nachodziła na przycisk.

Gdy gotowy styl wymaga dokładniejszych modyfikacji, poradnik dotyczący Custom CSS wyjaśnia, jak przypisać klasę elementu i dodać CSS na poziomie elementu, strony lub całej witryny. Reguła elementu sprawdza się przy pojedynczym, nietypowym odtwarzaczu, a reguła witryny pozwala zachować spójność wszystkich instancji. Ponieważ Nicepage nie wykonuje niestandardowego kodu CSS bezpośrednio w edytorze, efekt należy sprawdzić w podglądzie strony. Pasek nie ma wypełnienia przed rozpoczęciem utworu, więc kolor wypełnienia zlewający się z tłem może pozostać niezauważony.

Porównanie czterech popularnych wariantów

Kompaktowy odtwarzacz mieści przycisk, tytuł i pasek w jednym wąskim rzędzie. Zawijanie tytułu do nowej linii jest lepszym rozwiązaniem niż równomierne pomniejszanie wszystkich trzech elementów, ponieważ przycisk staje się trudny do naciśnięcia na długo przed tym, jak tekst stanie się zbyt mały. W ciemnym odtwarzaczu kolory współgrają ze sobą: jasnoszare wypełnienie, które wyglądało dobrze na bieli, może zniknąć na tle grafitu. Minimalistyczne projekty rezygnują z obramowań i cieni, co zdaje egzamin pod warunkiem, że przycisk nadal wyraźnie się wyróżnia. Odtwarzacze eksponujące grafikę stawiają okładkę na pierwszym miejscu; na telefonie duży obraz może zepchnąć elementy sterujące do wąskiego paska. CSS Grid lub Flexbox mogą przenieść okładkę do osobnego wiersza, gdy szerokość ekranu maleje. Stałe wymiary w pikselach sprawdzają się w przypadku przycisku lub miniaturki, lecz stała szerokość całego odtwarzacza zazwyczaj psuje układ na małych ekranach.

Ograniczenia natywnych kontrolek przeglądarki

Natywne kontrolki audio różnią się wyglądem w zależności od przeglądarki i podlegają nielicznym regułom stylów, dlatego suwak o niestandardowym kształcie wymaga specjalnie przygotowanego interfejsu. Przemodelowany przycisk play nadal powierza odtwarzanie i pauzę samemu odtwarzaczowi, a zmiana koloru paska nie dodaje możliwości przewijania. Style focus i hover pomagają tylko wtedy, gdy kontrolka udostępnia te stany, a żadne reguły stylów nie dodadzą brakującej obsługi klawiatury. Jeśli niestandardowa reguła powoduje konflikt ze stylami Nicepage, usuń ją tymczasowo, aby ustalić źródło problemu. Gdy panel i kilka reguł nadadzą odtwarzaczowi odpowiedni wygląd w podglądzie, szablon spełnił swoje zadanie.