• 不断学习才有回报,学无止境!

用纯css3实现花格纹理背景

DIV+CSS技巧发现 箭翎 821次浏览 0个评论 扫描二维码

利用纯css3实现花格纹理背景,纯css3实现花格纹理背景是一款无需任何图片和js脚本即可以实现形式多样的花纹背景,包含横向和竖向栅格背景、马赛克背景等等,还可以自己扩展,非常棒的效果。
效果:1

CSS样式部分

		body {
			font-family: Georgia, serif;	
		}
		
		.stripes {
			height: 250px;
			width: 375px;
			float: left;
			
			margin: 10px;
			
			-webkit-background-size: 50px 50px;
			-moz-background-size: 50px 50px;
			background-size: 50px 50px; /* Controls the size of the stripes */
			
			-moz-box-shadow: 1px 1px 8px gray;
			-webkit-box-shadow: 1px 1px 8px gray;
			box-shadow: 1px 1px 8px gray;
		}
		
		.angled {
			background-color: #ac0;
			background-image: -webkit-gradient(linear, 0 100%, 100% 0,
									color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
									color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
									color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
			 						to(transparent));
			background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
			background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
			background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
		}
		
		.angled-135 {
			background-color: #c16;
			background-image: -webkit-gradient(linear, 0 0, 100% 100%,
									color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
									color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
									color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
			 						to(transparent));
			background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
			background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
			background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
		}
		
		.horizontal {
			background-color: #0ae;
			background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
			background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
		}
		
		.vertical {
			background-color: #f90;
			background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
			background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
		}
		
		.checkered {
			background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
							  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
							  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
			  				  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
			background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
							  -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
							  -moz-linear-gradient(45deg, transparent 75%, #555 75%),
			  				  -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
			background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
							  -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
							  -o-linear-gradient(45deg, transparent 75%, #555 75%),
			  				  -o-linear-gradient(-45deg, transparent 75%, #555 75%);
			background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
							  linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
							  linear-gradient(45deg, transparent 75%, #555 75%),
			  				  linear-gradient(-45deg, transparent 75%, #555 75%);
		}
		
		.picnic {
			background-color:white;
			background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
							  -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
			background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
					    -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
			background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
					    -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
			background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
					    linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
		}
		
		#footer {
			text-align: center;
			clear: both;
			padding-top: .5em;
			border-top: 1px solid #ccc;
			font-variant: small-caps;
		}

HTML部分

<div class="horizontal stripes">
</div>
<div class="vertical stripes">
</div>
<div class="picnic stripes">
</div>
<div class="angled stripes">
</div>
<div class="angled-135 stripes">
</div>
<div class="checkered stripes">
</div>

箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明用纯css3实现花格纹理背景
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址