一个 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 的错误打开方式模拟,在别的内核下貌似没有效果。

下方的换行尝试用 Unicode 换行符失败,最后在 Cry 姐建议下用 white-space: pre; 加空格模拟成功,最后在 +Kerwin Che 的 建议下 发现只要在 pre 模式下就可以使用 /A 换行了 …… 尝试把 div 元素本身的内容利用起来,但是发现无法完成文字弯曲围绕在光盘内盘的效果只好作罢。暂时就想到了这些玩法,如果还有不破坏美观继续给页面添加元素的纯 CSS 方法敬请告知~

32 thoughts on “一个 Div 可以做到的 ……

  1. 釘子果然 V587
    在下這個苦逼的後台程序猿果真還是老老實實去寫 json、xml 吧……

    “為什麽這個網站我什麼也看不懂?這樣的東西也算是做好了?”
    “你需要一個前端工程師弄一個 gui,然後用 js 什麼的解析 json。嘖,現在的年輕人啊,都不懂 ASCII 藝術。說好的每百行代碼160,快點付錢!”→_→

  2. Spread Distanc(e) (:з」∠)

    折腾文字路径啥的赶脚还是 SVG 比较好使呢,既然是一个 div,那就可以

    background: url(‘data:image/svg+xml;utf8, balabala…… ‘);

    嗯。。。然后内容什么的有多大脑洞开多大就行了(是不是跑题了ˊ_>ˋ

发表评论

邮箱地址不会被公开。 必填项已用*标注