使用css3渐变制作纹理效果

Web页面中常用纹理图片制作背景，这通过制图软件很快就能实现，但对于不懂设计的人来说并不是一件容易的事。CSS3的渐变特性，可以直接使用代码实现一些纹理背景效果。

接下来利用html和css的一些知识，通过css3渐变属性制作纹理图像。

创建结构

<body><div class="pt1"></div><div class="pt2"></div><div class="pt3"></div><div class="pt4"></div><div class="pt5"></div><div class="pt6"></div><div class="pt7"></div><div class="pt8"></div>
</body>

写样式


```html
<style type="text/css">body{width:880px;height:440px;border:5px solid #000;position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;}div{width:200px;height:200px;float:left;margin:10px;box-shadow:0 1px 8px #666;}.pt1{background-size:50px 50px;background-color:#0ae;background-image:linear-gradient(rgba(255,255,255,0.2)                    50%,transparent 50%,transparent);}.pt2{background-size:50px 50px;background-color:#f90;background-image:linear-gradient(0deg,rgba(255,255,255,0.2)          50%,transparent 50%,transparent);}.pt3{background-color:#DDEEFF;background-size:80px 80px;background-image:radial-gradient(closest-side,transparent                 98%,rgba(0,0,0,0.3) 99%),radial-gradient(closest-                       side,transparent 98%,rgba(0,0,0,0.3) 99%);background-position:0 0px,40px 40px;}.pt4{background-color:#001;background-image: radial-gradient(white 15%, transparent              16%),radial-gradient(white 15%, transparent 16%);background-size: 60px 60px;background-position: 0 0, 30px 30px;}.pt5{background-color: #eee;background-image: linear-gradient(45deg, black 25%,                    transparent 25%, transparent 75%, black 75%, black),linear-gradient(45deg, black 25%, transparent 25%,                      transparent 75%, black 75%, black);background-size: 60px 60px;background-position: 0 0, 30px 30px;}.pt6{background-color:white;background-image: linear-gradient(90deg, rgba(200,0,0,.5)                50%, transparent 50%),linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);background-size:50px 50px;}.pt7{background-color: silver;background-image: linear-gradient(335deg, #b00 23px,                  transparent 23px),linear-gradient(155deg, #d00 23px, transparent 23px),linear-gradient(335deg, #b00 23px, transparent 23px),linear-gradient(155deg, #d00 23px, transparent 23px);background-size: 58px 58px;background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;}.pt8{background:radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px,                 #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,radial-gradient(at 100% 100%,      rgba(96, 16, 48, 0) 9px,           #613 10px, rgba(96, 16, 48, 0) 11px),#8a3;background-size: 20px 20px;}</style>

## 展示效果```纹理效果

使用css3渐变制作纹理效果相关推荐

25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
flash渐变制作烟雾效果
[1b]用渐变制作烟雾[/1b][1b]效果[/1b] [img]/uploads/allimg/100118/2210180.jpg[/img] 这儿有几个制作烟雾的方法,每一种技巧都基于烟雾自已的 ...
使用CSS3阴影制作立体感效果
转载地址:http://gongxinjun.com/blog/1598.html 使用的两个CSS3属性:box-shadow.transform,基本语法: box-shadow box-shad ...
html背景纹理,如何用css3制作纹理背景
如何用css3制作纹理背景看到题目大家也许会想,这是什么意思,一直想系统一下自己的css3的知识,才发现自己对css3的掌握程度简直不敢直视,很多地方都差了好多,暂且一点点来学吧! 记得有一天在微博 ...
【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角在 CSS2 中添加圆角棘手.我们不得不在 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!D ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...

使用css3渐变制作纹理效果

使用css3渐变制作纹理效果

创建结构

写样式

使用css3渐变制作纹理效果相关推荐

最新文章

热门文章