Tab选项卡

CSS3超时尚Tabs选项卡流线型标签效果

也想出现在这里?联系我们
创客云

CSS3超时尚Tabs选项卡流线型标签效果-云模板
这是一款效果非常时尚的 Tabs 选项卡标签的流线型线条效果。该效果使用纯 CSS3 来制作,效果类似 eclipse 软件的标签页效果。该 Tabs 标签使用流线型设计,并且可以自定义标签的颜色,非常实用和好看。

HTML 结构

该流线型 Tabs 选项卡标签使用无序列表来制作,外面使用一个 div 作为包裹容器。

也想出现在这里?联系我们
创客主机
  1. <div class='tabbed round'>
  2.     <ul>
  3.       <li>Third tab</li>
  4.       <li>Second tab</li>
  5.       <li class='active'>First tab</li>
  6.     </ul>
  7. </div>

CSS 样式

流线型 Tabs 选项卡的实现方式非常简单,主要使用 border-radius 来完成,下面是该效果的代码:

  1. /* Tabbed Styles */
  2. .tabbed {
  3.   width: 80%;
  4.   min-width: 400px;
  5.   margin: 0 auto;
  6.   margin-bottom: 68px;
  7.   border-bottom: 4px solid #000;
  8.   overflow: hidden;
  9.   transition: border 250ms ease;
  10. }
  11. .tabbed ul {
  12.   margin: 0px;
  13.   padding: 0px;
  14.   overflow: hidden;
  15.   float: left;
  16.   padding-left: 48px;
  17.   list-style-type: none;
  18. }
  19. .tabbed ul * {
  20.   margin: 0px;
  21.   padding: 0px;
  22. }
  23. .tabbed ul li {
  24.   display: block;
  25.   float: right;
  26.   padding: 10px 24px 8px;
  27.   background-color: #FFF;
  28.   margin-right: 46px;
  29.   z-index: 2;
  30.   position: relative;
  31.   cursor: pointer;
  32.   color: #777;
  33.   text-transform: uppercase;
  34.   font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;
  35.   transition: all 250ms ease;
  36. }
  37. .tabbed ul li:before,
  38. .tabbed ul li:after {
  39.   display: block;
  40.   content: " ";
  41.   position: absolute;
  42.   top: 0;
  43.   height: 100%;
  44.   width: 44px;  
  45.   background-color: #FFF;
  46.   transition: all 250ms ease;
  47. }
  48. .tabbed ul li:before {
  49.   right: -24px;
  50.   transform: skew(30deg, 0deg);
  51.   box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
  52. }
  53. .tabbed ul li:after {
  54.   left: -24px;
  55.   transform: skew(-30deg, 0deg);
  56.   box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
  57. }
  58. .tabbed ul li:hover,
  59. .tabbed ul li:hover:before,
  60. .tabbed ul li:hover:after {
  61.   background-color: #F4F7F9;
  62.   color: #444;
  63. }
  64. .tabbed ul li.active {
  65.   z-index: 3;
  66. }
  67. .tabbed ul li.active,
  68. .tabbed ul li.active:before,
  69. .tabbed ul li.active:after {
  70.   background-color: #000;
  71.   color: #fff;
  72. }
  73.  
  74. /* Round Tabs */
  75. .tabbed.round ul li {
  76.   border-radius: 8px 8px 0 0;
  77. }
  78. .tabbed.round ul li:before {
  79.   border-radius: 0 8px 0 0;
  80. }
  81. .tabbed.round ul li:after {
  82.   border-radius: 8px 0 0 0;
  83. }

源文件中使用 js 来切换 tabs 选项卡的标签的皮肤样式,主要是更改它们的背景颜色和边框颜色,代码十分简单。

下载地址

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

12

12.12 惠不可挡

每逢双12,难免心潮澎湃,亲们,准备好了吗?

①、原版主题安装冬日暖心价60元/次(原价120元/次) ---》详询客服

①、云主机买一年送一年,买两年送两年,高速、稳定、免备案 ---》云主机

③、双十二限时促销,在模板市场购买任意模板赠送VIP年度会员火热进行中 ---》云模板

咨 询 客 服