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

Material design for V2EX

  •  
  •   aliuwr ·
    CzBiX · 2014-11-06 14:48:28 +08:00 · 5824 次点击
    这是一个创建于 3668 天前的主题,其中的信息可能已经有所发展或是发生改变。
    参考 Google Inbox 的网页版为 V2EX 写了个自定义样式。



    喜欢请 Star。

    由于本人非专业前端,有些地方可能为了实现效果而写的比较糟糕,接受各种错误指正。
    第 1 条附言  ·  2014-11-06 16:45:28 +08:00
    好吧,我是标题党,希望接下来回复的人忽视掉标题中的 "Material design",给您带来错觉表示抱歉。

    Material design 不只是外观样式,还包括内容布局和交互流程等。受限于 CSS 的能力,我只能尽力向其外观靠拢。
    其次 V2EX 是一个内容为主的地方,除了文字和链接外,就只有文本框和按钮了。并没有过多的交互流程和控件展示,这也导致 Material design 能发挥的地方大大减少,请大家了解。
    36 条回复    2014-11-07 21:17:31 +08:00
    hatcloud
        1
    hatcloud  
       2014-11-06 15:09:50 +08:00
    地址没了
    lingyired
        2
    lingyired  
       2014-11-06 15:12:05 +08:00
    @hatcloudgist.github.com 被墙了
    lingyired
        3
    lingyired  
       2014-11-06 15:12:57 +08:00
    感受不到 Material design 的风格。。。

    https://material.angularjs.org/
    twor2
        4
    twor2  
       2014-11-06 15:13:25 +08:00
    V2EX报错,超过8k了,我去掉图片部分才行
    pubby
        5
    pubby  
       2014-11-06 15:14:22 +08:00
    同报错,超过8K,如何压缩?
    twor2
        6
    twor2  
       2014-11-06 15:14:24 +08:00
    很喜欢 ~\(≧▽≦)/~
    aliuwr
        7
    aliuwr  
    OP
       2014-11-06 15:15:20 +08:00
    @twor2 感谢反馈,我改成外链吧。
    aliuwr
        8
    aliuwr  
    OP
       2014-11-06 15:20:33 +08:00
    @lingyired 单纯改 CSS 能做的有限,只能从外观上尽量靠拢,一些交互效果没法实现。
    Showfom
        9
    Showfom  
       2014-11-06 15:51:51 +08:00
    @pubby
    @twor2 压缩一下 css 就行了

    Bottom{box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);}#Main .box:nth-child(-2n+4):not(.transparent){box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);}#Search div{background-image:none!important;border-image-repeat:repeat;border-image-slice:27 27 27 50;border-image-source:url(https://v2ex.com/static/img/[email protected]);border-image-width:27px 27px 27px 50px;width:auto!important;}#Search input{transition:width .2s cubic-bezier(.4,0,.2,1);width:100px;}#Search input:focus{width:200px;}#Top{background-color:#607D8B;background-image:none;box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);width:100%;}#Top .content{width:100%;}#Top a{color:#fff;font-size:14px;font-weight:700;outline:none;}#Top td:nth-child(1){left:10px;position:absolute;}#Top td:nth-child(1) a{background-image:url(https://dn-cz-misc.qbox.me/v2ex/[email protected]);background-size:94px 30px;display:inline-block;height:30px;width:94px;}#Top td:nth-child(1) img{display:none;}#Top td:nth-child(2){position:absolute;right:10px;top:7px;}#Top td:nth-child(3){display:flex;text-align:left;width:970px;margin:6px auto;}#Wrapper{background-color:#ECEFF1;background-image:none;margin-top:10px;}.box,a.tab_current:link,a.tab_current:visited,a.tab_current:active,a.count_livid:link,a.count_livid:active,.vote:link,.vote:visited,.vote{border-radius:0;}.box:not(.transparent){border-bottom:none;box-shadow:0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);}.cell{border-bottom:1px solid #e5e5e5;}.collapsed{display:block;}.mll{background-color:#f6f6f6;border-bottom:1px solid #e5e5e5!important;margin-left:-10px;margin-top:-10px;width:660px;transition:background-color .2s cubic-bezier(.4,0,.2,1);border-style:none none solid!important;padding:10px;}.mll,.ml,.mle{border-radius:0;box-shadow:none!important;resize:none!important;}.mll:focus{background-color:#fff;}#topic_form{margin:-10px;}#topic_form td{padding:0;}#topic_form input[type=submit]{margin:10px;}#topic_title,#topic_content{border:none;border-bottom:1px solid #e5e5e5;width:660px!important;padding:10px;}.sl{border-radius:0;box-shadow:none!important;}.super.button{background-color:#78909c;background-image:none;border:none!important;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);color:#fff!important;display:inline-block;font-size:13px;font-weight:700;height:32px;line-height:30px;outline:none;text-shadow:none!important;transition:box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1);padding:0 16px;}.super.button:focus{background-color:#546e7a;box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);outline:none;transition:none;}.super.button:hover{background-color:#607d8b;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);transition:none;}.tag:link,.tag:visited,img.avatar{border-radius:2px;}.topic_buttons{background:#eee;border-radius:0;}a.balance_area:link,a.balance_area:visited,.balance_area{background:none repeat scroll 0 0 #f5f5f5!important;border-radius:0!important;}a.tb:hover{background-color:#ccc;border-radius:0;}balance_area:hover{background:none repeat scroll 0 0 #f9f9f9;}body{background-color:#ECEFF1;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;min-width:1200px;}
    StackGao
        10
    StackGao  
       2014-11-06 15:53:20 +08:00
    给贴个效果图呗 &_^
    Showfom
        11
    Showfom  
       2014-11-06 15:56:26 +08:00
    StackGao
        12
    StackGao  
       2014-11-06 16:01:33 +08:00
    @Showfom 很漂亮!
    TrustyWolf
        13
    TrustyWolf  
       2014-11-06 16:06:12 +08:00
    @Showfom 又是神域名!0rz
    Showfom
        14
    Showfom  
       2014-11-06 16:07:13 +08:00
    @TrustyWolf 你还可以把 ki.ki.ki 替换成:

    ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ooo
    aliuwr
        15
    aliuwr  
    OP
       2014-11-06 16:11:02 +08:00
    @Showfom 域名好评,只是字母 o 的数量怕是数不清楚,哈哈。
    Showfom
        16
    Showfom  
       2014-11-06 16:20:36 +08:00
    @aliuwr 前面63个,后面3个,哈哈
    breeswish
        17
    breeswish  
       2014-11-06 16:22:14 +08:00   ❤️ 1
    - - 这个一点也不 material design..
    freeze
        18
    freeze  
       2014-11-06 16:23:18 +08:00
    放到 Stylish 里可以直接用~
    anying
        19
    anying  
       2014-11-06 16:27:20 +08:00
    我把颜色换亮一点了 http://ptpimg.me/p5mgjh.jpg
    aliuwr
        20
    aliuwr  
    OP
       2014-11-06 16:41:53 +08:00
    @anying 本来也是用 Inbox 的蓝色的,但是感觉与之前 V2EX 的主题色差太远,就换了个颜色。
    Showfom
        21
    Showfom  
       2014-11-06 16:42:48 +08:00
    @anying 求配色方案
    anying
        22
    anying  
       2014-11-06 16:49:30 +08:00
    @Showfom
    Bottom{box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);}#Main .box:nth-child(-2n+4):not(.transparent){box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);}#Search div{background-image:none!important;border-image-repeat:repeat;border-image-slice:27 27 27 50;border-image-source:url(https://v2ex.com/static/img/[email protected]);border-image-width:27px 27px 27px 50px;width:auto!important;}#Search input{transition:width .2s cubic-bezier(.4,0,.2,1);width:100px;}#Search input:focus{width:200px;}#Top{background-color:#4285f4;background-image:none;box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);width:100%;}#Top .content{width:100%;}#Top a{color:#fff;font-size:14px;font-weight:700;outline:none;}#Top td:nth-child(1){left:10px;position:absolute;}#Top td:nth-child(1) a{background-image:url(https://dn-cz-misc.qbox.me/v2ex/[email protected]);background-size:94px 30px;display:inline-block;height:30px;width:94px;}#Top td:nth-child(1) img{display:none;}#Top td:nth-child(2){position:absolute;right:10px;top:7px;}#Top td:nth-child(3){display:flex;text-align:left;width:970px;margin:6px auto;}#Wrapper{background-color:#ECEFF1;background-image:none;margin-top:10px;}.box,a.tab_current:link,a.tab_current:visited,a.tab_current:active,a.count_livid:link,a.count_livid:active,.vote:link,.vote:visited,.vote{border-radius:0;}.box:not(.transparent){border-bottom:none;box-shadow:0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);}.cell{border-bottom:1px solid #e5e5e5;}.collapsed{display:block;}.mll{background-color:#f6f6f6;border-bottom:1px solid #e5e5e5!important;margin-left:-10px;margin-top:-10px;width:660px;transition:background-color .2s cubic-bezier(.4,0,.2,1);border-style:none none solid!important;padding:10px;}.mll,.ml,.mle{border-radius:0;box-shadow:none!important;resize:none!important;}.mll:focus{background-color:#fff;}#topic_form{margin:-10px;}#topic_form td{padding:0;}#topic_form input[type=submit]{margin:10px;}#topic_title,#topic_content{border:none;border-bottom:1px solid #e5e5e5;width:660px!important;padding:10px;}.sl{border-radius:0;box-shadow:none!important;}.super.button{background-color:#78909c;background-image:none;border:none!important;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);color:#fff!important;display:inline-block;font-size:13px;font-weight:700;height:32px;line-height:30px;outline:none;text-shadow:none!important;transition:box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1);padding:0 16px;}.super.button:focus{background-color:#546e7a;box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);outline:none;transition:none;}.super.button:hover{background-color:#607d8b;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);transition:none;}.tag:link,.tag:visited,img.avatar{border-radius:2px;}.topic_buttons{background:#eee;border-radius:0;}a.balance_area:link,a.balance_area:visited,.balance_area{background:none repeat scroll 0 0 #f5f5f5!important;border-radius:0!important;}a.tb:hover{background-color:#ccc;border-radius:0;}balance_area:hover{background:none repeat scroll 0 0 #f9f9f9;}body{background-color:#ECEFF1;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;min-width:1200px;}
    anying
        23
    anying  
       2014-11-06 16:50:32 +08:00
    @aliuwr 和原来颜色差得远没关系,只要看着舒服就行。
    jakwings
        24
    jakwings  
       2014-11-06 17:12:39 +08:00
    顶栏无爱。感觉其它变化不大。
    aliuwr
        25
    aliuwr  
    OP
       2014-11-06 17:20:20 +08:00
    @jakwings 因为布局没有做调整吧。
    想把右边栏隐藏了,但是没有 JS 的配合就没法再让它显示出来了。
    sethverlo
        26
    sethverlo  
       2014-11-06 17:45:19 +08:00
    还挺好看的…
    kokdemo
        27
    kokdemo  
       2014-11-06 17:48:50 +08:00
    感觉这个css 似乎是移除掉 所有的圆角,给元素加一个阴影……
    panxianhai
        28
    panxianhai  
       2014-11-06 17:54:28 +08:00
    @kokdemo 我的感觉就是把顶栏改变了一点,然后移除圆角,然后,就没有然后了...
    aliuwr
        29
    aliuwr  
    OP
       2014-11-06 17:59:19 +08:00
    @kokdemo 主要改了三个地方:导航栏、文本框、按钮。
    haiyon
        30
    haiyon  
       2014-11-06 18:42:00 +08:00
    秀一下我用的样式...
    aliuwr
        31
    aliuwr  
    OP
       2014-11-06 19:09:32 +08:00
    @haiyon 太白了,亮瞎眼。。。
    我果然还是喜欢灰色的背景。
    nan0kai
        32
    nan0kai  
       2014-11-07 09:30:26 +08:00
    @Showfom 又被你歪了
    asca
        33
    asca  
       2014-11-07 13:41:59 +08:00
    @haiyon 分享下呗 (。í _ ì。)
    haiyon
        34
    haiyon  
       2014-11-07 14:15:30 +08:00   ❤️ 1
    @asca

    #Top{background:none;height:60px;background-image:-o-linear-gradient(-89deg,#FFFFFF 0%,rgba(252,252,252,0.90) 97%);background-image:-moz-linear-gradient(-89deg,#FFFFFF 0%,rgba(252,252,252,0.90) 97%);background-image:-ms-linear-gradient(-89deg,#FFFFFF 0%,rgba(252,252,252,0.90) 97%);background-image:linear-gradient(-179deg,#FFFFFF 0%,rgba(252,252,252,0.90) 97%);-moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,0.10);box-shadow:0px 2px 4px 0px rgba(0,0,0,0.10)}#Top .content{padding-top:9px}#Wrapper{background-color:#fafafa}.box{box-shadow:0px 1px 3px rgba(0,0,0,0.1);border-radius:0}.cell{border-bottom-color:#f3f3f3}#Bottom{border-top:1px solid #f3f3f3}.item_node{background:none;padding:5px 10px;border-radius:0;background-color:#f6f6f6}a.balance_area{background:none!important}.button{background:none!important;padding:6px 8px!important;box-shadow:none!important;border:1px solid #e3e3e3!important;text-shadow:none!important}.ml,.mll{border-radius:0;border-color:#e3e3e3;outline:none!important}.ml:focus,.mll:focus{border-radius:0;border-color:#e3e3e3!important}.topic_buttons{background:#f6f6f6!important}.subtle{background:#fffde3!important;border-left:none 0}
    tammy
        35
    tammy  
       2014-11-07 21:06:07 +08:00
    chrome 28表示显示不正常
    aliuwr
        36
    aliuwr  
    OP
       2014-11-07 21:17:31 +08:00
    @tammy 你这 Chrome 已经是一年前的版本了,更新下吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5698 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 01:47 · PVG 09:47 · LAX 17:47 · JFK 20:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.