CSS3实现各种格子纹理效果

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS3实现各种纹理背景效果</title>

<style>

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;-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;}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<h1></h1>

<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>

</body>

</html>

时间： 2024-10-27 16:56:18

CSS3实现各种格子纹理效果的相关文章

CSS3实现8种Loading效果【二】

CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></sp

css3实现的动态月食效果代码实例

css3实现的动态月食效果代码实例:本章节分享一段代码实例,它利用CSS3实现了动态的月食效果.动画其实比较简单简短,需要的朋友可以自行做一下分析,这里就不多介绍了.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

小tip:CSS3下的渐变文字效果实现——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: 相应的HTML代码如下: <h2 class="text-gradient" data-text=

CSS3实现10种Loading效果

原文:CSS3实现10种Loading效果 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> &

css3实现色子自动翻转效果

原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div>

使用CSS3实现3D图片滑块效果

使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不同的效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像.若浏览器不支持3D变换,一个简单的滑块将作为后备方案.要调用这个插件,首先把图片放在无序列表中

9种纯CSS3人物信息卡片UI设计效果

这是一组纯CSS3人物信息卡片UI设计效果.这组人物信息卡片共9种效果,每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效. 在线预览   源码下载 使用方法 HTML结构 该人物信息卡片的基本HTML结构如下: <div class="single-member effect-3"> <div class="member-image"> <img src="demo.jpg&quo

CSS3实战开发:使用CSS3实现photoshop的过滤效果

原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我们使用CSS来给web图像添加相同的效果. 首先我们先在网页中显示一张图片,html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="s

CSS3实现的页面反转效果

CSS3实现的页面反转效果:页面反转效果在实际应用中不太常见,不过也并非没有,下面分享一段利用CSS3实现的此效果,寄希望能够给需要的朋友带来一定的帮助,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &l