[rz] Floating Caption *** UPD 2018-May-31 ***
Posted: Mon May 21, 2018 9:06 pm
[rz] Floating Caption v1.1
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!
* 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.
HTML 4.01 Transitional
W3C compliant
DEMO
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!
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!
* 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.
HTML 4.01 Transitional
W3C compliant
DEMO
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!
