简约文章阅读布局 - 140911

首字母、首句的效果。

blog,read

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
	background: #FFF;
	color: #111;
	font: 16px "Lucida Console", Monaco, monospace
	text-align: center;
	}
	
	div, h1, h2, p {
		margin: 10;
		padding: 10;
		}
	
		#poem { 
			margin: auto;
			padding: 30px 0;
			text-align: left;
			width: 360px;
			}
		
			h1, h2 , h4{
				font-weight: normal;
				text-align: center;
				}
				
			h1 {
				font-size: 36px;
        color: purple;
				line-height: 1.2;
				margin-bottom: 10px;
				}
			
			h2 {
				color: #666;
				font-size: 18px;
				font-style: italic;
				margin-bottom: 30px;
				}
				
			p {
				line-height: 1.5;
				margin-bottom: 15px;
				}
			
			
			h2:before {
				content: '— ';
				}
			
			h2:after {
				content: ' —';
				}
			
      h4:before {
				content: '— ';
				}
			
			h4:after {
				content: ' —';
				}

#poem h2 + p:first-letter {
					float: left;
           color: purple;
					font-size: 38px;
					line-height: 1;
					margin: 2px 5px 0 0;
				}
				
			#poem p:first-line {
				font-variant: small-caps;
				letter-spacing: 1.5px;
				}
			
			#poem p:last-child {
				margin-bottom: 30px;
				padding-bottom: 30px;
				}

HTML

首字母、首句的效果。

blog,read

编辑器支持Emmet

快捷键

首字母、首句的效果。

blog,read

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：