-4

I just visited this website , where I came acros this glowing menu (bottom one), my guess to it is that it might be possible through CSS3 shadow effect or something similar. Can anybody let me know as to how can I achieve such effect for my current project. I tried searching for some tutorials online but could not find any. Any suggestions are welcome. Thanks

4

4 に答える 4

2

彼らがしているのは、この画像を使用することです

サムスンの背景画像

メニューアイテムの後ろに移動します（コンテナの背景として）

CSSで似たようなことを実現するには

正方形の要素に使用border-radius:50%して円形にbox-shadowし、ソフト フェードに適用します。

http://jsfiddle.net/gaby/kt4yb/のデモ

ヒント: ソースとそのスタイルを読んで理解してください ( firebug やその他の Web デバッグ ツールを使用してください)

于 2012-04-10T10:31:09.917 に答える
1

CSS3box-shadowはあなたが見たいものです: http://jsfiddle.net/3rSbP/

于 2012-04-10T10:32:54.977 に答える
1

背景画像を変更するだけです...index.cssにはcssクラスhovermenu0、hovermenu1、....があり、背景画像を設定し、これらのクラスはULのように適用されます。

     <ul class="depth1 hoverMenu0">
于 2012-04-10T10:37:24.180 に答える
0

Using a modern browser you can directly check out what mechanism they are employing to achieve a particular design.

  • On Chrome and Opera, right click and choose 'Inspect Element'.

  • On Firefox, install the Firebug plug-in and use that.

  • On Safari, use Web Inspector.

I might be wrong, but at a first glance it appears that they are using different static background images and changing them in response to events using js (look for Event Listeners in Chrome). But it is possible to do this in CSS3 without using static images, albeit slightly more elaborately.

于 2012-04-10T10:26:37.097 に答える