V2EX Redesign: 搜索

disinfeqt · 2010-11-18T15:37:39Z

http://cl.ly/3IcJ http://zdxia.com/3IcJ Advices are welcome. :)

Welcome

V2EX

redesign

26 replies • 1970-01-01 08:00:00 +08:00

Paranoid

Nov 18, 2010

1

相当不错, 不过一度觉得头部区域的渐变和背景不怎么搭.

sparanoid

Nov 18, 2010

2

inner shadow 再浅一些，下面增加一条高光线应该会更好些:)

vayn

Nov 18, 2010

3

比现在的好看

不过内置搜索这个功能本身太废柴了，倒不如改用CSE...

disinfeqt

OP

Nov 18, 2010

4

@Sparanoid 其实我是把 nav bar 假想成一个管道，搜索框是一个缺口 ── 你们能 get 到么？
-______-

sparanoid

Nov 18, 2010

5

@disinfeqt got it, 但是缺口颜色要深啊-_

vayn

Nov 18, 2010

6

@disinfeqt 这坑挖得太浅，没看出来..

disinfeqt

OP

Nov 18, 2010

7

@Sparanoid 其实这个 CSS 是我在 Win 下那台偏色的显示器上写的，还没调就搬过来了嗯...

disinfeqt

OP

Nov 18, 2010

8

Firebug 一下，那个搜索框的底色就是 #Wrapper 的 background-color。

shawiz

Nov 19, 2010

9

同意底色要加深，文字颜色可以用白色。

lianghai

Nov 19, 2010

10

@disinfeqt 这个管道和缺口的想法好玩——不过一直觉得现在 #Top 这样圆滚滚的本来就有点怪……

ipopo

Nov 19, 2010

11

http://cl.ly/0R1I102q212F21301T3b
试试，原图用的是D酥的哟。

disinfeqt

OP

Nov 19, 2010

12

@ipopo 这也太难看了... 囧

Sai

Nov 19, 2010

13

@ipopo 这个像iPhone的滑动解锁 www

ipopo

Nov 19, 2010

14

@disinfeqt 好吧我错了 T T

sparanoid

Nov 19, 2010

15

Somewhat I mean it could be like this:

http://cl.ly/3JCO

The #TopMain can be flatter.

lianghai

Nov 19, 2010

16

我表示已经被 @Paranoid @Sparanoid 绕晕了……
觉得既然顶上那条已经那么立体了，沿着那个弧面削下去一层也不错——不过这似乎就不是 CSS 能达到的效果了……XD
http://cl.ly/3J0F

Sai

Nov 19, 2010

17

@lianghai rgba加个0.1的a就行

lianghai

Nov 19, 2010

18

@Sai 呃我没说清楚，其实指的是边缘各处的不同颜色和不同的阴影，这种事情大概得用 CSS3 来给边框贴图了？

freefcw

Nov 19, 2010

19

@Sparanoid 这个挺漂亮的

不过现在的搜索功能确实是废柴

shawiz

Nov 19, 2010

20

@lianghai 里面可以用 CSS3 渐变实现。

Livid

MOD

PRO

Nov 19, 2010

21

@disinfeqt Thank you very much.

这个新设计和本地的一些其他功能正在调试，会和 SSO 及 V2EX DNS 的一项新功能一起上线。

lianghai

Nov 19, 2010 via iPhone

22

@shawiz ...是的，渐变是很简单的，只是复杂的边缘色彩和阴影没法用 CSS 实现，于是不太适合 V2EX。

makestory

Nov 20, 2010

23

要实现管道缺口感觉其实不用明显的渐变，颜色稍微深一些就有立体感了。

Wowbeing

Nov 20, 2010

24

@ipopo 看上去像滑动解锁

shawiz

Nov 20, 2010

25

@lianghai 恩，的确会变得很复杂。特别是一个方向的 inner shadow. 我尝试过做一条高度为 1px 的 div, 然后加 box-shadow 实现了个类似的效果。

disinfeqt

OP

Nov 20, 2010

26

Everything can be done with CSS3.
I haven't used :after or :before pseudo class in this case.