<<CSS揭秘>>摘录

Lea Verou著CSS魔法译的<<CSS揭秘>>是一部不错的CSS技巧书籍。本文简单摘录一些示例和技巧。

背景和边框

1. 半透明边框 (http://play.csssecrets.io/translucent-borders)

border: 10px solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;

2.多重边框 (http://play.csssecrets.io/multiple-borders)

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

//通过outline来实现

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

//outline的好处在于还可以简单实现缝边效果；“边框”不贴合元素的圆角等效果

3.灵活的背景定位(http://play.csssecrets.io/background-origin) 

比较(http://play.csssecrets.io/extended-bg-position) 

4.边框内圆角(http://play.csssecrets.io/inner-rounding)

5.条纹背景()

http://play.csssecrets.io/horizontal-stripes

http://play.csssecrets.io/vertical-stripes

http://play.csssecrets.io/diagonal-stripes

http://play.csssecrets.io/diagonal-stripes-60deg

http://play.csssecrets.io/subtle-stripes

6.复杂的背景图案

http://play.csssecrets.io/blueprint

http://play.csssecrets.io/polka

http://play.csssecrets.io/checkerboard-svg

7.伪随机背景(http://play.csssecrets.io/cicada-stripes)

http://play.csssecrets.io/cicanimation

8.连续的图像边框

http://play.csssecrets.io/continuous-image-borders

http://play.csssecrets.io/vintage-envelope

http://play.csssecrets.io/marching-ants

http://play.csssecrets.io/footnote

 

形状

9.自适应的椭圆

http://play.csssecrets.io/ellipse

http://play.csssecrets.io/half-ellipse

http://play.csssecrets.io/quarter-ellipse

10.平行四边形

http://play.csssecrets.io/parallelograms

http://play.csssecrets.io/parallelograms-pseduo

11.菱形图片

http://play.csssecrets.io/diamond-images

http://play.csssecrets.io/diamond-clip

12.切角效果

http://play.csssecrets.io/bevel-corners-gradients

http://play.csssecrets.io/scoop-corners

http://play.csssecrets.io/bevel-corners

http://play.csssecrets.io/bevel-corners-clipped

13.梯形标签页

http://play.csssecrets.io/trapezoid-tabs

14.简单的饼图

http://play.csssecrets.io/pie-animated

http://play.csssecrets.io/pie-static

http://play.csssecrets.io/pie-svg

 

视觉效果

15.单侧投影

http://play.csssecrets.io/shadow-one-side

http://play.csssecrets.io/shadow-2-sides

http://play.csssecrets.io/shadow-opposite-sides

16.不规则投影

http://play.csssecrets.io/drop-shadow

17.染色效果

http://play.csssecrets.io/color-tint-filter

http://play.csssecrets.io/color-tint

18.毛玻璃效果

http://play.csssecrets.io/frosted-glass

19.折角效果

http://play.csssecrets.io/folded-corner

http://play.csssecrets.io/folded-corner-realistic

http://play.csssecrets.io/folded-corner-mixin

 

 

字体排印

20.连字符断行

http://play.csssecrets.io/hyphenation

21.插入换行

http://play.csssecrets.io/line-breaks

22.文本行的斑马条纹

http://play.csssecrets.io/zebra-lines

23.调整tab的宽度

http://play.csssecrets.io/tab-size

24.连字

http://play.csssecrets.io/ligatures

25.华丽的&符号

http://play.csssecrets.io/ampersands

26.自定义下划线

http://play.csssecrets.io/underlines

http://play.csssecrets.io/wavy-underlines

27.现实中的文字效果

凸版印刷效果 http://play.csssecrets.io/letterpress

空心字效果 http://play.csssecrets.io/stroked-text

文字外发光效果 http://play.csssecrets.io/glow

文字凸起效果 http://play.csssecrets.io/extruded

28.环形文字

http://play.csssecrets.io/circular-text

 

用户体验

29.选用合适的鼠标光标

http://play.csssecrets.io/disabled

30.扩大可点击区域

http://play.csssecrets.io/hit-area

31.自定义复选框

http://play.csssecrets.io/checkboxes

http://play.csssecrets.io/toggle-buttons

32.通过阴影来弱化背景

http://play.csssecrets.io/dimming-box-shadow

http://play.csssecrets.io/native-mode

33.通过模糊来弱化背景

http://play.csssecrets.io/deemphasizing-blur

34.滚动提示

http://play.csssecrets.io/scrolling-hints

35.交互式的图片对比控件

http://play.csssecrets.io/image-slider

 

结构与布局

36.自适应内部元素

http://play.csssecrets.io/intrinsic-sizing

http://w3.org/TR/css3-sizing

37.精确控制表格列宽

http://play.csssecrets.io/table-column-widths

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

http://play.csssecrets.io/styling-sibling-count

39.满幅的背景，定宽的内容

http://play.csssecrets.io/fluid-fixed

40.垂直居中

http://play.csssecrets.io/vertical-centering-abs

http://play.csssecrets.io/vertical-centering-vh

http://play.csssecrets.io/vertical-centering

41.紧贴底部的页脚

http://play.csssecrets.io/sticky-footer-fixed

http://play.csssecrets.io/sticky-footer

http://w3.org/TR/css-flexbox

http://w3.org/TR/css-values

 

 

过渡与动画

42.缓动效果

http://play.csssecrets.io/bounce

http://play.csssecrets.io/elastic

43.逐帧动画

http://play.csssecrets.io/frame-by-frame

http://w3.org/TR/css-animations

44.闪烁效果

http://play.csssecrets.io/blink

45.打字动画

http://play.csssecrets.io/typing

46.状态平滑的动画

http://play.csssecrets.io/state-animations

47.沿环形路径平移的动画

http://play.csssecrets.io/circular-2elements

http://play.csssecrets.io/circular