[rz] Inner Border *** UPD 2020-Apr-22 ***

[[RZ]]

[rz] Inner Border v1.3.0.2

A lightweight solution to display custom, colorful and live borders over almost any element.

Some features:

- Custom colors, margins, opacity and size for borders.
- Static or fade-in/out effect on mouse over/out.
- Individual time factors for both fade-in and fade-out effects.
- Multi-instance and multiple elements configuration that share the same settings.
- Mouse and/or keyboard support to properly "highlight" the element with the border.
- Maximum backward and cross-browser compatibility.
- Lightweight, no extra dependencies and no jQuery required.

...and many more!


DEMO


HTML 4.01 Transitional
W3C compliant


* New in version 1.3.0.2

- Solves sizes issues and inconsistencies on chromium-based browsers when a layout grid has borders.

* New in version 1.3.0.1

- An image can be used for the border (small images will be repeated as a texture, big ones will be shown cut down to the border).

* New in version 1.3

- Improved support for mobiles that prevents scheme distortions due to the address bar auto-hide.
- Optionally, the border does not overlap clickable elements behind it (requires modern browsers).
- Fixed a wrong browser width calculation.

* New in version 1.2.1

- Added classes support (useful for i.e. LayoutGrid objects).
- Improved color handler.
- Improved breakpoint handler.
- Improved keyboard mode.

* New in version 1.2

- Breakpoint to change border parameters.
- Fixed an angle misplacing when using big values for radius.
- Minor code tweaks.

* New in version 1.1

- Added support for dynamically hidden/visible elements (previous versions work only with visible elements).
- Improved code (better performance with smaller code).

* New in version 1.0.2

- Added support for 'body' and 'browser' as virtual elements.
- Improved support for forms.
- Improved support for elements with dynamic content and/or that change their size programmatically.

* New in version 1.0.1

- Added transparent/opaque color mode to borders (besides the custom global opacity levels).
- Optionally, preserves angled corners on mixed borders with different colors and transparent/opaque modes.
- Fixed an inconsistency in bottom border color set.


How to use?

1. Design your page as you usually do (with images, layers, etc).
2. Drag and drop this extension and enter the element names that you want to add inner borders.
3. If you need specific border settings for different elements, repeat the step #2.
4. Setup the additional properties and behavior you want.
5. Preview or publish.

Enjoy!

[Rob]

I haven't had time to look into it seriously but I've often wanted to find an easy way to add an inner shadow to an image (standalone, slideshow, rollover text, or inside a layer) as opposed to a drop shadow. Not sure if its reasonable with todays UX and design standards but I've always liked the look of it. Thoughts?

[[RZ]]

depends on what you need to target and how you want to design your site...

[[RZ]]

* New in version 1.0.1

- Added transparent/opaque color mode to borders (besides the custom global opacity levels).
- Optionally, preserves angled corners on mixed borders with different colors and transparent/opaque modes.
- Fixed an inconsistency in bottom border color set.

[[RZ]]

* New in version 1.0.2

- Added support for 'body' and 'browser' as virtual elements.
- Improved support for forms.
- Improved support for elements with dynamic content and/or that change their size programmatically.

[[RZ]]

* New in version 1.1

- Added support for dynamically hidden/visible elements (previous versions work only with visible elements).
- Improved code (better performance with smaller code).

[[RZ]]

* New in version 1.2

- Breakpoint to change border parameters.
- Fixed an angle misplacing when using big values for radius.
- Minor code tweaks.

[zinc]

Great & vital update!!! Cheers RZ!

[[RZ]]

thank you!

[[RZ]]

* New in version 1.2.1

- Added classes support (useful for i.e. LayoutGrid objects).
- Improved color handler.
- Improved breakpoint handler.
- Improved keyboard mode.

[[RZ]]

* New in version 1.3

- Improved support for mobiles that prevents scheme distortions due to the address bar auto-hide.
- Optionally, the border does not overlap clickable elements behind it (requires modern browsers).
- Fixed a wrong browser width calculation.

[[RZ]]

* New in version 1.3.0.1

- An image can be used for the border (small images will be repeated as a texture, big ones will be shown cut down to the border).

[zinc]

* New in version 1.3.0.1

- An image can be used for the border (small images will be repeated as a texture, big ones will be shown cut down to the border).

Wonderful addition! Thank you RZ!

[[RZ]]

thank you for your kind feedback

[[RZ]]

* New in version 1.3.0.2

- Solves sizes issues and inconsistencies on chromium-based browsers when a layout grid has borders.