nervouself

不将就

前段时间在上海市各个角落奔波，从怯懦的应试者心态到成熟自信的谈判者心态，大概花费了两三次面试，以及很多次对自己提问，自己到底擅长什么、想做什么、想去哪个行业、哪个公司最理想。前三个我并没有准确答案，不过对于最后一个问题，我的评判标准是，在我进这家公司之后，任何其他公司摆在我面前我也不会心动，这就是最理想。

《CSS揭秘》读后总结

这本书到现在就看完啦，比起原计划的实践可差了不少 Orz… 但是总之是看完了！实际应用和看书还是差不少，以后还是希望能多多回顾，多多应用才好。看书的态度上还是比较认真，虽然看的慢，但是只要看就好好看，尽量书上的例子都去验证和实践下，写出来的笔记也以记录感受和备忘为主。

把二级目录列在下面，以供回想翻查~~

《CSS揭秘》读书笔记11

缓动效果

这一节主要讲的就是timing-function这个css3动画的动画速度属性的cubic-bezier()的这个函数，这个函数的四个值自己思考出来的还是不精确，我之前都是一点点改里面的数值然后手动运行看效果。书上讲了一堆我已经知道的，但是具体里面这几个值，还是要自己依据效果去调咯~~

逐帧动画

如果我们需要的不是平滑的过渡动画，而是需要动画以逐帧动画的形式来展现，比如我们想播放一个合成为精灵图的动画，那就需要每张图片之间硬切，不能够滚动。css提供了一个steps()函数，来实现以上这种效果。

与贝塞尔曲线调速函数迥然不同的是，steps()会根据你指定的步进数量，把整个动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任何插值处理。

1
2
3
{
    animation: loader 1s infinite steps(8);
}

别忘了 steps() 还接受可选的第二个参数，其值可以是 start 或 end（默认值）。这个参数用于指定动画在每个循环周期的什么位置发生帧的切换动作，但实际上这个参数用得并不多。如果我们只需要一个单步切换效果，还可以使用 step-start 和 step-end 这样的简写属性，它们分别等同于 steps(1, start) 和 steps(1, end)。

想了想，除了播放精灵图，好像也没啥其他用处了，除了设计目的就是为了模拟这种卡顿播放的效果。

《CSS揭秘》读书笔记10

满幅的背景，定宽的内容

需求是这样的，背景沾满屏幕宽度，内容定宽居中。我们一般就准备两层元素：外层用来实现满幅的背景，内层用来实现定宽的内容。后者是通过margin:auto实现水平居中的。

书中希望能够通过一个元素就实现这样的效果（能一个元素实现是好事，但是有时候吧这个作者啊即使花费非常巨大非常麻烦的代价也要追求一个单标签，实现完了还不兼容，有时候我觉得还是要综合下成本，不是在说这一节哦！），用到了calc()这个函数，用padding来实现内容居中，代码如下：

1
2
3
4
5
footer {
    padding: 1em;
    padding: 1em calc(50% - 450px);
    background: #333;
}

第一条padding是为了当浏览器不支持calc()的时候向后兼容，使内容两旁留有空白，书中称其为“一个相对合理的内边距”，但我觉得 1em 还是有点过于小；第二条padding将内容设置为最大 900px 且居中。

《CSS揭秘》读书笔记9

交互式的图片对比控件

想要实现的效果是两张图片堆叠摆放，然后可以通过交互调节两张图片的显示范围，来达到对比的效果。书中第一种方案是利用元素的resize属性，在其中某一张图片包一层用来resize的元素控制显示大小，最终达到目的。代码示例如下：

1
2
3
4
5
6
7
<!-- html -->
<div class="image-slider">
    <div>
        <img src="adamcatlace-before.jpg" alt="Before" />
    </div>
    <img src="adamcatlace-after.jpg" alt="After" />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* css */
.image-slider {
    position:relative;
    display: inline-block;
}
.image-slider > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 50%;
    max-width: 100%;
    overflow: hidden;
    resize: horizontal;
}
.image-slider > div::before {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 12px; height: 12px;
    padding: 5px;
    background:
    linear-gradient(-45deg, white 50%, transparent 0);
    background-clip: content-box;
    cursor: ew-resize;
}
.image-slider img {
    display: block;
    user-select: none;
}

最后的效果并不太好，原生调节柄和自定义调节柄交叉在一起，包裹元素的width:50%和max-width:100%导致chrome下调节显示范围变成了50% - 100%，并不能任意调节了。

《CSS揭秘》读书笔记8

下划线

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 实线 */
{
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 0.9em;
    text-shadow: .05em 0 white, -.05em 0 white;
}
/* 虚线 */
{
    background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
    background-size: .2em 1px;
    background-position: 0 0.9em;
}

效果如下：

See the Pen underline1 by ShiLei (@nervouself) on CodePen.




《CSS揭秘》读书笔记7

连字符断行

1
hyphens: auto;

这一行代码的意思是实现连字符断行，在超长单词需要折行的时候用连字符-来将单词折行并连接，也可以手动输入&shy;来控制浏览器断词。为了确保生效，需要在html的lang属性中指定合适的语言。但实际上，这效果还是不够完美，对中文排版用处也不大。