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

周末搞了个扁平化的v2ex界面,不知有人喜欢不

  •  
  •   chshouyu ·
    chshouyu · 2013-09-09 11:09:55 +08:00 · 8124 次点击
    这是一个创建于 4105 天前的主题,其中的信息可能已经有所发展或是发生改变。
    高清大图:










    Chrome的扩展应用,很简单,就一个css文件

    链接:http://pan.baidu.com/share/link?shareid=1127890500&uk=69458969 密码:lic6

    安装方法:
    打开菜单-工具-扩展程序页面,将下载的crx文件拖放到页面上,会提示是否安装

    没搞开发者帐号,所以先不传应用店了。。。哪天补上
    第 1 条附言  ·  2013-09-09 13:25:23 +08:00
    第 2 条附言  ·  2013-10-29 23:43:33 +08:00
    哈哈 各位还记得这么嘛
    我已经发布到Chrome的应用店了
    欢迎大家试用
    如有其它需求或者建议,请积极发言
    地址:
    https://chrome.google.com/webstore/detail/metrov2ex/egmolfooljcembfilppkplihgdalkabj
    54 条回复    1970-01-01 08:00:00 +08:00
    zhttty
        1
    zhttty  
       2013-09-09 11:14:54 +08:00
    赞....
    bngzoo
        2
    bngzoo  
       2013-09-09 11:15:33 +08:00
    点赞!发现越来越适应扁平化了。。。
    talentsnail
        3
    talentsnail  
       2013-09-09 11:22:14 +08:00
    已经用上
    infong
        4
    infong  
       2013-09-09 11:26:36 +08:00
    我直接丢到 v2ex 的自定义 css 里了。不错~
    chmlai
        5
    chmlai  
       2013-09-09 12:20:16 +08:00
    可以放在V2EX 的自定义 CSS 里面, 谁方便直接把 CSS 贴出来?
    tayuo
        6
    tayuo  
       2013-09-09 12:24:29 +08:00
    edisonye
        7
    edisonye  
       2013-09-09 12:56:36 +08:00
    感觉不错,已用上
    biaobiaoqi
        8
    biaobiaoqi  
       2013-09-09 13:03:41 +08:00
    装上了~赞
    lz可以开源到github上,大家一起完善哇~
    chshouyu
        9
    chshouyu  
    OP
       2013-09-09 13:04:16 +08:00
    @biaobiaoqi 好的~
    burning
        10
    burning  
       2013-09-09 13:13:55 +08:00
    感觉挺新奇的 在用
    chainkhoo
        11
    chainkhoo  
       2013-09-09 13:23:55 +08:00
    赞一个
    iloveyou
        12
    iloveyou  
       2013-09-09 13:25:58 +08:00
    万恶的扁平化。。。真该用二向箔轰楼上几位的脑袋,3D世界不欢迎你们。
    chshouyu
        13
    chshouyu  
    OP
       2013-09-09 13:30:57 +08:00
    hustlzp
        14
    hustlzp  
       2013-09-09 14:12:49 +08:00
    赞,已经用上了。
    gracece
        15
    gracece  
       2013-09-09 14:30:38 +08:00
    其实我觉得有点倒退的感觉...
    在低版本的IE上长得跟这个差不多。
    luo123qiu
        16
    luo123qiu  
       2013-09-09 14:33:32 +08:00
    已用,但是感觉没啥变化,圆角变直角而已。
    不过支持楼主的折腾精神。
    Hansee
        17
    Hansee  
       2013-09-09 14:38:02 +08:00
    不错已经在用
    jedyu
        18
    jedyu  
       2013-09-09 14:46:06 +08:00   ❤️ 1
    yiplee
        19
    yiplee  
       2013-09-09 14:48:59 +08:00
    不错,赞。
    Muninn
        20
    Muninn  
       2013-09-09 14:57:10 +08:00
    哈哈 平面设计来说 确实扁平的更舒服。
    ‘好看’不敢枉加评论,舒服应该是没有争议的。
    mingzhi
        21
    mingzhi  
       2013-09-09 15:17:49 +08:00
    nice 用上了...
    chiefly
        22
    chiefly  
       2013-09-09 15:30:16 +08:00
    .box {
    background-color: transparent;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
    border-bottom: 2px solid #e2e2e9;
    }

    .cell {
    padding: 10px;
    background-color: #f8f8f8;
    margin: 5px 0;
    font-size: 12px;
    line-height: 120%;
    text-align: left;
    border-bottom: 1px solid #e2e2e2;
    }
    /*
    img.avatar {
    -moz-border-radius: 0px;
    border-radius: 0px;
    }*/

    .topic_buttons {
    border-radius: 0px 0px 0px 0px;
    }



    a.tb:hover {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0px;
    }


    .super.button {
    border-radius: 0px;
    }

    .no {
    border-radius: 0px;
    }


    a.count_blue:visited, a.count_green:visited, a.count_orange:visited, a.count_livid:visited {
    line-height: 24px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    }

    a.count_livid:hover {
    line-height: 24px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    }

    a.count_livid:link, a.count_livid:active {
    line-height: 24px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    }

    a.tab_current:link, a.tab_current:visited, a.tab_current:active {
    border-radius: 0px;
    }

    .inner {
    background-color: #f8f8f8;
    }


    a.balance_area:link, a.balance_area:visited, .balance_area {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    }


    .ml {
    border-radius: 0px;
    }

    .sl {
    border-radius: 0px;
    }

    .item_node {
    border-radius: 0px;
    }
    自用CSS,偏扁平。。
    Kaiyuan
        23
    Kaiyuan  
       2013-09-09 15:49:35 +08:00   ❤️ 4
    jqw1992
        24
    jqw1992  
       2013-09-09 18:22:19 +08:00
    厉害啊啊...
    smallcolor
        25
    smallcolor  
       2013-09-09 18:24:59 +08:00
    扁平化难道就等于方方方的嘛...
    chloerei
        26
    chloerei  
       2013-09-09 18:28:22 +08:00   ❤️ 2
    糟了,Flat UI 被黑了。
    caomu
        27
    caomu  
       2013-09-09 18:58:58 +08:00   ❤️ 2
    ie6效果(无误)
    Showfom
        28
    Showfom  
       2013-09-09 19:01:48 +08:00
    已用上
    Showfom
        29
    Showfom  
       2013-09-09 19:02:53 +08:00
    @Kaiyuan 用上这位仁兄的了,谢谢
    caomu
        30
    caomu  
       2013-09-09 19:07:20 +08:00   ❤️ 2
    leopanhf
        31
    leopanhf  
       2013-09-09 19:11:35 +08:00
    非常喜欢~
    leopanhf
        32
    leopanhf  
       2013-09-09 19:11:50 +08:00
    有点儿意思~
    chshouyu
        33
    chshouyu  
    OP
       2013-09-09 19:32:00 +08:00
    @leopanhf tks!
    SoberZhou
        34
    SoberZhou  
       2013-09-09 20:33:12 +08:00
    正在使用! 感谢分享
    SoloCompany
        35
    SoloCompany  
       2013-09-09 21:38:22 +08:00
    很不错,感谢分享
    Keinez
        36
    Keinez  
       2013-09-10 00:38:00 +08:00 via Android   ❤️ 1
    你们确定这不是高级黑?
    darasion
        37
    darasion  
       2013-09-10 00:46:02 +08:00
    账户余额,不够扁平,背景还是渐变的。
    myang
        38
    myang  
       2013-09-10 00:46:24 +08:00
    除了导航条,和pb2的默认样式一模一样……
    wenbinwu
        39
    wenbinwu  
       2013-09-10 01:50:20 +08:00
    @darasion 我直接把余额的background设置none了
    hahastudio
        40
    hahastudio  
       2013-09-10 10:36:55 +08:00
    我对这个扁平化的世界绝望了= =
    weicaizhi
        41
    weicaizhi  
       2013-09-11 19:03:26 +08:00
    牛逼!
    kawaiiushio
        42
    kawaiiushio  
       2013-09-12 04:47:40 +08:00
    https://v2ex.com/settings 这这里面可以直接设置~
    kawaiiushio
        43
    kawaiiushio  
       2013-09-12 04:51:20 +08:00
    *{
    font-family: "arial", "WenQuanYi Micro Hei", "WenQuanYi Micro Hei Mono", "Microsoft Yahei", "Microsoft Yahei Mono" sans-serif !important;
    }

    这是字体你懂的
    DearMark
        44
    DearMark  
       2013-09-12 08:37:16 +08:00
    喜闻乐见啊
    chshouyu
        45
    chshouyu  
    OP
       2013-09-12 12:56:34 +08:00
    @kawaiiushio 试试
    underone
        46
    underone  
       2013-10-29 23:46:39 +08:00
    呃……刚试了一下新版的
    留言数量的蓝色好耀眼
    顶部导航的黑字好不显眼
    回复按钮好不显眼……
    katekiss
        47
    katekiss  
       2013-10-29 23:58:08 +08:00
    这次的改动是把导航条fixed到顶部了
    ChiangDi
        48
    ChiangDi  
       2013-10-30 11:38:52 +08:00
    用上了,還不錯,比較喜歡
    yangff
        49
    yangff  
       2013-10-31 09:42:53 +08:00
    访问页面之后……导航条会先是v2ex默认的样式,然后像是拍扁了一样扁下去……
    greenymora
        50
    greenymora  
       2013-11-01 10:58:59 +08:00
    @caomu 呵呵笑了==
    katekiss
        51
    katekiss  
       2013-11-05 22:06:59 +08:00
    @yangff 应该只是第一次吧
    ted05
        52
    ted05  
       2013-11-06 10:25:41 +08:00
    赞一个,很漂亮的一说。
    blueandhack
        53
    blueandhack  
       2013-11-08 02:04:45 +08:00
    @Kaiyuan 感谢已用~
    yangff
        54
    yangff  
       2013-11-09 20:16:36 +08:00
    @katekiss 载入完全之前……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3515 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 10:47 · PVG 18:47 · LAX 02:47 · JFK 05:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.