Tabicon – Tabs Framework

Description

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 t_container Color variations 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 Controlling alignment and spacing of tabs 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 Controlling shape of tabs 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 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