Easy auto-width HTML button with 1 background image

Posted on by
2
Here’s a super simple technique to create a button of variable width in HTML/CSS.
I started here and then stripped it down to only 2 HTML elements, your A and an EM.
This technique uses one background image for the button.
First, create a button image that is about 2x as long as any button would ever be on your site.
Like so:
The rest is in the CSS comments…


<a href="#" class="button"><em>CLICK ME!!!</em></a>

.button{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
height:31px;
overflow:visible;
text-align:center;
display:inline-block;
white-space:nowrap;

/* Here's the magic sauce
padding left is the space between the left edge of your button and your text
background is set to left top
*/

padding-left:22px;
background:url(../images/largeBtn.png) no-repeat 0 0;
}

.button em{
height:31px;
display:block;
margin:0;
color:#fff;
font-style:normal;
line-height:33px;

/* Here's the magic sauce
margin right is the radius of your rounded corner if you have one (so pngs don't show through behind)
padding right is the space between the right edge of your button and your text
background is set to right top
*/

margin-right:-3px;
padding-right:22px;
background:url(../images/largeBtn.png) no-repeat 100% 0;

}

AS3 liquid layout class

Posted on by
13

I’m sure everyone has needed one of these at one time or another. I just decided to finally get one together for myself.

To use, you first call StageAlignTool.init() and pass in the stage, and optionally a minimum width and a minimum height (defaults to 1024×768).
Next, you call StageAlignTool.registerLocation() and pass in the displayObject you wish to register, which position you wish it to lock to (StageAlignTool .TL means Top Left, StageAlignTool.MC means Middle Center), and optionally if you want it to stay relative to where it is now (true) or snap to the edge of the stage (false).
The class automatically sets your stage scale mode to NO_SCALE and the stage align to TOP_LEFT. It also expects the display objects you pass it to have their registration points in the top left corner.

Download

Usage:


//StageAlignTool.init(Stage reference[, min width = 1024, min height = 768]);
StageAlignTool.init(stage, 1024, 768);

//StageAlignTool.registerLocation(a DisplayObject, position to lock to[, stay relative to current = false]);
//possible locations are [StageAlignTool.]TL, TC, TR, ML, MC, MR, BL, BC, BR

StageAlignTool.registerLocation(bg, StageAlignTool.MC);

Give it a try and tell me what you think.

AS3 bitmap mosaic class

Posted on by
35

This class will allow you to create a pixellated copy of any display object.

It allows for varying pixel sizes and caching of rendered pixels so you don’t have to redraw them every time.

mosaic

Usage is as follows:

var myMoz:Mosaic = new Mosaic(yourDisplayObj:DisplayObject, pixelSize:uint, useCache:Boolean);
addChild(myMoz);

or

var myMoz:Mosaic = new Mosaic(yourDisplayObj);
myMoz.pixelSize = 10;
myMoz.render();

Give it a try and let me know what you think.