Closed pietschy closed 13 years ago
Andrew,
Thank you for sending through the anti-aliasing tutorial. I've looked at it before, still trying to wrap my head around it.
You can create sliding doors sprites using magick-crop
and magick-compose
. Here is how that might work (comments in code):
@import 'compass';
// Pre-defined variables to control button styles
$button_width: 320px;
$button_height: 24px;
$button_padding: 20px;
// Create the basic button shape and store it in a variable for re-use
$button_image: magick-canvas($button_width, $button_height,
magick-fill(maroon)
magick-fill(magick-linear-gradient(
red 0%,
maroon 100%
))
magick-corners(5)
magick-border(maroon, 5, 1)
);
// Create the sliding doors sprite for the button
// Need a canvas twice as wide as the original
$button_sprite: magick-sprite('button', magick-canvas($button_width * 2, $button_height,
// Top-left: compose the button shape without the last 20px
magick-compose(
magick-canvas($button_image, magick-crop(0, 0, -20, 100%)),
0%, 0
)
// Top-right: compose the rest of the button shape (last 20px)
magick-compose(
magick-canvas($button_image, magick-crop(-20, 0, 100%, 100%)),
100%, 0
)
// Gap of $button_width in between the two layers
));
// The anchor itself, plain-old sliding doors technique
a {
background: transparent $button_sprite no-repeat 100% 0;
display: inline-block;
padding-right: $button_padding;
color: #fff;
}
a span {
background: transparent $button_sprite no-repeat 0 0;
display: inline-block;
line-height: $button_height;
padding-left: $button_padding;
}
I hope this helps. If any part of the code is unclear, let me know and I'd be happy to go through it further.
Excellent, thanks for that.
Cheers Andrew
Hi there,
I was just checking out your tutorials and was I'm just wondering if it would be possible to create sliding door style sprites?
BTW I also had a brief look around for polygon algorithms and found http://mlab.uiah.fi/~kkallio/antialiasing/, not sure if it's useful or not.
Thanks & cheers Andrew