浙江 杭州

纯CSS3超酷扁平风格后台面板UI设计

系统分类: 网页特效 - css3 - css3 渐变/圆角/阴影 2016-08-11

人气16128

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款使用纯CSS3制作的超酷扁平风格后台面板UI设计效果。该后台面板设计风格简洁大方,采用侧边栏TAB来切换各个面板的内容。整个界面使用扁平化设计,非常的时尚。

制作方法

HTML结构

该后台面板使用一个<div>作为包裹容器,里面div.avatar是用户的头像,每一个input.radio和它之后的<span>元素以及font-awesome字体图标组成一个侧边栏TAB菜单。div.top-bar是面板顶部的菜单图标。div.tab-content中的每一个section对应TAB菜单的一个选项。

<div class="container pb30">
  <div class="clear-backend">
  <div class="avatar">
    <div>
      <a href="http://www.ui3g.com/" target="_blank">
        <img src="img/admin.png" alt="">
      </a>
    </div>
  </div>

  <!-- tab-menu -->
  <input type="radio" class="tab-1" name="tab" checked="checked">
  <span>Home</span><i class="fa fa-home"></i>
  ......
  <!-- tab-top-bar -->
  <div class="top-bar">
    <ul>
      <li>
        <a href="" title="Log Out">
          <i class="fa fa-sign-out"></i>
        </a>
      </li>
      ...
    </ul>
  </div>

  <!-- tab-content -->
  <div class="tab-content">
    <section class="tab-item-1">
      <h1>One</h1>
    </section>
    ...
  </div>
</div>               
              
CSS样式

该后台面板UI的CSS样式并不复杂,值得注意的一点是它使用checked hack来制作点击TAB时切换面板的效果。

.clear-backend > input.tab-1:checked ~ .tab-content .tab-item-1 {
  display: block;
}

.clear-backend > input.tab-2:checked ~ .tab-content .tab-item-2 {
  display: block;
}

.clear-backend > input.tab-3:checked ~ .tab-content .tab-item-3 {
  display: block;
}

.clear-backend > input.tab-4:checked ~ .tab-content .tab-item-4 {
  display: block;
}

.clear-backend > input.tab-5:checked ~ .tab-content .tab-item-5 {
  display: block;
}

.clear-backend > input.tab-6:checked ~ .tab-content .tab-item-6 {
  display: block;
}

.clear-backend > input.tab-7:checked ~ .tab-content .tab-item-7 {
  display: block;
}

.clear-backend > input.tab-8:checked ~ .tab-content .tab-item-8 {
  display: block;
}

.clear-backend > input.tab-9:checked ~ .tab-content .tab-item-9 {
  display: block;
}

.clear-backend > input.tab-10:checked ~ .tab-content .tab-item-10 {
  display: block;
}               
              

插件原文地址:http://www.cleardesign.me/pure-css3-backend-panel

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:85.28KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2200.html 非特殊说明,本文版权归原作者所有,转载请注明出处
纯CSS3超酷扁平风格后台面板UI设计

我当前G币余额:0 已下载次数:3

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)