css揭秘读书笔记

前端 , , 评论

CSS揭秘

编码技巧

用到的工具函数$$()

1
2
3
4
5
function $$(selector,context){
    context = context||document;
    var elements = context.querySelectorAll(selector);
    return Array.prototype.slice.call(elements);
}

w3c官网

层叠与继承

  • 尽量减少代码重复
    • 使用em单位，只在一处修改就可以改变所有元素的大小。
    • 继承 inherit：绑定父元素的值color:inherit
    • 在较大分辨率下得到固定长度时，使用max-width代替width.
    • 使用多列文本时，指定column-width代替column-count（列数）

背景与边框

半透明边框

背景与边框

1
2
3
4
用内边距的外沿把背景裁切掉        
border:10px solid hsla(0,0%,100%,5);       
background:red;
background-clip: padding-box;

多重边框

box-shadow可以不断叠加

1
2
3
4
background:yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);

使用outline

1
2
3
background:yellowgreen;
border: 10px solid #655;
outline:5px solid deeppink;

(! outline不会贴合元素的圆角)

灵活的背景定位

背景偏移：设定偏移的位置和量

如下代码：与右边保持20px偏移量，与下边保持20px偏移量

1
background-position:right 20px bottom 20px;

一般情况下，background-position以padding-box为准

用background-origin:content-box也能实现。

或者使用calc() : background-position:calc(100%-20px) calc(100%-20px) 从左上角偏移的角度考虑：有100%-20px的水平偏移量，100%-20px的垂直偏移量

边框内圆角

容器外围有一道边框，只在内侧有圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div class="a">
     <div class="b">
         yuki
     </div>
</div>

<style>
    .a{
        background: #655;
        padding:.8em;
    }
    .a > div{
        background:tan;
        border-radius: .8em;
        padding:1em;
    }
</style>

or

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="a">
    yuki
</div>

<style>
    .a{
        background:tan;
        border-radius: .8em;
        padding:1em;
        box-shadow: 0 0 0 .6em #655;
        outline: .6em solid #655;
    }
</style>

通过勾股定理，计算圆角、阴影和边框的值

条纹背景

水平条纹

