Skip to content

Instantly share code, notes, and snippets.

@mrmcpowned
Created May 29, 2017 19:50
Show Gist options
  • Save mrmcpowned/0a0d8965e104bec4ce76ef9005b0ed7c to your computer and use it in GitHub Desktop.
Save mrmcpowned/0a0d8965e104bec4ce76ef9005b0ed7c to your computer and use it in GitHub Desktop.
/*
So when dealing with CSS sprites, this is how we would normally
go about styling the HTML
*/
.custom .button{
position: absolute;
width:62px;
height:62px;
background: url(ps3-assets/face-buttons.png);
}
.custom .button.pressed{
background-position-y: -64px;
margin-top: 5px;
}
.custom .a{
background-position: 62px 0;
top: 142px;
left: 71px;
}
.custom .b{
background-position: 125px 0;
top: 71px;
right: 0px;
}
.custom .x{
background-position: 0 0;
top: 71px;
}
.custom .y{
background-position: -63px 0;
left: 71px;
}
/*
If we don't want to use sprites, we can instead give each
button it's own background image, and do away with the background
positioning.
*/
/*
This helps set the width and height of each button to a single
width and height, but you can override these at the individual
buttons if you need to
*/
.custom .button{
position: absolute;
width:62px;
height:62px;
}
/*
Note that because I was using sprites to handle how a pressed
button looks, you could achieve the same effect by applying a
color inversion filter.
The margin is only there to gie the button the effect it was
pressed down.
*/
.custom .button.pressed{
filter: invert(1);
margin-top: 5px;
}
/*
The top and left positoning properties are relative to the
location of the abxy element. The abxy element is used as a
container to hold these buttons, so it contains a height,
width, and position on the gamepad itself.
With the top, left, bottom, and right properties, we can then
further position the button within the container, with these
numbers being distances relative to the edges of the container.
*/
.custom .a{
background: url(ps3-assets/image-for-this-button.png);
top: 142px;
left: 71px;
}
.custom .b{
background: url(ps3-assets/image-for-this-button.png);
top: 71px;
right: 0px;
}
.custom .x{
background: url(ps3-assets/image-for-this-button.png);
top: 71px;
}
.custom .y{
background: url(ps3-assets/image-for-this-button.png);
left: 71px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment