V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
P233
V2EX  ›  分享创造

应个景,iOS7 theme for V2EX

  •  1
     
  •   P233 ·
    P233 · 2013-09-22 18:55:19 +08:00 · 7372 次点击
    这是一个创建于 4062 天前的主题,其中的信息可能已经有所发展或是发生改变。
    大神们见笑了,折腾着玩

    截图:


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

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


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

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

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

    @fangzhzh :)
    xmbaozi
        12
    xmbaozi  
       2013-09-22 20:31:03 +08:00
    用上了,特地回来赞一个
    ushuz
        13
    ushuz  
       2013-09-22 20:32:47 +08:00 via iPhone
    看起来很不错〜
    egen
        14
    egen  
       2013-09-22 20:49:46 +08:00
    动态效果很赞
    megaforce
        15
    megaforce  
       2013-09-22 20:56:23 +08:00
    @P233
    @fangzhzh

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

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

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

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



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

    就是Win下略卡~
    ivanlw
        41
    ivanlw  
       2013-09-23 10:20:28 +08:00
    去掉动画效果,我简直爱上它了……比原来的好看多了~
    gdzdb
        42
    gdzdb  
       2013-09-23 10:45:48 +08:00
    已用上。

    就是每次刷新页面都要先看到旧的皮肤,然后才能变,不过这不是css的问题了。
    asca
        43
    asca  
       2013-09-23 10:46:17 +08:00
    超赞!
    mopig
        44
    mopig  
       2013-09-23 10:56:29 +08:00
    顶部的导航栏,每次都是先加载黑色,再变成白色~ 有没有办法把又黑又硬的给去掉?
    cxshun
        45
    cxshun  
       2013-09-23 10:59:14 +08:00
    漂亮,顶一下楼主。
    确实有上面其他朋友说的问题,无刷原来的CSS,再刷新一次。
    @Livid 估计要瞧瞧,看是不是能搞到直接加载自定义CSS。
    sobigfish
        46
    sobigfish  
       2013-09-23 11:11:38 +08:00   ❤️ 1
    @cxshun Stylish这类的插件优先度要高些,可以试试
    loryyang
        47
    loryyang  
       2013-09-23 11:17:41 +08:00
    赞的!动画特别好看
    fork3rt
        48
    fork3rt  
       2013-09-23 11:34:00 +08:00
    - - 换了之后好晕。。
    akn8
        49
    akn8  
       2013-09-23 14:22:20 +08:00
    赞~~
    passluo
        50
    passluo  
       2013-09-23 14:25:59 +08:00
    用上了,然后把动画去掉了。动画多了好累赘的感觉~
    enson110
        51
    enson110  
       2013-09-23 14:57:36 +08:00
    一开始有动画虽然很炫,但是也很卡,也许和机器网速等有关,去掉动画后,效果非常不错,感谢LZ。
    chainkhoo
        52
    chainkhoo  
       2013-09-23 15:03:47 +08:00   ❤️ 1
    压缩后的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
        53
    tension  
       2013-09-23 15:06:29 +08:00
    删除动画很爽!
    kenzi
        54
    kenzi  
       2013-09-23 16:13:55 +08:00
    用上了,来赞一个
    不过有时候还是能看到原先的界面,然后刷新过来了..
    @livid 能不能弄成个theme的功能,让大家制作,发布,选择?
    loryyang
        55
    loryyang  
       2013-09-23 17:19:54 +08:00
    用了很久,依然感觉很爽,唯一的一个问题就是这个动画其实是刷新的,相当于重刷一次,不知道是不是有可能改进下。。
    hewigovens
        56
    hewigovens  
       2013-09-23 17:28:05 +08:00   ❤️ 1
    lz放一份到userstyles.org吧~
    P233
        57
    P233  
    OP
       2013-09-23 17:36:04 +08:00
    @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
        58
    P233  
    OP
       2013-09-23 18:00:03 +08:00
    @sobigfish
    @hewigovens

    已上传,去掉了动画效果

    http://userstyles.org/styles/93279/ios7-theme-for-v2ex
    如何将它指向给 V2EX 呢? 点击 “Find more styles for this site” 时找不到这个样式
    hewigovens
        59
    hewigovens  
       2013-09-23 18:01:35 +08:00   ❤️ 1
    @P233 @-moz-document domain("v2ex.com") { /*你的css*/}
    MingZhe
        60
    MingZhe  
       2014-04-30 10:15:17 +08:00
    怎么去掉动画啊
    @tension
    @passluo
    @enson110
    P233
        61
    P233  
    OP
       2014-04-30 16:33:43 +08:00
    MingZhe
        62
    MingZhe  
       2014-04-30 17:27:02 +08:00
    @P233 嗯,已经尝试出来了。。。感谢楼主分享
    MingZhe
        63
    MingZhe  
       2014-04-30 17:58:11 +08:00
    @P233 感觉上,背景加载有点慢。
    P233
        64
    P233  
    OP
       2014-04-30 18:02:00 +08:00
    @MingZhe 背景图片存放在 github pages 里,可以保存到其他地方,然后更改 CSS 中 url ,应该会比 github 快
    MingZhe
        65
    MingZhe  
       2014-04-30 19:00:26 +08:00
    @P233 Thanks,已经放到国内比较快的 CDN 上了。。。速度很好了。最近好多事情,真的有刺激到我好好学前端知识啊。。。
    P233
        66
    P233  
    OP
       2014-04-30 19:44:11 +08:00
    @MingZhe 当个乐趣学,挺有意思的:)
    tension
        67
    tension  
       2014-05-01 10:30:57 +08:00
    @MingZhe =)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3767 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 00:15 · PVG 08:15 · LAX 16:15 · JFK 19:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.