一个 Div 可以做到的 ……

起因是 Cry 姐在群里提到了 box-shaodow 的 Spread Distanc 属性,于是在测试时钉子就想到做了这样一个模拟了一张 CD 的页面。整个页面只用了一个 div 元素,全部效果完全通过 CSS 实现。查看效果→

One-Div-CSS3-CD

One-Div-CSS3-CD

DOM 如下:

<body><div></div></body>

光盘整体通过多 box-shadow 和控制阴影距离以及模糊实现,为了保证透明后配色能看调了半天。上下的文字都通过伪元素添加,其中上方的标题用到了 text-shadow 模拟立体效果。四个小点是利用了 border-image 在 Webkit 下诡异的默认渲染和 linear-gradient 的错误打开方式模拟,在别的内核下貌似没有效果。

Continue reading

カラフルなのダイヤルパッド

大概当时的钉子,还处在非常好的状态。期中考做好历史新低的准备,结果是历史新高;只接过两百元的第一单,然后就接到了一千五的第二单……于是某人果断决定出血一回,稍微慰劳一下自己劳累的心灵——

钉子の无脑购物行为 案发现场底片

钉子の无脑购物行为 案发现场底片

Continue reading