爱意满满的作品展示区。
shuding

JS 模拟的 OS X Dock 效果

  •  1
     
  •   shuding ·
    shuding · Oct 22, 2014 · 5931 views
    This topic created in 4395 days ago, the information mentioned may be changed or developed.
    以及一个 Menu bar 和 Finder(Finder 的 CSS 是别人的作品,其余自造)~

    半年前写的,欢迎围观 / 拍砖~

    http://shud.in/cssosx/
    Supplement 1  ·  Oct 22, 2014
    对了另外,这货 http://shud.in/coverflow/ 也是一个仿 OS X 的效果 > <
    33 replies  •  2014-10-23 17:16:08 +08:00
    ozking
    ozking
    Oct 22, 2014
    1
    也蛮拼的
    cougar
    cougar
    Oct 22, 2014
    2
    还以为那个文件夹可以点的,。。。。
    ariestiger
    ariestiger
    Oct 22, 2014
    3
    哈哈,Finder左上角的前进后退没有对齐
    kokdemo
    kokdemo
    Oct 22, 2014
    4
    我这里在左下角有个bug
    yangg
    yangg
    Oct 22, 2014
    5
    Dock里鼠标移到Finder图标上时,可以明显的看到App Store等图标的锯齿(应该是,反正不是好效果),是加了什么效果呢?
    shuding
    shuding
    OP
    Oct 22, 2014
    6
    @yangg 我感觉是 Chrome 渲染的原因,当图标缩小后也有些锯齿,但是等待一秒左右就正常了……
    likid
    likid
    Oct 22, 2014
    7
    Finder icon 没有高亮的点。Dock 上没有 icon 镜像
    shuding
    shuding
    OP
    Oct 22, 2014
    8
    @kokdemo 咦,是在 Chrome 下么 0 0
    lausius
    lausius
    Oct 22, 2014❤️1
    9
    貌似firefox下没有显示居中,但是在chrome下图标有明显锯齿,firefox下没有。
    shuding
    shuding
    OP
    Oct 22, 2014
    10
    @ariestiger
    @cougar

    Finder 来自这儿: http://codepen.io/paddykontschak/pen/JALeB

    我就加了个 drag 效果,有空改改吧 > <
    jings
    jings
    Oct 22, 2014
    11
    mark 仅仅是喜欢
    @shuding 可以自定义不错不错。。。
    shuding
    shuding
    OP
    Oct 22, 2014
    12
    @lausius 谢谢,FF 的问题刚刚弄好了 > <
    shuding
    shuding
    OP
    Oct 22, 2014
    13
    @jings thx!
    Actrace
    Actrace
    Oct 22, 2014
    14
    现在已经10.10了...跟上潮流啊...
    lovexisen
    lovexisen
    Oct 22, 2014
    15
    谢谢;
    可以感受下苹果机
    lausius
    lausius
    Oct 22, 2014
    16
    @shuding ……还有一个,firefox下音量控制显示不是竖向而是横向的。
    panxianhai
    panxianhai
    Oct 22, 2014
    17
    赞,还有很多可以改进的地方,比如通知中心。
    popbones
    popbones
    Oct 22, 2014
    18
    做这个类直接用Objective J比较好吧
    chairuosen
    chairuosen
    Oct 22, 2014
    19
    #settings:before{content:"⚙"}
    服了。。。我以为css画的呢,那么精细
    shuding
    shuding
    OP
    Oct 22, 2014
    20
    @popbones 第一次听说 Objective-J……受教了!我去看看。
    shuding
    shuding
    OP
    Oct 22, 2014
    21
    @lausius
    @panxianhai
    谢谢建议 ;)
    kokdemo
    kokdemo
    Oct 22, 2014
    22
    @shuding 效果好了
    popbones
    popbones
    Oct 22, 2014 via iPhone
    23
    @shuding 用的人不多,有些人会觉得挺别扭的,不过plex的web app好像用了这个
    zythum
    zythum
    Oct 22, 2014
    24
    good job. 做佷用心。阴影。圆角。透明度都很好
    danniel
    danniel
    Oct 22, 2014
    25
    cool!
    loading
    loading
    Oct 22, 2014
    26
    建议:所有图标用css的那种,追求没一张图!
    mortal
    mortal
    Oct 22, 2014
    27
    哈哈哈,又想起了好多年前的「云系统」,仿 XP……
    meta
    meta
    Oct 22, 2014
    28
    难得居然连ie都支持
    Actrace
    Actrace
    Oct 22, 2014
    29
    @mortal 千脑?
    mortal
    mortal
    Oct 22, 2014
    30
    @Actrace 好像还真是这个噢
    Actrace
    Actrace
    Oct 22, 2014
    31
    @mortal 千脑好好做的话还是很不错的,只是他们家的市场部门似乎只把他当作一个网盘来运营,而且盈利手段土的无法直视。。。
    shuding
    shuding
    OP
    Oct 22, 2014
    32
    @meta @.@ 我没在 IE 上面试过……我不知道什么效果
    goldenlove
    goldenlove
    Oct 23, 2014
    33
    @zythum 朱一也来个 10.10 的版本?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1727 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 54ms · UTC 23:48 · PVG 07:48 · LAX 15:48 · JFK 18:48
    ♥ Do have faith in what you're doing.