CSS Secrets

原封不动的实现了这本书上面的所有示例，因为作者书中的实例地址是在dabblet.com上，但是该网站很不稳定，经常爆炸，所以就花了一些时间搞了一下（代码基本一致，有些文字我翻译成了中文，同时将图片放在了本地，防止被墙）

这本书是目前为止(2017-7-17)我看过的信息量最大的CSS书籍，强烈推荐有一定CSS基础的前端开发好好研究一下这本书

关于此书

• 英文原版
• 繁体中文版（台湾版）
• 《CSS揭秘》大本营
• 豆瓣
• 亚马逊

目录

和书中的章节顺序保持一致，同时命名也和英文原版保持一致，中间以"-"连接，可以直接点击链接看效果：

背景与边框(Backgrounds & Borders)

• 半透明边框(Translucent borders)
• 多重边框(Multiple borders)
  • box-shadow方案
  • outline 方案
• 灵活的背景定位(Flexible background positioning)
  • background-origin方案
  • background-position方案
  • calc方案
• 边框内圆角(Inner rounding)
• 条纹背景(Striped backgrounds)
  • 斜向条纹
  • 更好的斜向条纹
  • 水平条纹
  • 灵活的同色系条纹
  • 垂直条纹
• 复杂的背景图案(Complex background patterns)
  • 网格
  • 棋盘
  • 棋盘svg
  • 波点
• 伪随机背景(Pseudo random backgrounds)
• 连续的图像边框(Continuous image borders)
  • 连续的图像边框
  • 脚注
  • 蚂蚁行军
  • 老式信封

形状(Shapes)

• 自适应的椭圆(Flexible sllipses)
  • 椭圆
  • 半椭圆
  • 四分之一椭圆
• 平行四边形(Parallelograms)
  • 嵌套元素方案
  • 伪元素方案
• 菱形图片(Diamond images)
  • 裁切路径方案
  • 基于变形的方案
• 切角效果(Cutout corners)
  • 内联SVG与border-image方案
  • 裁切路径方案
  • 渐变方案
  • 弧形切角
• 梯形标签页(Trapezoid tabs)
• 简单的饼图(Simple pie charts)
  • 进度指示器
  • 静态饼图
  • svg方案

视觉效果(Visual Effects)

• 单侧投影(One-sided shadows)
  • 邻边投影
  • 单侧投影
  • 双侧投影
• 不规则投影(Irregular drop shadows)
• 染色效果(Color tinting)
  • 基于滤镜的方案
  • 基于混合模式的方案
• 毛玻璃效果(Frosted glass effect)
• 折角效果(Folded corner effect)
  • 45度折角
  • 其他角度mixin版本
  • 其他角度

字体排印(Typography)

• 连字符断行(Hyphenation)
• 插入换行(Inserting line breaks)
• 文本行的斑马条纹(Zebra-striped text lines)
• 调整tab的宽度(Adjusting tab width)
• 连字(Ligatures)
• 华丽的&符号(Fancy ampersands)
• 自定义下划线(Custom underlines)
  • 虚线
  • 波浪线
• 现实中的文字效果(Realistic text effects)
  • 文字凸起效果
  • 文字外发光效果
  • 凸版印刷效果
  • 空心字效果
• 环形文字(Circular text)

用户体验(User Experience)

• 选用合适的鼠标光标(Picking the right cursor)
• 扩大可点击区域(Extending the clickable area)
  • box-shadow方案
  • 伪元素方案
• 自定义复选框(Custom checkboxes)
  • 复选框
  • 开关式按钮
• 通过阴影来弱化背景(De-emphasize by dimming)
  • box-shadow方案
  • backdrop方案
• 通过模糊来弱化背景(De-emphasize by blurring)
• 滚动提示(Scrolling hints)
• 交互式的图片对比控件(Interactive image comparsion)
  • CSS resize方案
  • 范围输入控件方案

结构与布局(Structure & Layout)

• 自适应内部元素(Intrinsic sizing)
• 精确控制表格列宽(Taming table column widths)
• 根据兄弟元素的数量来设置样式(Styling by sibling count)
• 满幅的背景，定宽的内容(Fluid background,fixed content)
• 垂直居中(Vertical centering)
  • 基于Flexbox
  • 基于绝对定位
  • 基于视口单位
• 紧贴底部的页脚(Sticky footers)
  • 固定高度方案
  • vh+flex方案

过渡与动画(Transitions & Animations)

• 缓动效果(Elastic transitions)
  • 弹跳动画
  • 弹性过渡
• 逐帧动画(Frame-by-frame animations)
• 闪烁效果(Blinking)
• 打字动画(Typing animation)
• 状态平滑的动画(Smooth state animations)
• 沿环形路径平移的动画(Animation along a circular path)
  • 单个元素
  • 两个元素