css3图案库:
http://lea.verou.me/css3patterns/
http://bennettfeely.com/gradients
svg图案库: https://philiprogers.com/svgpatterns/
统计css代码文件体积:http://bytesizematters.com./
半透明边框
背景知识:RGBA/HSLA 颜色
transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值
假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body
的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的:
border: 10px solid hsla(0,0%,100%,.5);
background: white;
但这么写并没有效果,但我们的边框其实是存在的,默认情况下,背景会延伸到边框所在的区域下层。
解决办法:background-clip
这个属性的初始值是border-box
,意味着背景会被元素的 border box
(边框的外沿框)裁切掉。
如果不希望背景侵入边框所在的范围,我们要做
的就是把它的值设为padding-box
,这样浏览器就会用内边距的外沿来把背景裁切掉。
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
image.png
多重边框
背景知识:
box-shadow 的基本用法
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
灵活的背景定位
- background-position 的扩展语法方案
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
- background-origin 方案
background-position 是以 padding box 为准
如果把它的值改成 content-box(参见下面的代码),我们在 background-position 属性中使用的边角关键字将会以内容区的边缘作为基准(也就是说,此时背景图片距离边角的偏移量就跟内边距保持一致了)
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;
- calc() 方案
把背景图片定位到距离底边 10px 且
距离右边 20px 的位置。如果我们仍然以左上角偏移的思路来考虑,其实
就是希望它有一个 100% - 20px 的水平偏移量,以及 100% - 10px 的垂直
偏移量。谢天谢地,calc() 函数允许我们执行此类运算,它可以完美地在
background-position 属性中使用:
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
边框内圆角
box-shadow:<offset-x> <offset-y> <blur> <spread> <color> || <position>
阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;被想象成从元素到阴影的距离;阴影颜色;阴影的位置(inset);
条纹背景
https://jsfiddle.net/noyanse/epzv2doq/18/
因为渐变是一种由代码生成的图像,我们能像对待其他任何背景图像那样对待它,而且还可以通过 background-size 来调整其尺寸
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要
小,则该色标的位置值会被设置为它前面所有色标位置值的最大值。
这意味着,如果我们把第二个色标的位置值设置为 0,那它的位置就
总是会被浏览器调整为前一个色标的位置值
.stripe{
background: linear-gradient(#fb3 50%, #58a 0);//效果和之前一样
background-size: 100% 30px;
}
如果要创建超过两种颜色的条纹,也是很容易的。举例来说,下面的代
码可以生成三种颜色的水平条纹
垂直条纹
.vertical-stripe{
background: linear-gradient(to right, /* 或 90deg */
#fb3 50%, #58a 0);
background-size: 30px 100%;
}
斜条纹
.repeating-stripe{
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);
}
灵活的同色系条纹
.homochromy-stripe{
background: repeating-linear-gradient(30deg,
#79b, #79b 15px, #58a 0, #58a 30px);
}
这个有缺点,就是要改变颜色要改4处,还有更好的方法:把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹:
.homochromy-stripe-better{
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
}
复杂的背景图案
CSS 图案可以算是一个值得使用 CSS 预处理器(比如 Sass,http://sass-lang.com)来减少代码冗余的案例,因为最终图案越复杂,相应的代码就会变得越来越不DRY。
网格
background: white;
background-image: linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
质数是一些整数,除了 1 和自身之外,它们无法被其他任何数字整除。举例来说,最小的10 个质数分别是 2、3、5、7、11、13、17、19、23 和 29。另一方面,相对质数是一种数字之间的关系,而不是单个数字自身的属性。构成相对质数的这些数字没有公约数,但它们自己是可以有多个约数的(比如说,10 和 27 是相对质数,但它们都不是质数)。很显然,一个质数跟其他所有数字都可以构成相对质数。
这个技巧被 Alex Walker 定名为“蝉原则”,他最先提出了通过质数来
增加随机真实性的想法。请注意这个方法不仅适用于背景,还可以用于其他
涉及有规律重复的情况。
- 在照片图库中,为每幅图片应用细微的伪随机旋转效果时,可以使
用多个 :nth-child(a) 选择符,且让 a 是质数。 - 如果要生成一个动画,而且想让它看起来不是按照明显的规律在
循环时,我们可以应用多个时长为质数的动画。(可以在 play.
csssecrets.io/cicanimation 看到一个示例。)
网友评论