钉子の次元

Dimpurr – an artist, designer and developer from China.

一个 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 方法敬请告知~

  1. 说道:

    钉子菊苣V587

  2. 7IN0SAN9说道:

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

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

  3. Vespa说道:

    /A这个算学到了~

  4. oott123说道:

    这啥。

  5. Star Brilliant说道:

    四个小点没有看懂……

  6. 小明猪说道:

    棒。。。

  7. 千与琥珀说道:

    神一般的css3….

    1. Dimpurr说道:

      =w= 新技术什么的太棒了~

  8. Kunr说道:

    css很神奇

  9. Leniy说道:

    大家的im等个人介绍页面都好强大啊。比我的好多了

    1. Dimpurr说道:

      你的也挺厉害啊 ……

      1. Leniy说道:

        我的首页中的信息量太少了,只有一个印章能跳转到博客而已

  10. lovee说道:

    菊苣您好这是我的膝盖请收下(泥垢

  11. Dzing说道:

    神级别,酷毙了的div

  12. 南寻说道:

    好厉害的样子~

  13. AkibaRika说道:

    巨巨你好 这里是我的膝盖!

  14. Ricter说道:

    菊苣我的膝盖请收下

    1. Messiah说道:

      惊现RR= =。顺便博主收下我的膝盖!

  15. cry说道:

    嗯,你的部落格真漂亮。

  16. baka343说道:

    菊苣这是我今天的膝盖

  17. xloger说道:

    -,=我果然得花点时间在我blog上了。。。

  18. Tammy是大叔说道:

    釘子果然 V587

  19. 最推荐说道:

    你到网上搜一下CSS 文字路径 ,我记得HTML5+CSS3是能实现文字弯曲显示的

  20. Frantic1048说道:

    Spread Distanc(e) (:з」∠)

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

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

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

    1. Frantic1048说道:

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

      svg标签直接被过滤掉了Σ(っ°Д °;)っ
      为啥不做个转义呢(。・_・。)

      1. Dimpurr说道:

        怪 WordPress 吧 www SVG 确实实时生成各种效果要比 CSS 强大多了~

  21. Menci说道:

    传说中border的妙用…….

  22. 小贱贱说道:

    大神啊 我也是前端开发 现在在学习nodejs

  23. notFound说道:

    请收下我的膝盖

  24. zthxxx说道:

    还可以让他转起来嘛,更有唱片的感觉

  25. zthxxx说道:

    加了两行代码,可以在这儿看转动效果
    http://codepen.io/zthxxx/pen/YpbrVe
    div {
    -webkit-animation:rotate 10s infinite linear;
    }

    @-webkit-keyframes rotate{
    0%{
    -webkit-transform:rotate(0deg);
    }
    100%{
    -webkit-transform:rotate(360deg);
    }
    }

    1. Handle说道:

      新的又一个dalao的回复!