31-自定义复选框
介绍：为了满足设计师的审美要求，我们需要提供复选框的自定义实现方案
<input type="checkbox" id="awesome" autofocus /> <label for="awesome">Awesome!</label> <input type="checkbox" id="awesome2" checked /> <label for="awesome2">Awesome!</label> <input type="checkbox" id="awesome3" disabled /> <label for="awesome3">Awesome!</label> <input type="checkbox" id="awesome4" checked disabled /> <label for="awesome4">Awesome!</label> /** * Custom checkboxes */ input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0); } input[type="checkbox"] + label::before { content: '\a0'; display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .2em; border-radius: .2em; background: silver; text-indent: .15em; line-height: .65; } input[type="checkbox"]:checked + label::before { content: '\2713'; background: yellowgreen; } input[type="checkbox"]:focus + label::before { box-shadow: 0 0 .1em .1em #58a; } input[type="checkbox"]:disabled + label::before { background: gray; box-shadow: none; color: #555; cursor: not-allowed; } body { font: 150%/1.6 sans-serif; }
32-通过阴影来弱化背景
背景知识：RGBA 颜色
介绍：通过遮罩层来弱化背景，很常见，但不完美之处在于需要额外的 HTML 元素，虽不是啥大问题，不过我们确实可以通过其他方法来摆脱这个麻烦。
box-shadow 方案
<img src="https://cdn.pixabay.com/photo/2014/12/16/22/25/woman-570883__480.jpg" class="lightbox" /> <p>Bacon ipsum dolor amet consectetu..........</p> /** * Rudimetary overlay with box-shadow */ .lightbox { position: fixed; top: 50%; left: 50%; margin: -200px; box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); }
backdrop 原生方案
可改样式，兼容性不好，注意⚠️
/** * Native modal dialog (limited support) */ dialog::backdrop { background: rgba(0,0,0,.8) }
33-通过模糊来弱化背景
背景知识：过渡动画，“毛玻璃效果”，“通过阴影来弱化背景”
介绍：通过背景虚化的原理，比上面通过阴影更能打造真实的效果，主要是通过滤镜、高斯模糊来实现的，通常叫这个毛玻璃效果。
<dialog>O HAI, I’m a dialog. Click on me to dismiss.</dialog> <main> <button>Show dialog</button> <p>Bacon ipsum dolor sit amet consectetur</p> </main> /** * De-emphasizing by blurring (AND dimming) */ main { transition: .6s; background: white; } main.de-emphasized { -webkit-filter: blur(3px); filter: blur(3px); } dialog { position: fixed; top: 50%; left: 50%; z-index: 1; width: 10em; padding: 2em; margin: -5em; border: 1px solid silver; border-radius: .5em; box-shadow: 0 .2em .5em rgba(0,0,0,.5), 0 0 0 100vmax rgba(0,0,0,.2); } dialog:not([open]) { display: none; } body { font: 150%/1.6 Baskerville, Palatino, serif; }
34-滚动提示
背景知识：css 渐变， background-size
介绍：一种相比原生浏览器滚动条来说，更加优雅的滚动提示效果，当可滚动时，显示上下阴影效果。
<!-- Geeky cat names! --> <ul> <li>Ada Catlace</li> <li>Alan Purring</li> <li>Schrödingcat</li> <li>Tim Purrners-Lee</li> <li>Webkitty</li> <li>Json</li> <li>Void</li> <li>Neko</li> <li>NaN</li> <li>Cat5</li> <li>Vector</li> </ul> /** * Scrolling hints */ ul { display: inline-block; overflow: auto; width: 7.2em; height: 7em; border: 1px solid silver; padding: .3em .5em; list-style: none; margin-top: 2em; font: 100 200%/1.6 'Frutiger LT Std', sans-serif; background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px, radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px, linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px, radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px; background-repeat: no-repeat; background-attachment: local, scroll, local, scroll; margin-top: 30px; }
35-交互式的图片对比控件
背景知识：resize 属性
介绍：有时我们需要展示两张图片的外观差异，最常见的解决方案就是两张图片并排放置，然而这样人眼只能观察到非常明显的差异，从而忽略掉相对细小的区别。
还有一种更友好的解决方案业界叫做“图片对比滑动控件”，这个控件会把两张图片叠加起来，允许用户拖动分割条来控制这两张图片的显露区域，不过通常这种控件都需要依 赖 javascript 框架外加一大块 javascript 代码。 此书的亮点在于使用 纯 css 实现了这个控件。
<div class="image-slider"> <div><img src="http://placekitten.com/200/300" alt="Before" /></div> <img src="http://static.runoob.com/images/demo/demo2.jpg" /> </div> /** * Interactive image comparison - with CSS resize */ .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; right: 0; bottom: 0; width: 12px; height: 12px; padding: 5px; background: linear-gradient(-45deg, white 50%, transparent 0); background-clip: content-box; cursor: ew-resize; -webkit-filter: drop-shadow(0 0 2px black); filter: drop-shadow(0 0 2px black); } .image-slider img { display: block; user-select: none; }
