CSS3 平面化博客布局设计

Flat Blog layout in CSS3，带列表和网格布局切换的界面设计

blog

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3035
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
    padding: 0 100px 100px;
    background-color: #cde !important;
}
h1#header {
    text-align: center;
    padding: 50px;
    font-size: 62px;
    font-family: "Pacifico";
    text-shadow: 0 2px 2px #3c77b3;
}
.article-wrapper {
    -moz-transition: width 0.4s;
    -o-transition: width 0.4s;
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
}
article {
    position: relative;
    padding-left: 180px;
    padding-right: 75px;
    height: 150px;
    margin-bottom: 30px;
    background-color: #fff;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    cursor: pointer;
}
article .img-wrapper {
    position: absolute;
    top: -10px;
    left: -10px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background-color: #cde;
    padding: 10px;
    z-index: 1000;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
article .img-wrapper img {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    width: 150px;
}
article h1 {
    height: 75px;
    line-height: 75px;
    font-size: 24px;
    border-bottom: 2px solid #cde;
    color: #428bca;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
article p {
    color: #888;
}
article a {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    line-height: 150px;
    text-align: center;
    width: 100%;
    background-color: #fff;
    font-size: 48px;
    font-style: italic;
    opacity: 0;
    color: #428bca !important;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    text-decoration: none !important;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    font-family: "Pacifico";
    text-shadow: 0 1px 1px #aaa;
}
article:hover .img-wrapper {
    padding: 5px;
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
article:hover .img-wrapper img {
    width: 160px;
}
article:hover a {
    opacity: 1;
}
.bloc article {
    padding: 10px;
    height: 225px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-top: 75px;
}
.bloc article .img-wrapper {
    position: relative;
    top: -85px;
    width: 170px;
    left: inherit;
    margin: auto;
    margin-bottom: -100px;
}
.bloc article h1 {
    font-size: 14px;
    height: 37.5px;
    line-height: 37.5px;
}
.bloc article p {
    font-size: 12px;
}
.bloc article a {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    line-height: 255px;
}

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div class="container list-article">
    <div class="btn-group pull-right" id="switch-view">
        <button class="btn btn-primary">
            <span class="icon-th-large"></span>
        </button>
        <button class="btn btn-primary active">
            <span class="icon-th-list"></span>
        </button>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <div class="col-xs-12 article-wrapper">
            <article>
                <a href="#" class="more">more</a>
                <div class="img-wrapper"><img src="https://lorempixel.com/150/150/fashion" alt="" />
                </div>
                <h1>Lorem ipsum dolor.</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
            </article>
        </div>
        <div class="col-xs-12 article-wrapper">
            <article>
                <a href="#" class="more">more</a>
                <div class="img-wrapper"><img src="https://lorempixel.com/150/150/city" alt="" />
                </div>
                <h1>Dignissimos perferendis quae.</h1>
                <p>Numquam dolorem sed quae placeat iusto! Quibusdam doloremque enim assumenda aliquam impedit earum alias labore.</p>
            </article>
        </div>
        <div class="col-xs-12 article-wrapper">
            <article>
                <a href="#" class="more">more</a>
                <div class="img-wrapper"><img src="https://lorempixel.com/150/150/food" alt="" />
                </div>
                <h1>Quisquam deserunt cumque!</h1>
                <p>Dolor tempora nihil facere explicabo qui mollitia deleniti quam quia iure nisi voluptate voluptatibus cum.</p>
            </article>
        </div>
        <div class="col-xs-12 article-wrapper">
            <article>
                <a href="#" class="more">more</a>
                <div class="img-wrapper"><img src="https://lorempixel.com/150/150/nature" alt="" />
                </div>
                <h1>Velit natus possimus.</h1>
                <p>Illum voluptates nisi asperiores temporibus illo maiores qui aliquid corporis exercitationem libero dolor tenetur. Doloremque!</p>
            </article>
        </div>
        <div class="col-xs-12 article-wrapper">
            <article>
                <a href="#" class="more">more</a>
                <div class="img-wrapper"><img src="https://lorempixel.com/150/150/abstract" alt="" />
                </div>
                <h1>Atque quo maxime.</h1>
                <p>Sed eveniet iste magni possimus ipsum dolore ea nesciunt eligendi id. Eum quos voluptatibus ullam.</p>
            </article>
        </div>
    </div>
</div>

Flat Blog layout in CSS3，带列表和网格布局切换的界面设计

blog

编辑器支持Emmet

快捷键

Flat Blog layout in CSS3，带列表和网格布局切换的界面设计

blog

HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板

使用SVG clip-path实现的文章占位设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：