Tabicon – Tabs Framework
Features:
- Pure HTML and CSS.
- Responsive design.
- CSS3 Animations.
- 2 fundamental variations, primarily based on movement of tabs whereas choice, the place every variation has 4 extra variations
- 36 coloration variations – 6 for physique and 6 for tabs.
- 12 animations.
- 9 shapes for tabs.
- Variations primarily based on coloration, form and place will be switched to easily by utilizing predefined class names.
- Detailed documentation.
- Maximum writer assist.
Classes accessible for fundamental variations – Mobile and Immobile Tabs:
(Use one class for physique and one for tabs from under lessons.)
Dark physique colours:
- t_b_bluish_dark
- t_b_greenish_dark
- t_b_browinsh_dark
- t_b_lightseagreenish_dark
- t_b_lightcoralish_dark
- t_b_grayish_dark
Light physique colours:
- t_b_bluish_light
- t_b_greenish_light
- t_b_browinsh_light
- t_b_lightseagreenish_light
- t_b_lightcoralish_light
- t_b_grayish_light
Dark tabs’ colours:
- t_t_bluish_dark
- t_t_greenish_dark
- t_t_browinsh_dark
- t_t_lightseagreenish_dark
- t_t_lightcoralish_dark
- t_t_grayish_dark
Light tabs’ colours:
- t_t_bluish_light
- t_t_greenish_light
- t_t_browinsh_light
- t_t_lightseagreenish_light
- t_t_lightcoralish_light
- t_t_grayish_light
*The class names above symbolize the respective colours.
Classes accessible for Immobile Tabs sort solely:
-
Controlling place of tabs:
- t_inside
This class will transfer the tabs contained in the physique.
- t_outside_attached
This class will transfer the tabs exterior the physique, however hooked up to it.
- t_outside_dettached
This class will transfer the tabs exterior the physique and dettached to it.
- t_left_separated
This class will align the tabs to the left facet, with some house between every pair of tab.
- t_left_unseparated
This class will align the tabs to the left facet, with no house between every pair of tab.
- t_right_separated
This class will align the tabs to the precise facet, with some house between every pair of tab.
- t_right_unseparated
This class will align the tabs to the precise facet, with no house between every pair of tab.
- t_fluid_separated
This class will enhance the scale of tabs in order to fill your entire width, with some house between every pair of tab.
- t_fluid_unseparated
This class will enhance the scale of tabs in order to fill your entire width, with no house between every pair of tab.
- t_center_separated
This class will align the tabs within the heart, with some house between every pair of tab.
- t_center_unseparated
This class will align the tabs within the heart, with no house between every pair of tab.
- t_rounded_full
This class will make the tabs rounded in any respect corners.
- t_rounded_top
This class will make the tabs rounded at prime corners.
- t_la_rounded_top_extremes
Use with left aligned tabs.
This class will make the acute tabs of the left aligned tabs rounded at left/proper corners.
- t_ra_rounded_top_extremes
Use with proper aligned tabs.
This class will make the acute tabs of the precise aligned tabs rounded at proper/left corners.
- t_la_rounded_extremes
Use with left aligned tabs.
This class will make the acute corners of the acute tabs of the left aligned tabs rounded.
- t_ra_rounded_extremes
Use with proper aligned tabs.
This class will make the acute corners of the acute tabs of the precise aligned tabs rounded.
- t_la_curved_full
Recommended: Use with left aligned tabs.
This class will make every tab of the left aligned tabs curved.
- t_ra_curved_full
Recommended: Use with proper aligned tabs.
This class will make every tab of the precise aligned tabs curved.
- t_la_curved_extremes
Recommended: Use with left aligned tabs.
This class will make the acute ends of the acute tabs of the left aligned tabs curved.
- t_ra_curved_extremes
Use with proper aligned tabs.
This class will make the acute ends of the acute tabs of the precise aligned tabs curved.
- Add no class to get an oblong tab. This is the default form of the tabs.
Controlling alignment and spacing of tabs:
Controlling form of tabs:
Sources and Credits:
I’ve used the next icons or different information as listed.
- Google font – Open Sans
- FontAwesome Vector Icons
- Normalize.css
Rate the file if you happen to prefer it.
Thanks!
