Tabicon – Tabs Framework (Tabs and Sliders)

Attributes:

  • Pure HTML and CSS.
  • Responsive design and style.
  • CSS3 Animations.
  • two principal variations, primarily based on motion of tabs whilst choice, exactly where every variation has four a lot more variations
  • 36 colour variations &#8211 six for physique and six for tabs.
  • 12 animations.
  • 9 shapes for tabs.
  • Variations primarily based on colour, shape and position can be switched to merely by utilizing predefined class names.
  • Detailed documentation.
  • Maximum author assistance.

Classes accessible for principal variations &#8211 Mobile and Immobile Tabs:

  • t_container
  • Colour variations:
    (Use one particular class for physique and one particular for tabs from under classes.)

    Dark physique 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 physique 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&#8217 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&#8217 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 accessible for Immobile Tabs sort only:

      Controlling position of tabs:

    • t_inside

      This class will move the tabs inside the physique.
      t_inside class
    • t_outdoors_attached

      This class will move the tabs outdoors the physique, but attached to it.
      t_outside_attached class
    • t_outdoors_dettached

      This class will move the tabs outdoors the physique and dettached to it.
      t_outside_dettached class
    • Controlling alignment and spacing of tabs:

    • t_left_separated

      This class will align the tabs to the left side, with some space involving every pair of tab.
      t_left_separated class
    • t_left_unseparated

      This class will align the tabs to the left side, with no space involving every pair of tab.
      t_left_unseparated class
    • t_ideal_separated

      This class will align the tabs to the ideal side, with some space involving every pair of tab.
      t_right_separated class
    • t_ideal_unseparated

      This class will align the tabs to the ideal side, with no space involving every pair of tab.
      t_right_unseparated class
    • t_fluid_separated

      This class will enhance the size of tabs so as to fill the whole width, with some space involving every pair of tab.
      t_fluid_separated class
    • t_fluid_unseparated

      This class will enhance the size of tabs so as to fill the whole width, with no space involving every pair of tab.
      t_fluid_unseparated class
    • t_center_separated

      This class will align the tabs in the center, with some space involving every pair of tab.
      t_center_separated class
    • t_center_unseparated

      This class will align the tabs in the center, with no space involving every pair of tab.
      t_center_unseparated class
    • Controlling shape of tabs:

    • t_rounded_complete

      This class will make the tabs rounded at all corners.
      t_rounded_full class
    • t_rounded_top rated

      This class will make the tabs rounded at top rated corners.
      t_rounded_top class
    • t_la_rounded_top rated_extremes
      Use with left aligned tabs.

      This class will make the intense tabs of the left aligned tabs rounded at left/ideal corners.
      t_la_rounded_top_extremes class
    • t_ra_rounded_top rated_extremes
      Use with ideal aligned tabs.

      This class will make the intense tabs of the ideal aligned tabs rounded at ideal/left corners.
      t_ra_rounded_top_extremes class
    • t_la_rounded_extremes
      Use with left aligned tabs.

      This class will make the intense corners of the intense tabs of the left aligned tabs rounded.
      t_la_rounded_top_extremes class
    • t_ra_rounded_extremes
      Use with ideal aligned tabs.

      This class will make the intense corners of the intense tabs of the ideal aligned tabs rounded.
      t_ra_rounded_top_extremes class
    • t_la_curved_complete
      Advisable: Use with left aligned tabs.

      This class will make every tab of the left aligned tabs curved.
      t_la_curved_full class
    • t_ra_curved_complete
      Advisable: Use with ideal aligned tabs.

      This class will make every tab of the ideal aligned tabs curved.
      t_ra_curved_full class
    • t_la_curved_extremes
      Advisable: Use with left aligned tabs.

      This class will make the intense ends of the intense tabs of the left aligned tabs curved.
      t_la_curved_extremes class
    • t_ra_curved_extremes
      Use with ideal aligned tabs.

      This class will make the intense ends of the intense tabs of the ideal aligned tabs curved.
      t_ra_curved_extremes class
    • Add no class to get a rectangular tab. This is the default shape of the tabs.
      Default shape

    Sources and Credits:

    I&#8217ve utilised the following icons or other files as listed.

    Price the file if you like it.

    Thanks!