山寨了一下 Google Design 炒鸡好看的头部

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2811 天前的主题，其中的信息可能已经有所发展或是发生改变。

很久之前就觉得 Google Design 的头部超级漂亮，最近试着照葫芦画瓢搞一个，以后放自己博客上。 Demo 在这里，目前只支持桌面的现代浏览器，还在不断改进中，请菊苣们拍砖。如果感觉好看就拿去随便用，只求给个小星星呀

代码在这里

第 1 条附言 · 2017-03-13 18:51:22 +08:00

添加了移动端的适配，但是有 bug ，稍后会改

第 2 条附言 · 2017-03-14 12:24:56 +08:00

移动端改好了

Design

Google

炒鸡

山寨

30 条回复 • 2017-03-14 12:24:34 +08:00

bumz

2017-03-13 12:13:53 +08:00

阴影违和

zhngnmng

2017-03-13 12:16:39 +08:00

@bumz 0.0 虽然不懂设计，但是感觉这个阴影是点睛之笔啊…可能审美比较烂

siknet

2017-03-13 12:34:27 +08:00

这个。。。基本上是个 bootstrap 的 html5 模板都比这个好看啊

zhngnmng

2017-03-13 12:38:07 +08:00

@siknet 0.0

yoa1q7y

2017-03-13 12:39:30 +08:00

阴影刺眼睛

morethansean

2017-03-13 12:41:25 +08:00

你这个阴影很违和啊……你需要按照 MD 的规范设置阴影……

yangff

2017-03-13 12:52:38 +08:00

精确的设计工艺

yangff

2017-03-13 12:52:47 +08:00

siknet

2017-03-13 12:55:32 +08:00 via iPhone

@zhngnmng 真的。。。 weidea.net ，你去 html5 模板里面看看

ivmm

2017-03-13 13:06:46 +08:00

谷歌的 MD 对移动是很友好的，你这个移动浏览器还看不了

而且阴影的确辣眼睛

DXpro

2017-03-13 13:24:34 +08:00

大面积的纯色闪来闪去抱歉我并不能为你转身，要借鉴也要想想在不通终端合适不合适。

irainsoft

2017-03-13 13:33:59 +08:00

下面放点东西，阴影就没什么感觉了

zhngnmng

2017-03-13 13:40:30 +08:00

@bumz
@yoa1q7y
@ivmm
@morethansean 谢谢几位，我会看下 MD 的相关部分。 Google 这里是用一个 repeat-y 的[背景图片]( https://design.google.com/images/shadow.png)来做的阴影，我当时还想为什么要这么麻烦，结果还是自己太年轻了。

@ivmm 移动端肯定会还会做，确实应该都做好再放上来，是我的问题

zhngnmng

2017-03-13 13:42:02 +08:00

@irainsoft 谢谢也许吧 0.0 但肯定是会有不少人对这种风格没感觉

zhngnmng

2017-03-13 13:42:36 +08:00

@yangff 这个是怎么做到的我缩放了下也没发现

yangff

2017-03-13 14:53:32 +08:00

@zhngnmng 不知道，我打开 google 那个页面就这样

Google Chrome 59.0.3036.0 (Official Build) canary (64-bit)
Revision f6104d499c9b96a1309360c378edfb24ad3d0028-refs/heads/master@{#455621}
OS Windows

zhngnmng

2017-03-13 15:02:52 +08:00

@yangff 厉害了

zhngnmng

2017-03-13 15:05:15 +08:00

@yangff 没准是 win 上的 canary 导致的

yangff

2017-03-13 15:12:51 +08:00

@zhngnmng 难说， Luke+天天都是这种问题……

zrj766

2017-03-13 15:16:31 +08:00 via Android

暂不支持移动端的浏览器。 exm?

zhngnmng

2017-03-13 15:21:19 +08:00

@zrj766 对对对，好好好，是是是，我应该都做好了再放上来，给您带来不便了，真是抱歉

bumz

2017-03-13 20:18:47 +08:00

@zhngnmng 阴影是个好设计，不恰当的阴影违和

thai9quohs6jae1C

2017-03-13 21:12:46 +08:00 via Android

这 bug 量…

zhngnmng

2017-03-13 22:51:31 +08:00 via iPhone

@thai9quohs6jae1C 见笑了

zhngnmng

2017-03-13 22:54:05 +08:00 via iPhone

@thai9quohs6jae1C 麻烦大爷，告诉我下都有哪些，我改，我是发现移动端拖拽的问题了，请问您说的其它“量”在哪，我愿闻其详

zhngnmng

2017-03-13 22:56:47 +08:00 via iPhone

@bumz 那您是在说我这里面的阴影违和，还是 gd 网站里的阴影违和？

yopming

2017-03-14 05:38:54 +08:00

@zhngnmng
Google Design Guideline 上面有说 shadows are only visual cue indicating the amount of separation between surfaces
Google Design 网站里面的阴影是为了能够更好的区分 header 和主体的内容，尤其是主体内容有和 header 的颜色相同的内容时候，你只有一个头部的情况下阴影就没必要了

zhngnmng

2017-03-14 10:14:17 +08:00

@yopming 非常感谢……

bumz

2017-03-14 12:16:53 +08:00

@zhngnmng 你的阴影违和

zhngnmng

2017-03-14 12:24:34 +08:00

@bumz 感谢