赞
踩
献上膝盖就好
错误的写法:
div {
background-color: white;
border: 10px solid hsla(0, 0%, 100%, .5);
}
错误的原因很简单,因为默认情况下,背景是会包含边框的,背景的白色已经把半透明的边框覆盖了,所有看不见,因此使用background-clip属性进行裁剪。
正确写法:
/** * Translucent borders */ body { background-color: #000; } div { border: 10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; /*从padding开始往外面裁剪背景*/ /* styling */ max-width: 20em; padding: 2em; margin: 2em auto 0; font: 100%/1.5 sans-serif; }
效果
思路:使用box-shadow来创建多个看起来和边框没区别的阴影。box-shadow的第四个参数表示阴影面积的加大或者减小,两个为0的偏移和模糊为0的阴影实际上就是一道“边框”。
code:
/**
* Multiple borders
*/
div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
} /*甚至可以控制边框的大小*/
效果图
如果使用两层边框,还有更好的解决方案:
使用outline描边的方法,给border描边。
code
/** * Multiple borders */ div:nth-child(1) { width: 100px; height: 60px; margin: 25px; background: yellowgreen; border: 10px solid #655; outline: 5px solid deeppink; } div:nth-child(2) { width: 100px; height: 60px; margin: 25px; background: #ccc; border: 2px solid #655; outline: 1px dashed #000; outline-offset: -10px; /*指定描边的偏移,非常灵活,这里形成了一个缝边的效果*/ }
效果
目标:把背景图片定位到距离底部10px,右边20px的位置。
code1:
background-position: right 20px bottom 10px;
code2:
background-position: calc(100% - 20px) calc(100% - 10px);
/*操作符左右必须要有空格*/
code3:
padding-right: 20px;
padding-bottom: 10px;
background-origin: content-box;
/*修改右下角的位置,使得图片对齐的是content-box的右下角而不是默认的padding-box的右下角*/
code
<div class="father">
<div>Xiaoshulin</div>
</div>
/** * Inner rounding */ .father { width: 200px; background: #655; padding: .8em; } .father div { background: tan; border-radius: .8em; padding: 1em; text-align: center; }
效果
简单的条纹背景可以使用渐变(linear-gradient)来生成(本质是背景图片),指定颜色的百分数位置来确定界限,然后使用background-size来调整渐变图像的平铺方式,因为默认是采用重复平铺,所以最后会生成条纹。
其中,使用 to-left, to-top, to-right, to-bottom参数可以指定渐变的方向,也就是条纹的方向。
div:nth-child(1) { width: 200px; height: 100px; margin: 10px; background: linear-gradient(#fb3, #58a); } div:nth-child(2) { width: 200px; height: 100px; margin: 10px; background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px; } div:nth-child(3) { width: 200px; height: 100px; margin: 10px; background: linear-gradient(to right, #fb3 30%, #58a 50%); background-size: 30px 100%; } div:nth-child(4) { width: 200px; height: 100px; margin: 10px; background: linear-gradient(red 0, red 33.3%, green 33.3%, green 66.6%, yellow 66.6%, yellow 100%); background-size: 100% 30px; }
效果图
比较简单的一些例子(45度)
div:nth-child(1) {
width: 200px;
height: 200px;
margin: 10px;
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 40px 40px;
}
div:nth-child(2) {
width: 200px;
height: 200px;
margin: 10px;
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
}
效果
更好的方法(适用于更多的情况):
repeating-linear-gradient(),它可以一直无限重复循环渐变知道铺满整个背景,简直就是为了条纹图案而生。
div:nth-child(1) {
width: 300px;
height: 200px;
margin: 10px;
background: repeating-linear-gradient(60deg, red 0, red 15px, blue 0, blue 30px, green 0, green 45px);
}
效果
/*同色系的条纹建议使用半透明的白色叠加而不是指定具体的颜色,符合DRY原则。*/
div:nth-child(1) {
width: 300px;
height: 200px;
margin: 10px;
background-color: #58a;
background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);
}
效果
code:
/** * Multiple borders */ div { display: inline-block; } div:nth-child(1) { width: 100px; height: 60px; margin: 25px; background: yellowgreen; border: 10px solid #655; outline: 5px solid deeppink; } div:nth-child(2) { width: 100px; height: 60px; margin: 25px; background: #ccc; border: 2px solid #655; outline: 1px dashed #000; outline-offset: -10px; /*指定描边的偏移,非常灵活,这里形成了一个缝边的效果*/ } div:nth-child(3) { width: 200px; height: 100px; margin: 10px; background: linear-gradient(#fb3, #58a); } div:nth-child(4) { width: 200px; height: 100px; margin: 10px; background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px; } div:nth-child(5) { width: 200px; height: 100px; margin: 10px; background: linear-gradient(to right, #fb3 30%, #58a 50%); background-size: 30px 100%; } div:nth-child(6) { width: 200px; height: 100px; margin: 10px; background: linear-gradient(red 0, red 33.3%, green 33.3%, green 66.6%, yellow 66.6%, yellow 100%); background-size: 100% 30px; } div:nth-child(7) { width: 200px; height: 200px; margin: 10px; background: linear-gradient(45deg, #fb3 50%, #58a 0); background-size: 40px 40px; } div:nth-child(8) { width: 200px; height: 200px; margin: 10px; background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0); background-size: 30px 30px; } div:nth-child(9) { width: 300px; height: 200px; margin: 10px; background: repeating-linear-gradient(60deg, red 0, red 15px, blue 0, blue 30px, green 0, green 45px); } /*同色系的条纹建议使用半透明的白色叠加而不是指定具体的颜色,符合DRY原则。*/ div:nth-child(10) { width: 300px; height: 200px; margin: 10px; background-color: #58a; background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px); }
总的效果图片:
使用CSS渐变来创建任何种类的几何图片都是有可能的。
使用单一的CSS渐变通常很难是图案复杂,但是使用多个渐变图案组合起来,就可以产生很多的可能。
code:
div { width: 300px; height: 300px; border: 3px solid #000; display: inline-block; margin: 5px; } div:nth-child(1) { background: white; background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0); background-size: 30px 30px; } div:nth-child(2) { background: white; background-image: linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0); background-size: 30px 30px; } div:nth-child(3) { 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; /*一行10个*/ }
效果
指定固定大小粗细的网格线(使用像素而不是百分数)
div:nth-child(4) {
/*固定粗细的网格线*/
background: skyblue;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0);
background-size: 30px 30px;
}
效果
使用径向渐变工具可以创建美丽的波点图案。
/*径向渐变创建图案*/ div:nth-child(5) { background: #655; background-image: radial-gradient(15px, tan 100%, transparent 0); background-size: 30px 30px; } div:nth-child(6) { /*这里的背景偏移必须是贴片大小尺寸的一半*/ background: #655; background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0); /*第一个保持不变,第二个偏移15px*/ background-position: 0 0, 15px 15px; background-size: 30px 30px; }
效果
为了代码的可维护性,书中推荐使用SCSS预处理size大小。
创建可复用形式的style:
@mixin polka($siz3, $dot, $base, $accent) {
background: $base;
background-image: radial-gradient($accent $dot, transparent 0),
radial-gradient($accent $dot, transparent 0);
background-size: $size $size;
background-position: 0 0, $size/2 $size/2;
}
使用:
div {
@include polka(30px, 30%, #655, tan);
}
制造棋盘的关键在于使用三角形的拼凑和位移,只使用一种线性渐变是无法完成任务的。
首先需要得到三角形:
div {
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
}
然后在对两张图片进行偏移操作:
div:nth-child(8) {
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
得到正方形:
然后复制一份,进行偏移就可以了。
div { background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0); background-position: 0 0, 15px 15px, 15px 15px, 30px 30px; background-size: 30px 30px; } /*另外一种比较简单的写法,把上面两个渐变合并一下*/ div { background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 75%), linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 75%); background-position: 0 0, 15px 15px; background-size: 30px 30px; } /*使用角向渐变*/ div { background: repeating-conic-gradient(#bbb 0,#bbb 25%, #eee 25%, #eee 50%); background-size: 30px 30px; }
最后的效果:
div { width: 300px; height: 300px; border: 3px solid #000; display: inline-block; margin: 5px; } div:nth-child(1) { background: white; background-image: linear-gradient( 90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0 ); background-size: 30px 30px; } div:nth-child(2) { background: white; background-image: linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0); background-size: 30px 30px; } div:nth-child(3) { background: white; background-image: linear-gradient( 90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0 ), linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0); background-size: 30px 30px; /*一行10个*/ } div:nth-child(4) { /*固定粗细的网格线*/ background: skyblue; background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0); background-size: 30px 30px; } /*径向渐变创建图案*/ div:nth-child(5) { background: #655; background-image: radial-gradient(15px, tan 100%, transparent 0); background-size: 30px 30px; } div:nth-child(6) { /*这里的背景偏移必须是贴片大小尺寸的一半*/ background: #655; background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0); background-position: 0 0, 15px 15px; background-size: 30px 30px; } div:nth-child(7) { background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0); background-size: 30px 30px; } div:nth-child(8) { background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0); background-position: 0 0, 15px 15px; background-size: 30px 30px; } div:nth-child(9) { background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0); background-position: 0 0, 15px 15px, 15px 15px, 30px 30px; background-size: 30px 30px; } div:nth-child(10) { background: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 75%), linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 75%); background-position: 0 0, 15px 15px; background-size: 30px 30px; } div:nth-child(11) { /*角向渐变*/ background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red); } div:nth-child(12) { background: repeating-conic-gradient(#bbb 0,#bbb 25%, #eee 25%, #eee 50%); background-size: 30px 30px; }
总的效果图
更多牛逼的图案参考,其中有使用了强大的位图技术:CSS3 Patterns Gallery, 还有就是使用混合模式的图案库Bennett Feely的图案库。
当你注意到一个有辨识度的特征时,在以固定的规律重复时,那么它试图营造的自然随机性就会瞬间崩塌。 —— Alex Walker,《禅原则对于网页设计的重要性》
因此,对于图片的平铺方式应该尽量维持良好的自然随机性,而不是非常明显的单调的重复平铺,就好像下面的花海,虽然花朵一直在重复,但是没有两朵花是一模一样的。
先看一下单调的明显的条纹
div {
background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;
}
眼睛明显对于颜色更加敏感,所以我们想要的只是颜色的重复而并非颜色出现的规律,这里有一个很妙的想法:使用叠加的效果,控制条纹的大小来产生随机的效果。
那么问题就是条纹大小的选择怎么选?
禅原则:质数增加随机性。
div {
/*都是用质数作为条纹的大小和背景图片的大小*/
background: linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;
}
效果
数学上的解释为,重复出现的位置刚好就是条纹大小的最小公倍数,那么为了尽可能增加最小公倍数,最快的方法就是使用互质的数。
这个原则不仅仅对于背景适用,对于很多需要伪随机的场景下,都可以考虑这一点。
随机动画:质数时长的连续动画;
给每一张图片做细微的伪旋转效果:质数间隔的图片做一个微旋转。
可能对于大多数人实现的方法是border-image属性,但是border-image是基于九宫格的放缩来实现的,具体的实现可以去搜,最后的结果就是边框始终是图片的边缘,所以border-image适用于那些体现边缘内容不变的情况。我们想要的有时候并不是一张图片的一部分,而是随着内容的大小变化,边框的内容也会相应发生改变。然而这个是border-image做不到的。
其实使用两个元素的方法可以实现:
<div class="test">
<div>
Hello World!
</div>
</div>
.test { display: flex; background: linear-gradient(red, blue); background-size: cover; padding: 1em; } .test > div { width: 100%; height: 400px; font-family: Courier New; font-size: 20px; font-weight: bold; text-align: center; line-height: 400px; background: white; padding: 1em; }
效果
那么如果使用一个元素如何完成?
思路其实不难,主要是使用“多重背景”和“背景裁剪”的搭配来完成。
下面来做一个信封的边框:
用一个白色背景掩盖padding-box的部分,用一张图片掩盖border-box的部分,从而图片的部分只会在border体现出来。
div {
width: 1000px;
height: 500px;
padding: 1em;
font: italic bold 30px Lora;
text-align: center;
line-height: 500px;
border: 1em solid transparent;
background: linear-gradient(white, white),
repeating-linear-gradient(-45deg, red 0, red 12.5%,
transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%);
background-clip: padding-box, border-box;
background-size: 500px 100%;
background-origin: border-box;
}
效果:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。