Updating an Ecoute skin to include controls. The original intent was to render everything via CSS3, but this feature ended up leading me to include small PNGs for the buttons themselves. If anyone has a suggestion as to how that might perhaps be accomplished purely with CSS3, I'm all ears (Ecoute also renders things using webkit, so supporting anything else isn't a concern).
The progress bar, control backing and cover overlay are all CSS3.
Edit: Added a slightly updated view with altered text spacing and the controls dismissed (done via cover click).
4 Responses
Pro
Cory Dransfeldt
Updating an Ecoute skin to include controls. The original intent was to render everything via CSS3, but this feature ended up leading me to include small PNGs for the buttons themselves. If anyone has a suggestion as to how that might perhaps be accomplished purely with CSS3, I'm all ears (Ecoute also renders things using webkit, so supporting anything else isn't a concern).
The progress bar, control backing and cover overlay are all CSS3.
Edit: Added a slightly updated view with altered text spacing and the controls dismissed (done via cover click).
6 months ago
Really love this. Any chance it's coming to Bowtie?
6 months ago
Pro
Cory Dransfeldt
Gavin, thanks! It should be, there's just a quirk or two with the progress bar I need to get sorted out.
6 months ago
Rebound
Tiny Theme In CSS
by Dan Eden
When I saw Cory's Ecoute theme, I knew I had to have a go at it in HTML and CSS. Tried to keep the markup as clean as possible.
Check it out.
Credit to Cory, of course, for the excellent design :)
6 months ago