Features:
- Pure HTML and CSS.
- Responsive design.
- CSS3 Animations.
- 2 main variations, based on motion of tabs while selection, where each variation has 4 more variations
- 36 color variations – 6 for body and 6 for tabs.
- 12 animations.
- 9 shapes for tabs.
- Variations based on color, shape and position can be switched to simply by using predefined class names.
- Detailed documentation.
- Maximum author support.
Classes available for main variations – Mobile and Immobile Tabs:
(Use one class for body and one for tabs from below classes.)
Dark body colors:
- 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 body colors:
- 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’ colors:
- 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’ colors:
- 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 represent the respective colors.
Classes available for Immobile Tabs type only:
-
Controlling position of tabs:
- t_inside
This class will move the tabs inside the body. - t_outside_attached
This class will move the tabs outside the body, but attached to it. - t_outside_dettached
This class will move the tabs outside the body and dettached to it. - t_left_separated
This class will align the tabs to the left side, with some space between each pair of tab. - t_left_unseparated
This class will align the tabs to the left side, with no space between each pair of tab. - t_right_separated
This class will align the tabs to the right side, with some space between each pair of tab. - t_right_unseparated
This class will align the tabs to the right side, with no space between each pair of tab. - t_fluid_separated
This class will increase the size of tabs so as to fill the entire width, with some space between each pair of tab. - t_fluid_unseparated
This class will increase the size of tabs so as to fill the entire width, with no space between each pair of tab. - t_center_separated
This class will align the tabs in the center, with some space between each pair of tab. - t_center_unseparated
This class will align the tabs in the center, with no space between each pair of tab. - t_rounded_full
This class will make the tabs rounded at all corners. - t_rounded_top
This class will make the tabs rounded at top corners. - t_la_rounded_top_extremes
Use with left aligned tabs.
This class will make the extreme tabs of the left aligned tabs rounded at left/right corners. - t_ra_rounded_top_extremes
Use with right aligned tabs.
This class will make the extreme tabs of the right aligned tabs rounded at right/left corners. - t_la_rounded_extremes
Use with left aligned tabs.
This class will make the extreme corners of the extreme tabs of the left aligned tabs rounded. - t_ra_rounded_extremes
Use with right aligned tabs.
This class will make the extreme corners of the extreme tabs of the right aligned tabs rounded. - t_la_curved_full
Recommended: Use with left aligned tabs.
This class will make each tab of the left aligned tabs curved. - t_ra_curved_full
Recommended: Use with right aligned tabs.
This class will make each tab of the right aligned tabs curved. - t_la_curved_extremes
Recommended: Use with left aligned tabs.
This class will make the extreme ends of the extreme tabs of the left aligned tabs curved. - t_ra_curved_extremes
Use with right aligned tabs.
This class will make the extreme ends of the extreme tabs of the right aligned tabs curved. - Add no class to get a rectangular tab. This is the default shape of the tabs.
Controlling alignment and spacing of tabs:
Controlling shape of tabs:
Sources and Credits:
I’ve used the following icons or other files as listed.
- Google font – Open Sans
- FontAwesome Vector Icons
- Normalize.css
Rate the file if you like it.
Thanks!
Kindly Note: We update new contents like WordPress Themes, Plugins, PHP Scripts everyday. But remember that you should never use this items in a commercial website. All the contents posted here for development & testing purpose only. We’re not responsible for any damage, use at your own RISK! We highly recommend to buy Tabicon – Tabs Framework from the The Developer ( sah33m ) website. Thank you.
Download = Tabicon – Tabs Framework-[Updated].zip