很久之前就觉得 Google Design 的头部超级漂亮，最近试着照葫芦画瓢搞一个，以后放自己博客上。 Demo 在这里，目前只支持桌面的现代浏览器，还在不断改进中，请菊苣们拍砖。如果感觉好看就拿去随便用，只求给个小星星呀
代码在这里
爱意满满的作品展示区。
This topic created in 3527 days ago, the information mentioned may be changed or developed.
Supplement 1 · Mar 13, 2017
添加了移动端的适配，但是有 bug ，稍后会改
Supplement 2 · Mar 14, 2017
移动端改好了
 |
bumzMar 13, 2017
1
阴影违和
|
 |
HansahMar 13, 2017
3
这个。。。基本上是个 bootstrap 的 html5 模板都比这个好看啊
|
 |
yoa1q7yMar 13, 2017
5
阴影刺眼睛
|
 |
morethanseanMar 13, 2017
6
你这个阴影很违和啊……你需要按照 MD 的规范设置阴影……
|
 |
yangffMar 13, 2017
7
 精确的设计工艺 |
|
yangffMar 13, 2017
8
 |
|
HansahMar 13, 2017 via iPhone
9
@zhngnmng 真的。。。 weidea.net ，你去 html5 模板里面看看
|
 |
ivmmMar 13, 2017
10
谷歌的 MD 对移动是很友好的，你这个移动浏览器还看不了
而且阴影的确辣眼睛 |
 |
DXproMar 13, 2017
11
大面积的纯色 闪来闪去 抱歉我并不能为你转身 ，要借鉴也要想想在不通终端合适不合适。
|
 |
12
下面放点东西，阴影就没什么感觉了
|
1 |
13
@bumz
@yoa1q7y @ivmm @morethansean 谢谢几位，我会看下 MD 的相关部分。 Google 这里是用一个 repeat-y 的[背景图片]( https://design.google.com/images/shadow.png)来做的阴影，我当时还想为什么要这么麻烦，结果还是自己太年轻了。 @ivmm 移动端肯定会还会做，确实应该都做好再放上来，是我的问题 |
|
yangffMar 13, 2017
16
@zhngnmng 不知道，我打开 google 那个页面就这样
Google Chrome 59.0.3036.0 (Official Build) canary (64-bit) Revision f6104d499c9b96a1309360c378edfb24ad3d0028-refs/heads/master@{#455621} OS Windows |
 |
zrj766Mar 13, 2017 via Android
20
暂不支持移动端的浏览器。 exm?
|
 |
thai9quohs6jae1CMar 13, 2017 via Android
23
这 bug 量…
|
|
24
@thai9quohs6jae1C 见笑了
|
|
25
@thai9quohs6jae1C 麻烦大爷，告诉我下都有哪些，我改，我是发现移动端拖拽的问题了，请问您说的其它“量”在哪，我愿闻其详
|
 |
27
@zhngnmng
Google Design Guideline 上面有说 shadows are only visual cue indicating the amount of separation between surfaces Google Design 网站里面的阴影是为了能够更好的区分 header 和主体的内容，尤其是主体内容有和 header 的颜色相同的内容时候，你只有一个头部的情况下阴影就没必要了 |
Select Language