Audio Workshop 4 MP3 Player Skins and CSS3 Graphics Tutorial

Lesson Code: http://www.developphp.com/video/JavaScript/Audio-Player-Skins-and-CSS-Graphics-Tutorial
In this part we are going to style our custom built audio player components into a custom skin. For those of you without graphics editing capabilities, we will also demonstrate CSS that resembles the skin image graphics.

---

Closed Caption:

welcome back to the audio workshop
series before we begin this exercise
I wanted to let everyone know that after
this video I have to take some time off
for making videos
because I have to rebuild a very large
failing Dec
after frame and install a couple new
doors
have to finish my basement which is a
very small basement
and a few other things that need doing
on my property outside
and the things that I've been
procrastinating on long-overdue project
will take me some time to do all those
things correctly
but I need to just stop making videos it
up going on the Internet for
all that time on doing it so I can
focusing get things done
so we're going to resume at the exact
point we leave off in this year is to
continue very deep
into the audio workshops your YouTube
videos this part we're going to style
are custom-built audio player components
into a custom skin
those %uh view without graphics editing
capabilities
will also demonstrate CSS that resembles
the skin graphics
here i am. insider fireworks you can
work in Kim
Photoshop any graphics editor let you
like and I'll show you what
my little skin consists out just a
gradient
I know what that means donor it's just
the gradient he sees a gradient
rectangle and has a little bit around
this
set on the edges and I put just little
white stripes in there
and faded them down so you see their
opacity is I take the A pasady all the
way back up
you see is just a white stripe bring
back down to
hi and then I got some speaker graphics
in this is a really big speaker and I
just wrote it down
and put it into place there make sure
they're all centered up
and I'm going to file Export Wizard
continue
continue exit and by the way my
my stage my campus has no background
you can see my campus clear transparent
background gonna go to PNG 32
make sure the mat is clear and then
export
into my audio project folder any
images folder going to the images folder
and I'll just leave a name skin
ones will be skin one that PNG now this
is all the same exact code we left off
within video number three
will do was added did nature we wrap
all that stuff in India which we close
it down near the bottom
and then you can indent but actually
we're gonna add another one
so add another did and just invent that
one
and then down at the bottom if you close
that new give
an indent that one as well now you can
indent
everything else into those two like that
that we don't lose track of where
a little code segment need to be okay
see you want it looking something like
that the first parent container
when he give ID equal to audio player
and then its child is which is the
parent container for all the audio
controls
we give I be are audio controls
and that it pretty HTML now we can open
up the style
element and put in the CSS that we're
going to require
will do it right here under the body
rule I so will target
those two did the audio player gets a
with 450 pixels the height
60 pixels that matches the dimensions at
my skin perfectly
the background is going to be to an
image in our images folder
called skin one that PNG said to no
repeat
the border radius is set to poor pixels
because in a moment I'm gonna show you
how
you can not use this graphical skin
or the PNG skin and you can just set up
some CSS that'll make
a gradient and you can add the speakers
as independent images
just like you would add any image to any
web page
okay so the padding for the audio player
boxes 0 pixels to really you name any
that they're only if you want to pat it
now this next rule is targeting the
audio controls did
that's the one that's inside the audio
player did all the audio controls
gonna be stored in that did and we give
it a margin-left:
that way all the controls aren't sitting
on top of that first picture
it said off to the left are really it
set off to the right a little bit
away from that per speaker because it
didn't but margin-left:
there then it would all you controls
would be all over that speaker
let's test this in our paper browser
okay so we have our skin
and all I'm going to do now is make all
these
elements display:block and macon
float:left
that way I have a much easier time
positioning them
exactly by the pixel and if you want you
can actually take this
the started this rule and put it right
before all those
button and input rules
that way you're only targeting buttons
that are in the audio controls
maybe you have other buttons on your
page that you don't wanna affected by
this
these pools maybe you have other inputs
on the page that you don't want effected
by this rule
see just take this put it on a putback
and then only buttons and inputs inside
the audio controls did
would be affected by these to make sense
good
now remember I said I want to make all
those audio components that we made
display:block in float:left and we give
them
exact width and height make sure that I
can position them exactly where I want
them to be
okay so in the button rule who can add
these three properties display float
in margin displays block located left in
margin is
top right bottom left 22 pixels of the
top
10 pixels margin space to the right
and in 0 pixels for the bottom and left
now preview at that gives us we should
see
our little buttons any button elements
going to the position where we went down
in the middle at the player
push down those 22 pixels of the top now
we're going to do the same exact thing
for our inputs which are sliders
let's get those into place by making
them display:block
float:left and then given the exact
margins base that we want
now believe you this we have our sliders
exactly where we want them
now we have to do is move this time box
down into place and I want that to live
right after the seat bar and right
before the
you button and since in our HTML since
that is already placed
where I wanted to be between the Sikh
slider in the mute button all I have to
do is float
it left as well and make it
display:block
so let's go into our existing rule for
the time box that we have here
let's make it display:block which is
going to be displayed block by default
so we can just remove that
put in the exact margin space we wanted
to have
and then make it real left now let's see
if that works
yeah there you go now what I did
was I put a little border-bottom: on it
I'm going to put a little border-bottom:
on it that's a little lighter than the
rest at the box I'll
was cool after the background let's put
border
bottom pick a color make it nice in
little dark but not too dark 1 pixel
solid
and that'll make it look a little bit
inset
that might even be too bright yeah you
see it a little too bright
so let's darken it up make it match
those
bottom borders on the sliders and
actually do we have a bottom border set
on moose
was that I guess that's happening
here in the range border-bottom: I care
okay now is take that and put it in the
time box the same exact
area now to match so they all look a
little bit inset
like is little light coming from the top
and speakers also look like his little
light coming from the top
okay see you got a custom Player now
nice
volume sliding
you play pause button controllable play
head
ok which in some browsers I think inner
chrome election we hear the playback as
you drag
I guess rewinding a fastball earning but
in other browsers you on your that at
all
you on your the change in the position
to you let go that little slider
but I don't find it to be a big deal I
actually like the way you can hear it
fast-forwarding and rewinding lets the
user know that they're actually doing
something
now what we're gonna do is remove this
background
for the skin some love you might not
have access
our capabilities to for graphics editing
software
right now you might want to get a skin
on your we use CSS to do that
so instead at the URL for graphics for
actual
PNG a gaping crap it's we're going to
just put linear gradient background
that a light or dark gray to black
and then we have a border radius already
set so we should get a very
similar look let's check it out and I
may get a little darker on a top does
not dark enough
to match that other one see
yeah that looks pretty good right there
all you have to do is add images
in Thai did your
what you call it this did here
we could put and image on he decided you
audio controls right there
you just put image tag and then put a
speaker
and then put an identical image tag
speaker on outside that kid
just make sure you wrap your audio
controls did with two image tags
and then you can give those images in ID
float them any way you want give them
any margin space you want
and that way you'll be able to fit your
speakers in there
along with you or your controls block no
problem and then you just put another
speaker here
CBC you don't need any graphics editor
anything like that you can use pure CSS
and you can even get those a white lines
on their
if you study up on
linear gradients but you'd have to add
another Lidiya gradient on top but this
linear gradient which could get tricky
that's why I just chose to use the
the ready-made skin that I made in
fireworks
graphics okay so that completes video
number for
like I said in the beginning at this
video I'm gonna take a little bit I'm of
but I'll be back before you know it