代码优化
一个按钮的例子,使其值同比例变化;
button{
color: white;
background: #58a linear-gradient(#77a0bb, #58a);
padding: 6px 16px;
border-radius: 4px;
//由padding+content构成，分别扩展
border: 1px solid #446d88;
font-size: 20px;
line-height: 30px;
//shadow: insert <x/y> <blur> <spread> <color>
box-shadow: 0 1px 5px gray;
text-shadow: 0 -1px 1px #335166;
}
- 让
line-height随着font-size自动变化; - 让
font-size随着其继承的font-size变化而自动变化;
font-size: 125%; /* Assuming a 16px parent font size */
line-height: 1.5;
- 对于大多扩展的值，设置单位
em，使其随着font-size等比变化 - 同时注意一些固定的值,仍使用
px固定;
text-shadow: 0 -.05em .05em #335166;
padding: .3em .8em;
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
text-shadow: 0 -.05em .05em #335166;
- 按钮上设置了多种颜色,之后要修改或重用会变的比较麻烦;
- 为了使颜色更容易变化,把
linear-gradient一种渐变色设置为背景同色，即transparent或者hsla(0,0%,100%,0); - 将阴影颜色统一为
rgba(0,0,0,.5);
background: #58a linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,100%,0));
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
- 重用这个按钮时，只要重新设置
background-color;
一个缩写的例子
border-width: 10px 10px 10px 0;
- 有时候完全的缩写也不一定正确，对于只有单一值的改变更适用形式:
border-width: 10px;
border-left-width: 0;
不要忘记使用继承
ingerit
对于自适应设计的一些建议
- 尽量使用百分比,如果不行的化使用
viewport-relative units; - 当设置固定数值的话，如宽度
,设置max-width取代width`; - 不要忘了给替代元素，如
img, object, video, and iframe.设置百分值的max-width; - 设置背景图时常添加
background-size: cover使图片完全覆盖,但注意对移动设备带宽考虑,并不一定要完全显示整个大图;
背景和边框
制作半透明边框
- 颜色设置使用模糊效果的值
hsl-> hsla, rgb-> rgba; - 例子;
div {
border: 10px solid hsla(0,0%,100%,.5);
background: white;
//默认是border-box,背景包括边框的模式;
background-clip: padding-box;
}
制作多边外框
- 使用
box-shadow,它可以设置多值,也受border-radius影响; - 注意多值的宽度都是重复叠加的,需要叠加计算;
- 注意由于不是真正的边框,会与周边元素叠加,需要额外设置
margin/padding,决定于阴影是否是insert;同时注意margin也是会叠加的; - 注意他不能绑定一些事件，如果很重要，请设置为
insert形式; - 例子
div {
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink;
}
- 使用
outline,它不能设置多值，也不受border-radius影响; - 也需要
margin设置,只能out形式; - 可以额外设置
outline-offset;
div {
background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;
}
更好的设置背景图片位置
- 先用
background总缩写大致确定图片状态与位置;再设置background-position做具体的调整;
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
- 默认的布局下,
background-position是基于padding-box; - 对于移位值相同情况下,修改
background-origin,使用padding替代; - 例子
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* or 100% 100% */
background-origin: content-box;
- 使用
calc()计算横纵坐标位移，它可以混合百分比和具体值计算; - 例子
- 还可以用来剧中位置;
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
设置内部弧度外部直边的方框
- 可以同时设置
border-radius和outline来呈现基本样式; - 此时他们之间会产生空白部分,利用
box-shadow填补; - 取
border-radius长度为r,outline长度为l,填补的长度范围应该在(1.414 - 1)r ～l之间; - 例子
outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
设置条纹背景
- 使用线性渐变
linear-gradient并将值一渐变开始位置比例设为50%；渐变比例为from到to的位置比,第一值to,第二值为from; - 默认是
repeat的，再设置background-size宽度和高度; - 例子
background: linear-gradient(#fb3 50%, #58a 0); //#fb3到.5位置结束,#58a从0位置开始;
background-size: 100% 30px;
-
liner-gradient可以设置多值,两个为一对to,form后者会覆盖前者;
//设置三种颜色
background: linear-gradient(green 33.3%, red 0, red 66.6%, yellow 0);
改变
linear-gradient的方向,设置to left|right|top|bottom或Ndeg的参数;
background: linear-gradient(to right, /* or 90deg */
#fb3 50%, #58a 0);
更复杂的背影样式
设置边框图片背景
- 简单的方法利用两个
div构建一个虚拟的图片边框;
.something-meaningful {
background: url(stone-art.jpg);
background-size: cover;
padding: 1em;
}
.something-meaningful > div {
background: white;
padding: 1em;
}
- 在一个
div设置两个背景层,渐变层和图片背景;用background-clip分别设置剪裁范围; - 设置图片背景的范围;
- 例子
background: linear-gradient(white, white),
url(http://csssecrets.io/images/stone-art.jpg);
background-clip: padding-box, border-box;
background-size: cover;
background-origin: border-box;