Tabicon – Tabs Framework

Tabicon – Tabs Framework Created by saheem128. This templates have specific characteristics, namely: I’ve used the following icons or other files as listed. .

You can use this Tabicon – Tabs Framework on Css category for animation, color, css, css2, css3, html, navigation, responsive, tab, tabs, tabs navigation and another uses.

Tabicon - Tabs Framework
© Copyright by saheem128

Features:

  • None: None
  • None: None
  • None: None
  • Ie10, ie11, safari, opera, chrome, edge: IE10, IE11, Safari, Opera, Chrome, Edge
  • Html, css: HTML, CSS

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.

    Rate the file if you like it.

    Thanks!