作者文章

Chris Coyier

创始人、作者、设计师、垃圾邮件删除者、邮件个性化

文章“滑入式图片框”的直接链接

滑入式图片框

来自 CSS-Tricks v8 设计的页脚。

查看演示

footer {
    clear:both;
    overflow:hidden;
    font-size:16px;
    line-height:1.3;
}
#footer-boxes {
    -moz-column-count:2;
    -moz-column-gap:10px;
    -webkit-column-count:2;
    -webkit-column-gap:10px;
    column-count:4;
    column-gap:10px;
}
.footer-box {
    margin:0 0 10px 0;
    display:inline-block;
    width:262px;
    height:140px;
    padding:15px;
    background:#e6e2df;
    color:#b2aaa4;
    -webkit-transition:all 
文章“扩展框导航”的直接链接

扩展框导航

来自 CSS-Tricks v8 设计的页脚。

查看演示

nav {
    background: #444;
    border-bottom: 8px solid #E6E2DF;
    overflow: hidden;
    position: relative;
    width: 100%;
}
nav:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: white; 
}
文章“内嵌角”的直接链接

内嵌角

<div class="corners">
   Content
</div>
body {
  background: #e6e6e6;
}

.corners { 
  background: #f6f6f6;
  height: 700px;
  margin: 50px auto;
  max-width: 600px;
  position: relative;
  width: 80%;
  box-shadow: 0 1px 7px hsla(0, 0%, 0%, 0.2);
}

/* Corner Effect */
.corners:after,
.corners:before {