Strokes in Boxely
Something new in '06 for Boxely is the ability to do per-side stroke colors and per-corner stroke corner radius. Below are some samples. Notice the "stroke" style can now take more than 1 color. The order of the sides are top, right, bottom, left. This follows the order in which you set the margin and padding for a box's four corners. The "strokeCornerRadius" style is the same. The value "none" can be used to omit a given side stroke.
Per-side stroke colors and Per-corner stroke corner radius:
Selective Sides:
Per-side stroke colors and Per-corner stroke corner radius:
<box s:width="100" s:height="100" s:margin="14"
s:stroke="blue green red yellow" s:strokeWidth="2"/>
<box s:width="100" s:height="100" s:margin="14"
s:stroke="red" s:strokeCornerRadius="0 10 25 60"/>
Selective Sides:
<hbox>
<vbox s:hAlign="center" s:vAlign="center">
<box s:width="40" s:height="40" s:margin="14"
s:fill="#d0d0d0"
s:fillCornerRadius="0 10 10 0"
s:stroke="blue blue blue none"
s:strokeWidth="2" s:strokeCornerRadius="10"/>
</vbox>
<vbox s:hAlign="center" s:vAlign="center">
<box s:width="40" s:height="40" s:margin="14"
s:fill="#d0d0d0"
s:fillCornerRadius="10 10 0 0"
s:stroke="blue blue none blue"
s:strokeWidth="2" s:strokeCornerRadius="10"/>
</vbox>
<vbox s:hAlign="center" s:vAlign="center">
<box s:width="40" s:height="40" s:margin="14"
s:fill="#d0d0d0"
s:fillCornerRadius="10 0 0 10"
s:stroke="blue none blue blue"
s:strokeWidth="2" s:strokeCornerRadius="10"/>
</vbox>
<vbox s:hAlign="center" s:vAlign="center">
<box s:width="40" s:height="40" s:margin="14"
s:fill="#d0d0d0"
s:fillCornerRadius="0 0 10 10"
s:stroke="none blue blue blue"
s:strokeWidth="2" s:strokeCornerRadius="10"/>
</vbox>
<vbox s:hAlign="center" s:vAlign="center">
<box s:width="40" s:height="40" s:margin="14"
s:fill="#d0d0d0"
s:stroke="none blue" s:strokeWidth="2"/>
</vbox>
<vbox s:hAlign="center" s:vAlign="center">
<box s:width="40" s:height="40" s:margin="14"
s:fill="#d0d0d0"
s:stroke="blue none" s:strokeWidth="2"/>
</vbox>
<vbox s:hAlign="center" s:vAlign="center">
<box s:width="40" s:height="40" s:margin="14"
s:fill="#d0d0d0"
s:stroke="none none blue none" s:strokeWidth="2"/>
</vbox>
</hbox>
posted by Michael | 4:02 PM
2 Comments:
Michael are you trying to bring back the DeadHead experience with boxley? Toss a few gradients in there and switch up the stroke and you'd be good to go.
I'm going to assume that fillCornerRadius follows the same direction as the margin and padding TRBL? Also just because a side stroke is set at none does it not render a "grip". So that you could only manuver the box on the displayed sides?
I think we could really do some fun stuff with this.
Yes, the fillCornerRadius follows the same direction as the margin and padding TRBL.
If a stroke side on the windowBox is set to none you will still get the "grip".
Post a Comment
Links to this post:
Create a Link
<< Home