线性渐变background:linear-gradient(#fb3,#58a);

没有渐变的实色background:linear-gradient(#fb3 50%,#58a 50%);

重复，则可得到条纹背景

1
2
background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6% ,yellowgreen 0);
background-size: 100% 45px;

垂直条纹

1
2
3
4
5
.a{
background:linear-gradient(to right,#fb3 33.3%,#58a 0,#58a 66.6% ,yellowgreen 0);
background-size:30px 100% ;
padding: 200px;
}

斜向条纹

1
background:repeating-linear-gradient(30deg,#fb3,#fb3 15px, #58a 0,#58a 30px);

复杂的背景图案

方格纹

1
2
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;

波点

1
2
3
4
5
6
.a{
    background:#655;
    background-image: 
    radial-gradient(tan 30%,transparent 0);
    background-size: 30px 30px;
}
1
2
3
4
5
6
7
8
.a{
    background:#655;
    background-image: 
    radial-gradient(tan 30%,transparent 0),
    radial-gradient(tan 30%,transparent 0);
    background-size: 30px 30px;/*宽高*/
    background-position: 0 0,15px 15px;  /*背景偏移必须是宽高的一半*/
}

棋盘

  • 三角形

    1
    2
    3
    4
    5
    6
    7
    .a{
        background:#eee;
        background-image: 
        linear-gradient(45deg,#bbb 25%,transparent 0);
        background-size: 30px 30px;
        
    }

  • 棋盘

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .a{
        padding: 200px;
        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;
        
    }

伪随机边框

1
2
3
4
5
6
.a{
    padding: 200px;
    background: hsl(20,40%,90%);
    background-image: linear-gradient(90deg,#fb3 11px,transparent 0),linear-gradient(90deg,#ab4 23px,transparent 0),linear-gradient(90deg,#655 41px,transparent 0);
    background-size: 80px 100%,60px 100%,40px 100%;
}

蝉原则：

  • 使用质数增加随机性

《蝉原则在网页设计中的重要性》

形状

自适应的椭圆

圆形

1
2
3
4
5
6
.a{
    background: #fb3;
    width: 200px;
    height: 200px;
    border-radius: 100px;/*正方形边长的一半*/
}

椭圆

1
2
3
4
5
6
.a{
    background: #fb3;
    width: 400px;
    height: 200px;
    border-radius:50% / 50%;/*长宽的一半*/
}

半椭圆

1
2
3
4
5
border-radius:50% / 100% 100% 0 0 ;

border-radius: 100%  0 0 100%/50%;

border-radius: 100%  0 0 0;

平行四边形

使用skew()的变形属性来对矩形进行斜向拉伸。transform:skewX(-45deg).为防止内容的斜向变形，还要在元素内部反向变形。

1
2
3
4
5
6
7
8
9
10
11
12
.a{
    position: relative;
    width: 100px;
}
.a::before{
    content:'';
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

菱形图片

1
2
3
4
5
6
7
8
9
.picture{
    width:400px;
    transform:rotate(45deg);
    overflow:hidden;
}
.picture > img{
    max-width: 100%;
    transform:rotate(-45deg) scale(1.42);
}

or

1
2
3
4
5
6
7
img{
    clip-path: polygon(50% 0, 100% 50%,50% 100%,0 50%);
    transition: 1s clip-path;
}
img:hover{
    clip-path: polygon(0 0 ,100% 0, 100% 100%,0 100%);
}

切角效果

四边切角

1
2
3
4
5
6
7
8
9
10
.a{
    background:#58a;
    background:
    linear-gradient(135deg,transparent 15px,#58a 0)top left,
    linear-gradient(-135deg,transparent 15px,#58a 0)top right,
    linear-gradient(-45deg,transparent 15px,#58a 0)bottom right, 
    linear-gradient(45deg,transparent 15px,#58a 0)bottom left; 
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

两边切角

1
2
3
4
5
6
7
8
9
.a{
    padding:100px;
    background:#58a;
    background:
	linear-gradient(-45deg,transparent 15px,#58a 0)bottom right, 
    linear-gradient(45deg,transparent 15px,#58a 0)bottom left; 
    background-size: 50% 100%;
    background-repeat: no-repeat;
}

弧形切角

1
2
3
4
5
6
7
8
9
10
11
12
.a{
    padding:100px;
    background:#58a;
    background:
    radial-gradient(circle at top left,transparent 15px,#58a 0)top left,
    radial-gradient(circle at top right,transparent 15px,#58a 0)top right,
    radial-gradient(circle at bottom right,transparent 15px,#58a 0)bottom right,
    radial-gradient(circle at bottom left,transparent 15px,#58a 0)bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

梯形标签页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
nav > a{
    position: relative;
    display: inline-block;
    padding: .3em 1em 0;
}

nav > a::before{
    content:'';
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
    z-index:-1;
    background: #ccc;
    background-image: linear-gradient(
        hsla(0,0%,100%,.6),
        hsla(0,0%,100%,0)
    );
    border: 1px solid rgba(0,0,0,.4);
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    box-shadow: 0 .15em white inset;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin:bottom;
}

视觉效果

单侧投影

  • 单侧投影

    box-shadow: 水平偏移量，垂直偏移量，投影长度，扩张半径，颜色;当扩张半径为负的投影长度时，则可达到隐藏效果，只显示其中一条投影

    • 只有底边有投影： box-shadow: 0 5px 4px -4px Black;
    • 只有右边有投影box-shadow: 5px 0 4px -4px Black;

  • 邻边投影

    • box-shadow: 水平偏移量，垂直偏移量，投影长度，扩张半径，投影颜色;水平偏移量和垂直偏移量要大于模糊半径的一半
    • box-shadow: 5px 5px 8px -4px Black;

  • 双侧投影

    • 投影设置在对边
    • 将单侧投影设置两次
    • box-shadow: 5px 0 5px -5px Black,-5px 0 5px -5px Black;

不规则投影

滤镜效果规范

染色效果

1
2
3
4
5
6
7
img{
    transition:.5s filter;
    filter:sepia(1) saturate(4) hue-rotate(295deg);
}
img:hover,img:focus{
    filter: none;
}

or

1
2
3
4
5
6
7
a{/*使用超链接包裹图片*/
    background:hsl(335, 100%,50%)

}
img{
    mix-blend-mode: luminosity;
}

毛玻璃效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body,main::before{
    background:url("fw.png") 0 / cover fixed;
}
main{
    position:relative;
    background: hsla(0, 0%, 100%, .3);
    overflow:hidden;
}
main::before{
    content: '';
    position: absolute;
    top:0;right: 0;bottom:0;left:0;
    filter: blur(20px);
    margin: -30px;
}

折角效果

1
2
3
4
5
6
7
.a{
    padding: 200px;
    background:#58a;
    background:
    linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg,transparent 1.5em,#58a 0);
}

字体排印

连字符断行

插入换行

文本行的斑马条纹

调整tab的宽度

连字

华丽的&符号

自定义下划线

现实中的文字效果

环形文字

用户体验

选用合适的鼠标光标

扩大可点击区域

自定义复选框

通过阴影柔化背景

通过模糊弱化背景

滚动提示

交互式图片对比控件

结构与布局

自定义内部元素

精确控制表格列宽

根据兄弟元素的数量设置样式

满幅的背景，定宽的内容

垂直居中

紧贴底部的页脚

过渡与动画

缓动效果

逐帧动画

闪烁效果

打字动画

状态平滑的动画

沿环形路径平移的动画

YukiXueyan一只前端咸鱼酱

满怀希望就会所向披靡