2


0

Googleはどのようにフォームボタンを作成しますか?

Gmailがフォーム入力とそれに付随する「メールの検索」ボタンを作成する方法がとても気に入っています。

http://img827.imageshack.us/img827/2554/googlebutton.png [スクリーンショットのリンクをご覧ください]。

ただし、Gmailの圧縮されたHTML / CSSコードを解読して、この外観をどのように作成したかを理解するのは困難です。

Gmailで見られるように、テキスト入力+付随する「メール検索」ボタンの組み合わせを正確に再作成するために使用する必要があるHTMLとCSSを理解するのを誰かが助けてくれますか(スクリーンショットを見て、テキスト入力がボタンに触れる方法に特に注意を払ってください)同様に)。

前もって感謝します。

更新

次のブログ記事を見つけましたが、Gmailが「メールを検索」ボタンで行ったことを再現するのに十分な情報がありませんでした。

stopdesign.com/archive/2009/02/04/recreating-the-button.html

*アップデート2 *

下のマイケルから最初の素晴らしい助けを得たとしても、実際にこれを実装する方法にまだ迷っています。 これ以上のヘルプは、本当にありがたいです。 ありがとうございます。

2 Answer


2


2列のテーブル。 検索テキストボックスは左側のセルにあり、「ボタン」は右側のセルにあります。

「ボタン」は、ボタンにルックアンドフィールを与えるための少しのスタイリングを備えた「div」要素です。 背景のグラデーション塗りつぶし、パディング、丸みを帯びた右隅(ただし、左ではありません)があります。

セル間隔とパディングが0の場合、ボタンはテキストフィールドと同じ高さになります。 ボタンの左側は丸い角ではなく右側にあるため、単一の要素の一部のように見えます。

背景は次のように作成されます。

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));

丸めは次のとおりです。

border-bottom-left-radius: 0px 0px;
border-top-left-radius: 0px 0px;
border-bottom-right-radius: 3px 3px;
border-top-right-radius: 3px 3px;

Chromeの開発者ツールやFireBug for Firefoxなどのツールは、Inspect Element機能を使用して、かなり迅速に解決するのに役立ちます。


0


あなたはCSSの位置プロパティを使用してそれを行うことができ、そのテクニックを使用します。 このようなもの

//css
.button{ postion:relative ; width : .. ; height:..; top : .. ; left: .. }
.top-right{postion:absolute;top:0;left:100%; width:..;height:..;display:block;;background:url(top_right_corner_img.gif);}

.bottom-right{postion:absolute;top:100%;left:100%; width:..;height:..;display:block;background:url(bottom_right_corner_img.gif);}

クリックイベントを追加するためのjs