magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Floating Caption


Beautify your designs based on floating layers and/or layout grids schemes with highly customizable floating captions.

Some features:

- Three horizontal alignments with custom offsets.
- Automatically centered vertically between floating layers.
- Auto target detection or manual target setup.
- Custom fonts, colors, padding, radius, borders, etc...
- Optional custom patterns to beautify even more the captions styles.
- Converts full/custom designed objects into advanced captions.
- Maximum compatibility across browsers and platforms.
- Extremely lightweight.
- No jQuery required.


...and much more!


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* New in version 1.1

(txt) module:

- Extended horizontal sizes.
- Extended horizontal alignments.
- Relative width with shrink sizes.
- Horizontal offset values on breakpoints.
- Improved vertical center mode.
- Extended vertical alignment variants relative to the top-border target.
- Custom offset for the vertical alignment.
- Optional explicit text direction (useful for left-to-right and right-to-left languages in the same page).
- Stack option to give precedence either to the caption or to the context elements.

(obj) module:

- Extended horizontal alignments.
- Improved vertical center mode.
- Extended vertical alignment variants relative to the top-border target.
- Custom offset for the vertical alignment.
- Improved RWD handling with unified borders calculation for more precision in relative sizes results.
- Added breakpoints support as in (txt) module for additional control in advanced scenarios.
- Stack option to give precedence either to the caption object or to the context elements.



How to use?

- Text module:

1. Design your page based on floating layers or layout grids as you usually do.
2. Drag and drop an extension instance (named 'txt') within the floating layer you want to put a
    floating caption to divide the page areas.
3. Enter the text for the caption and customize it via the available properties.
4. Preview or publish.

- Object module:

1. Design your page based on floating layers or layout grids as you usually do.
2. Design the element to use it as a caption.
3. Drag and drop an extension instance (named 'obj') within the floating layer you want to put a
    floating caption to divide the page areas.
4. Optionally, setup the alignments via the available properties.
5. Preview or publish.

- Notes:

You can enter the target object name when drag and drop within a layer is not possible; this usually happens with the layout grid element, if this is the case, in the target property enter the layout grid name.

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with