创建一个HTMl5 Material设计模板(3)

上页

　　下面是内容区域部分的CSS定义

/*Content area {Start}*/ 
div[role='main']{ 
   width:70%; 
   flex:1  1 auto ; 
   background:white ; 
   box-shadow: inset  0  0  1px  #ADADAD; 
} 
 
.secondary-search-area{ 
   background:#F6F6F6; 
   height:45px ; 
   visibility:hidden ; 
   opacity:0; 
} 
/*Content area {End}*/

 

div[role='main']

这是页面内容部分，当是移动尺寸时，放置搜索条目


@media screen and (max-width:900px)

这是移动模型下，当屏幕宽度小于900px时，改变了一些属性，main 改变了，调整了 .header中flex方向到 column , 移动 header .search-area 到 .secondary-search-area, 隐藏了main navigation 和显示 menu-icon，这样激活侧栏显示

下面是材料设计的按钮CSS:

/*Material Icons*/ 
.material-icons { 
   font-family:  'Material Icons'; 
   font-weight: normal ; 
   font-style: normal ; 
   font-size:  24px ;   /* Preferred icon size */ 
   display: inline-block ; 
   width:  1em ; 
   height:  1em ; 
   line-height:  1; 
   text-transform: none ; 
   letter-spacing: normal ; 
   word-wrap: normal ; 
   white-space: nowrap ; 
   direction: ltr ; 
 
  /* Support for all WebKit browsers. */ 
   -webkit-font-smoothing: antialiased ; 
   /* Support for Safari and Chrome. */ 
   text-rendering: optimizeLegibility ; 
 
   /* Support for Firefox. */ 
   -moz-osx-font-smoothing: grayscale ; 
 
   /* Support for IE. */ 
   font-feature-settings:  'liga'; 
}

 

 

Action-button

/*Action buttons*/ 
.action-wrapper{ 
   z-index:2; 
} 
 
.action-wrapper :hover >  .sub-button-wrapper{ 
   visibility:visible ; 
   opacity:1; 
   transform:  scale(1); 
} 
 
.sub-button-wrapper{ 
   position:absolute ; 
   bottom:60px ; 
   right:5%; 
  
   margin:  0  7.5px ;   
   display:flex ; 
   flex-direction:column ; 
  
   transition:all  0.3s ease ; 
   transform:  scale(0.7); 
  
   visibility:hidden ; 
   opacity:0; 
  
} 
 
.primary-button{ 
   position:absolute ; 
   bottom:10px ; 
   right:5%; 
  
   height:50px ; 
   width:50px ; 
   background:  #d23f31  url(http://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/btw_ic_speeddial_white_24dp.png) center center no-repeat ; 
} 
 
.secondary-button{ 
   height:35px ; 
   width:35px ; 
   background:#03A9F4;/*#00BCD4;#448AFF;#ffc107;*/ 
   margin:5px  0; 
   color:white ; 
   display:flex ; 
   justify-content:center ; 
   align-items:center ; 
} 
 
.action-button{ 
   border-radius:50%; 
   border:none ; 
   outline: none ; 
   box-shadow:  0  0  4px  rgba(0, 0, 0, .14), 0  4px  8px  rgba(0, 0, 0, .28); 
} 
  
.overlay{ 
   position:fixed ; 
   top:0; 
   left:- 100%; 
   background:rgba(0,  0,  0,  0.68);; 
   width:100%; 
   height:100%; 
   z-index:1; 
  
   visbility:hidden ; 
   opacity:0; 
     transition: visibility  0.1s linear ; 
} 
 
.visible{ 
   left:0; 
   visbility:visible ; 
   opacity:1; 
}

 

action-wrapper

这是和action-button所有相关元素的包装。.它的目标是确保内部每个元素位于屏幕其他内容顶部（与侧栏不是同一边，屏幕的右下角）


.action-button

基本样式，圆形和阴影


.primary-button

这个类包含action-button风格, 像 "+" 是一个图片(取自google的 inbox ;D ) , 颜色和较宽宽度和高度，和这个类有关按钮绝对定位在页面上。


.secondary-button

类似 .primary-button 类, 主要区别是小一些, 不同的颜色以及不是绝对定位的。


.sub-button-wrapper

这是所有secondary-button 插入的地方.
它设置位置为绝对，有margin: 0 7.5px;. 这意味着顶部和底部没有margin, 左右两边是7.5px. 为什么是7.5px，因为我们已经设置 .secondary-buttons宽度和高度是35px. 如果 35 + 7.5 + 7.5 = 50px, 这是 .primary-button大小. 意味着所有的 .secondary-button将在中央。

然后我们有visibility:hidden; 和 opacity:0; . 第一个很重要，因为这使得元素不可见，不会触发任何事件但是还占据空间。.opacity 设置为 0 也使得元素不可见，但是当切换发生时这很有用，能够有一个平滑的切换动画效果。
最后我们有一个传输transform: scale(0.7); 和切换transition:all 0.3s ease;, 这是切换动画效果


.action-wrapper:hover > .sub-button-wrapper

这是我们的目标.action-wrapper, 包含所有当鼠标滑过的元素状态，这样它显示 .secondary-button. 现在有一些有趣的事情，, 如果你看代码你会发现wrapper包装器中所有都和action-button有关，, 它没有 position:absolute . 这样它遵循我们为内容定义的flex flow , 也就是 flex-direction:column.

 

Javascript主题

30种Bootstrap免费响应式设计模板