FlexCanvas Stack

A highly flexible graphic Stack for adding lines, edges, gradients, titles, and graphics to your page.
Overview
FlexTable Stack icon
Use this Stack of all trades if you want to add shapes, gradients, and graphics to your page. This Stack started out as a replacement for the simple <hr> rule, and grew to become a powerful Stack capable of much more: control a variety of shapes with various linear and radial gradients; add your own logo or text; enable hover effects and turn the whole thing into a dynamic link. Experiment and enjoy!

How does it work?
The HTML canvas element is used with javascript to draw shapes, etc.
  • FlexTable Stack screen shot
  • FlexTable Stack screen shot
  • FlexTable Stack screen shot
Customize
FlexTable Stack parameters
The FlexCanvas Stack has tons of controls to allow you to shape and color your canvas any way you need. More controls for logo images and text and other effects are available as well. Read on …

Parameters

 
Full widthCanvas will resize responsively to match the full width of its container div when enabled, otherwise specify a width in pixels below.
WidthSpecify the exact width of the canvas in pixels when Full width is not used.
HeightSpecify the exact height of the canvas in pixels.
AlignWhen the canvas is drawn with a fixed width you can select whether to center, left, or right justify it within the main div. When the full width (responsive) is used then justification is not used.
StyleSelect the type of rule shape and chamfer type. Use the Style size to further control the results. Experiment with this selection to get the right style: some Styles are useful abutted to other stacks; some Styles are useful when abutted to other FlexCanvases; some Styles are best standalone with plenty of space to nearby stacks.
Style sizeUse this setting to scale the Style chamfers and other aspects of the selected Style. This may be used on some Styles to change other dimensions - experiment for good results. Use the corner chamfer enables below for more control ...
Chamfer ul cornerCertain Styles can have the upper-left corner chamfer enabled and disabled with this option, to allow this stack to be abutted with other stacks or for artistic effect.
Chamfer ur cornerCertain Styles can have the upper-right corner chamfer enabled and disabled with this option, to allow this stack to be abutted with other stacks or for artistic effect.
Chamfer ll cornerCertain Styles can have the lower-left corner chamfer enabled and disabled with this option, to allow this stack to be abutted with other stacks or for artistic effect.
Chamfer lr cornerCertain Styles can have the lower-right corner chamfer enabled and disabled with this option, to allow this stack to be abutted with other stacks or for artistic effect.
Margin pullbackEnable this to reduce the main div margin by 1px on the selected sides to make FlexCanvas overlap/merge with adjacent Stacks. This makes it blend nicely with neighboring Stacks by eliminating rounding effects on div sizes, but this may not always be desirable in which case you can disable this to return margins to defaults using None.
Add a LinkCheck this to add a link to the canvas.
Link toSet a link to jump to when the canvas is clicked.
Hover detentShrink the canvas by this amount when hovering the mouse over it to get a depressed effect.
Hover fadeChoose a hover fade speed to slow the transition to the detent size.
Hover textOptional logo text when hovering. It is best to keep this short! Leave it blank for no change.
Gradient typeSelect the type of gradient. Linear gradients have control over Angle, while Radial gradients can be centered anywhere in the canvas using Offset controls.
Gradient color 1Left most gradient color. This is always opaque, although the other two colors may be set to fade to transparent with Fade 1 to 3 below.
Gradient color 2Middle gradient color. This is opaque unless Fade 1 to 3 is checked below.
Gradient color 3Right most gradient color. This is opaque unless Fade 1 to 3 is checked below.
Fade 1 to 3Check this to fade transparency on gradients 1, 2, 3: 1=opaque, 2=50% transparent, 3=100% transparent. Use Angle below to reverse this order if necessary.
AngleGradient angle in degrees, where 0=left to right, 90=top to bottom, 180=right to left, 270=bottom to top, 360=0 again.
Offset in xGradient horizontal center offset as a percentage of width: 0=left edge, 50=center, 100=right edge.
Offset in yGradient vertical center offset as a percentage of height: 0=top edge, 50=center, 100=bottom edge.
Vertical overlayChoose a vertical overlay gradient to fade the underlying gradient. Choose only from top-bottom fades to white or black.
... Other ColorChoose a custom color to terminate the vertical overlay gradient fade selected above.
... Other ColorChoose a custom color to terminate the vertical overlay gradient fade selected above.
Enable shadowsCheck this to enable shadow controls below ...
Shadow colorColor of drop shadow. Fade this color to dim the shadow instead of using blur below.
Shadow blurSize of shadow blur in pixels. 0 is sharp and not blurred.
Shadow l/r offsetShadow horizontal offset in pixels.
Shadow t/b offsetShadow vertical offset in pixels.
Enable logo textCheck this to add a text logo inside the rule ...
Logo textLogo text. It is best to keep this short! Hover can have another string above.
Logo font sizeSet the font size of the logo text in pixels.
Logo fontChoose a font for the logo text, or select Other and provide your own font.
Other fontSelect another font to use for the body text.
Bold logoCheck this to select a bold font.
Italic logoCheck this to select an italic font.
Logo text colorLogo text color.
Text shadowLogo shadow is to the lower right.
Shadow colorLogo text shadow color.
Enable logo imageCheck this to add a logo image inside the rule ...
Logo imageDrop a logo image (a small png works best) here and it will be used instead of the resource/file specified below. Use Logo size below to scale the image. Leave this blank if you want to specify the logo as a file name below.
Logo image fileSpecify an exact path to a logo image file, such as resources/logo.png. Use Logo size below to scale the image. Leave this blank if you want to drop a logo image in the Logo image well above.
Logo image sizeSet the size of the image in pixels. Logos work best when kept under 128px and are square. Shadows and borders should be created inside the logo image, so controls are not provided for those features here, sorry.
Auto logo locationCheck this to place logo text and/or image automatically at a location appropriate for the selected Style above.
Logo locationSelect predefined logo locations over the canvas, or choose Manual to specify your own location using the x/y percentages below ...
Logo x locLogo center x location as a percentage of width: 0=left edge, 50=center, 100=right edge. This is ignored when Auto logo location is selected.
Logo y locLogo center y location as a percentage of height: 0=top edge, 50=center, 100=bottom edge. This is ignored when Auto logo location is selected.
Examples
Check out examples of FlexCanvas below - this stack can be used for just about ANYTHING, so the examples below are just hints for you to go on …
Example 1: FlexCanvas as a simple replacements for <hr> of fixed and responsive widths …
Example 2: use FlexCanvas to create standalone shapes, or add edges to other Stacks …
Example 3: gradients are available on all shapes, in two or three colors …
Example 4: on any gradient you can overlay a fade to white or black or any other color on top or bottom, to blend FlexCanvas into its surroundings …
Example 5: add text (note the responsive text fit when the browser is resized), borders, shadows, and so on …

FlexCanvas Features

  • Responsive
  • Requires JS, HTML5
  • Sparkle updates

Purchase FlexCanvas

  • $5 USD via PayPal
  • Immediate download *