爱意满满的作品展示区。
P233
5.03D

应个景,iOS7 theme for V2EX

  •  1
     
  •   P233 ·
    P233 · Sep 22, 2013 · 9021 views
    This topic created in 4794 days ago, the information mentioned may be changed or developed.
    大神们见笑了,折腾着玩

    截图:


    自定义 CSS :
    https://gist.github.com/P233/6658661

    最下面有节动画效果,写进 head 效果才好,另外 IE9 不要使用这段动画,会隐藏所有内容。有些地方没想好,过段时间再做修改。


    顺道附上刚刚完成的 iOS7 动画效果: http://cdpn.io/Gluka
    67 replies  •  2014-05-01 10:30:57 +08:00
    Livid
    Livid
    MOD
    PRO
    Sep 22, 2013 via iPhone
    1
    :-) 不错!
    wang2191195
    wang2191195
    Sep 22, 2013
    2
    我喜欢这样的风格
    loading
    loading
    Sep 22, 2013
    3
    动画不错,赞
    P233
    P233
    OP
    Sep 22, 2013
    4
    感谢各位支持 :)
    alexrezit
    alexrezit
    Sep 22, 2013
    5
    做得很棒, 就是颜色太亮, 还是换回来了.
    fangzhzh
    fangzhzh
    Sep 22, 2013❤️1
    6
    真是很厉害 赞!
    megaforce
    megaforce
    Sep 22, 2013 via Android
    7
    要怎么才能用?说超过4K了
    Leo
    Leo
    Sep 22, 2013
    8
    赞一个
    itommy
    itommy
    Sep 22, 2013
    9
    稍微有点刺眼 但还是很赞
    fangzhzh
    fangzhzh
    Sep 22, 2013❤️1
    10
    @megaforce 压缩, gist上貌似有说明
    P233
    P233
    OP
    Sep 22, 2013❤️1
    11
    @alexrezit
    @itommy 平时只开 3-4 格亮度,常年成习惯了,所以... XD

    @megaforce 要压缩 CSS, gist 页面给出了地址,方便自定义,比如 75 行载入 retina 图片,或者直接去掉 188 行后面的动画效果

    一个 downside 是,像 http://v2ex.com/go/nodejs 这个节点的自定义样式就被覆盖了

    @fangzhzh :)
    xmbaozi
    xmbaozi
    Sep 22, 2013
    12
    用上了,特地回来赞一个
    ushuz
    ushuz
    Sep 22, 2013 via iPhone
    13
    看起来很不错〜
    egen
    egen
    Sep 22, 2013
    14
    动态效果很赞
    megaforce
    megaforce
    Sep 22, 2013
    15
    @P233
    @fangzhzh

    谢谢。已经用上了。不错
    mille
    mille
    Sep 22, 2013
    16
    已使用,灰常不错
    iZr
    iZr
    Sep 22, 2013
    17
    不错啊.~~~~
    devon
    devon
    Sep 22, 2013
    18
    Safari下效果很好,赞一个
    aerolqr
    aerolqr
    Sep 22, 2013
    19
    很赞
    SoberZhou
    SoberZhou
    Sep 22, 2013
    20
    赞!
    anson0370
    anson0370
    Sep 22, 2013❤️2
    21
    fork 了一发楼主的 gist ,改了下 header 和 search ,顺便去掉了货币的渐变背景

    https://gist.github.com/anson0370/6660431
    anson0370
    anson0370
    Sep 22, 2013
    22
    oh shit…… 忘了 gist 会被转换出来…… 好长啊……
    Hysteria
    Hysteria
    Sep 22, 2013
    23
    用上了确实很漂亮,还有动画效果,赞!
    JoyNeop
    JoyNeop
    Sep 22, 2013
    24
    我的狗眼……
    underone
    underone
    Sep 22, 2013
    25
    不错挺好玩的:)
    ouankou
    ouankou
    Sep 22, 2013
    26
    用上了,很漂亮!不过把动画效果去掉了,有点晃眼。
    Divil
    Divil
    Sep 22, 2013
    27
    正在使用。
    很漂亮,很喜欢!
    Livid
    Livid
    MOD
    PRO
    Sep 22, 2013
    28
    固定背景的一个问题就是在有些机器上会卡。
    xiaoye5200
    xiaoye5200
    Sep 23, 2013
    29
    @Livid 可以加个主题按钮,大家投稿的主题随意切换
    wzxjohn
    wzxjohn
    Sep 23, 2013
    30
    确实很赞。但是动画实在有点晃眼。。。
    P233
    P233
    OP
    Sep 23, 2013
    31
    @anson0370 参考一下,多谢

    @Livid 固定背景卡顿的情况遇到的不太多,去掉 fixed 会不会有改善?

    @JoyNeop
    @ouankou
    @wzxjohn 动画会有一段延时,因为是覆盖默认的样式,玩一下再把那节删了吧 :)



    感谢各位 :)
    ivanlw
    ivanlw
    Sep 23, 2013
    32
    求怎么压缩…………
    P233
    P233
    OP
    Sep 23, 2013
    33
    @ivanlw 我找到了这个工具,还不错 http://cssminifier.com
    laskuma
    laskuma
    Sep 23, 2013
    34
    很棒!比上次发的那个为扁平而扁平的好太多了!
    Wy4q3489O1z996QO
    Wy4q3489O1z996QO
    Sep 23, 2013
    35
    thinkpad r61表示先固定显示,再出个动画效果比较怪异。
    evanchang
    evanchang
    Sep 23, 2013
    36
    配色很赞,动画效果怪异+1
    ameba
    ameba
    Sep 23, 2013
    37
    回来赞一个
    qiuai
    qiuai
    Sep 23, 2013
    38
    不错.用了..只是不喜欢哪个动画效果.
    linchanx
    linchanx
    Sep 23, 2013
    39
    不错哦 赞一个 谢谢
    gangsta
    gangsta
    Sep 23, 2013
    40
    屌!炸!天!

    就是Win下略卡~
    ivanlw
    ivanlw
    Sep 23, 2013
    41
    去掉动画效果,我简直爱上它了……比原来的好看多了~
    gdzdb
    gdzdb
    Sep 23, 2013
    42
    已用上。

    就是每次刷新页面都要先看到旧的皮肤,然后才能变,不过这不是css的问题了。
    asca
    asca
    Sep 23, 2013
    43
    超赞!
    mopig
    mopig
    Sep 23, 2013
    44
    顶部的导航栏,每次都是先加载黑色,再变成白色~ 有没有办法把又黑又硬的给去掉?
    cxshun
    cxshun
    Sep 23, 2013
    45
    漂亮,顶一下楼主。
    确实有上面其他朋友说的问题,无刷原来的CSS,再刷新一次。
    @Livid 估计要瞧瞧,看是不是能搞到直接加载自定义CSS。
    run2
    run2
    Sep 23, 2013❤️1
    46
    @cxshun Stylish这类的插件优先度要高些,可以试试
    loryyang
    loryyang
    Sep 23, 2013
    47
    赞的!动画特别好看
    fork3rt
    fork3rt
    Sep 23, 2013
    48
    - - 换了之后好晕。。
    akn8
    akn8
    Sep 23, 2013
    49
    赞~~
    passluo
    passluo
    Sep 23, 2013
    50
    用上了,然后把动画去掉了。动画多了好累赘的感觉~
    ensonfun
    ensonfun
    Sep 23, 2013
    51
    一开始有动画虽然很炫,但是也很卡,也许和机器网速等有关,去掉动画后,效果非常不错,感谢LZ。
    chainkhoo
    chainkhoo
    Sep 23, 2013❤️1
    52
    压缩后的CSS如下:


    a:link,a:visited,a:active{color:#8e8d93;-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s}a.top:link,a.top:visited,a.top:active{color:#000;text-shadow:none}a.top:hover{color:#8e8d93;text-shadow:none}a.tab_current:link,a.tab_current:visited,a.tab_current:active{background-color:#f63b30}a.tab_current:hover{background-color:#f63b30}a.count_livid:link,a.count_livid:active{padding:0;width:30px;height:16px;border:2px solid #0c63ff;border-radius:16px;background:inherit;color:#0c63ff;text-align:center;font-size:12px;line-height:16px}a.count_livid:hover{background:#0c63ff;color:#fff}a.count_livid:visited{border-color:#8e8d93;color:#8e8d93}a.count_livid:visited:hover{border-color:#8e8d93;background-color:#8e8d93;color:#fff}a.tb:hover{background-color:#f63b30;color:#fff;text-shadow:none}.item_title a{color:#222}.gray a{color:#8e8d93!important}.header a{color:#f63b30}#Top{border-bottom:1px solid #cfcfcf;background-color:#f7f7f7;background-image:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}#Wrapper{background:url(http://p233.github.com/assets/codepen/v2ex-theme-bg/diamond.png) fixed}.box{overflow:hidden;border-bottom:0;border-radius:6px;background:rgba(255,255,255,.85);box-shadow:none;color:#222!important;text-shadow:none}.topic_content,.reply_content{color:#222!important}.cell{border-bottom:1px solid #eaeaea}.item{background:0}.topic_buttons{border-radius:0 0 5px 5px;background:0}.super.button,.normal.button{padding:5px 15px;border:0;background:#4ed34a;box-shadow:none;color:#fff;text-shadow:none;font-weight:400;-webkit-transition:all .15s;-moz-transition:all .15s;-ms-transition:all .15s;-o-transition:all .15s;transition:all .15s;-webkit-appearance:none}.super.button:hover,.normal.button:hover{border:0;background:#8e8d93;box-shadow:none;color:#fff;text-shadow:none;font-weight:400}.item_node{padding:5px 10px;border:0;border-radius:3px;background:#8e8d93;color:#fff!important}.item_node:hover{border:0;background:#4ed34a}.fade{color:#b5b5b5}.dock_area{background:#f7f7f7;background-image:none}.subtle{border-bottom:1px solid #eaeaea}.transparent{border:2px dashed rgba(0,0,0,.1)!important;background-color:transparent!important}.online{padding:2px 8px;background:#4ed34a;line-height:12px}img.avatar{-moz-border-radius:5px;border-radius:5px}.sl{padding:5px 8px;width:310px;border:0;background:#eee;box-shadow:none}.ml{width:316px;border:0;background:#eee;box-shadow:none}.sll,.mll,.mle{border:0;background:#eee;box-shadow:none}.sl:focus,.sll:focus,.ml:focus,.mll:focus,.mle:focus{outline:0;border:0;background:#fefefe;box-shadow:none;color:#353535}.topic_content .gist{width:660px!important}.reply_content .gist{width:610px!important}#Top,.box{opacity:0;-webkit-transform:scale(1.5,1.5);-moz-transform:scale(1.5,1.5);-ms-transform:scale(1.5,1.5);-o-transform:scale(1.5,1.5);transform:scale(1.5,1.5);-webkit-animation:zoom_out .5s ease forwards;-moz-animation:zoom_out .5s ease forwards;-ms-animation:zoom_out .5s ease forwards;-o-animation:zoom_out .5s ease forwards;animation:zoom_out .5s ease forwards}@-webkit-keyframes zoom_out{to{opacity:1;-webkit-transform:scale(1,1)}}@-moz-keyframes zoom_out{to{opacity:1;-moz-transform:scale(1,1)}}@-ms-keyframes zoom_out{to{opacity:1;-ms-transform:scale(1,1)}}@-o-keyframes zoom_out{to{opacity:1;-o-transform:scale(1,1)}}@keyframes zoom_out{to{opacity:1;transform:scale(1,1)}}
    tension
    tension
    Sep 23, 2013
    53
    删除动画很爽!
    kenzi
    kenzi
    Sep 23, 2013
    54
    用上了,来赞一个
    不过有时候还是能看到原先的界面,然后刷新过来了..
    @livid 能不能弄成个theme的功能,让大家制作,发布,选择?
    loryyang
    loryyang
    Sep 23, 2013
    55
    用了很久,依然感觉很爽,唯一的一个问题就是这个动画其实是刷新的,相当于重刷一次,不知道是不是有可能改进下。。
    hewigovens
    hewigovens
    Sep 23, 2013❤️1
    56
    lz放一份到userstyles.org吧~
    P233
    P233
    OP
    Sep 23, 2013
    57
    @romotc
    @evanchang
    @qiuai
    @ivanlw
    @mopig
    @cxshun
    @fork3rt
    @passluo
    @enson110
    @tension
    @kenzi
    @loryyang
    浏览器先应用默认 CSS 样式,然后再刷新自定义 CSS,所以看到的是先出默认主题再刷新自定义主题,以及先固定出现页面再更新动画效果的现象。如果 @Livid 能把自定义 CSS 写进 head 部分相信会改善这些问题,毕竟浏览器读 body 部分的 CSS 会 re-render page,这样对页面性能也是一点提升。

    @sobigfish
    @hewigovens
    感谢推荐,刚刚知道这个网站,待会上传一份

    @chainkhoo
    多谢
    P233
    P233
    OP
    Sep 23, 2013
    58
    @sobigfish
    @hewigovens

    已上传,去掉了动画效果

    http://userstyles.org/styles/93279/ios7-theme-for-v2ex
    如何将它指向给 V2EX 呢? 点击 “Find more styles for this site” 时找不到这个样式
    hewigovens
    hewigovens
    Sep 23, 2013❤️1
    59
    @P233 @-moz-document domain("v2ex.com") { /*你的css*/}
    MingZhe
    MingZhe
    Apr 30, 2014
    60
    怎么去掉动画啊
    @tension
    @passluo
    @enson110
    MingZhe
    MingZhe
    Apr 30, 2014
    62
    @P233 嗯,已经尝试出来了。。。感谢楼主分享
    MingZhe
    MingZhe
    Apr 30, 2014
    63
    @P233 感觉上,背景加载有点慢。
    P233
    P233
    OP
    Apr 30, 2014
    64
    @MingZhe 背景图片存放在 github pages 里,可以保存到其他地方,然后更改 CSS 中 url ,应该会比 github 快
    MingZhe
    MingZhe
    Apr 30, 2014
    65
    @P233 Thanks,已经放到国内比较快的 CDN 上了。。。速度很好了。最近好多事情,真的有刺激到我好好学前端知识啊。。。
    P233
    P233
    OP
    Apr 30, 2014
    66
    @MingZhe 当个乐趣学,挺有意思的:)
    tension
    tension
    May 1, 2014
    67
    @MingZhe =)
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1486 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 101ms · UTC 10:44 · PVG 18:44 · LAX 02:44 · JFK 05:44
    ♥ Do have faith in what you're doing.