nervouself

《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.






有两个注意点，一是为了让下划线穿过中文字，我把background-position设置为0 0.9em，书上原文0 1.15em，实测1em对于中文字就已经不穿透了，所以直接text-decoration: underline;也没啥的，中文就是省事啊！二是这个样式必须应用到行内元素上，不然是不会自己换行滴！！

## 文字凸起效果

“主要思路就是使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果。”

代码如下：

1
2
3
4
5
6
7
8
9
10
{
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0,0%,85%),
                 0 2px hsl(0,0%,80%),
                 0 3px hsl(0,0%,75%),
                 0 4px hsl(0,0%,70%),
                 0 5px hsl(0,0%,65%),
                 0 5px 10px black;
}


效果如下：

See the Pen text-shadow1 by ShiLei (@nervouself) on CodePen.

碉堡！自己试了下16位差不多是从#ccc到#888，真的不错哦~

复古投影：

See the Pen text-shadow2 by ShiLei (@nervouself) on CodePen.

把所有投影都变成黑色即可！

鼠标光标

cursor

自定义复选框

书上是利用的label的for属性。我表示单个还行，一堆呢？那必不能用一堆id。我之前是用一个元素表示样式，把input设置opacity:0;然后放到样式元素的上面。

阴影弱化背景

可以用遮罩效果弱化背景，我们可以利用box-shadow来达到调暗背景的效果：box-shadow扩张参数可以把元素的投影向各个方向延伸放大。具体做法就是生成一个巨大的投影，不偏移也不模糊，简单而拙劣地模拟出遮罩层的效果：
1vmax相当于1vw和1vh两者中的较大值。100vw等于整
个视口的宽度，100vh就是视口的高度。因此，满足我们需求的最小值就是
50vmax。用以下样式可以达到背景阴影的效果。

1
2
3
{
    box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);
}

由于遮罩层的尺寸是与视口相关，而不是与页面相关的，当我们滚动页面时，遮罩层的边缘就露出来了，除非给它加上position: fixed;这个样式，或者页面并没有长到需要滚动的程度。

模糊弱化背景

除了利用遮罩弱化背景，还可以把把关键元素之外的一切都模糊掉，用来配合（或取代）阴影效果。

1
2
3
4
/* css */
main{
    filter: blur(5px);
}
1
2
3
<!-- html -->
<main> 主要内容 </main>
<dialog> 弹窗 </dialog>

滚动提示

最后得出结论，这个交给APP来实现来实现比较好(●’◡’●)