3

私は、Google が UI を作成するために使用する CSS メソッドを研究しています。ホームページの CSS コードに検索ボックスへの参照が含まれていないことに気付きました。境界線、背景画像、または境界線のスタイルを設定するために通常使用される規則のいずれも持たない、裸の入力タグのように見えます。それでいて、色相や一種のグラデーションを表示できるだけでなく、少し丸みを帯びており、カーソルのフォーカスにも反応します。

だから、あなたの推測は私のものと同じくらい良いです。Firebug を使って調べて、このなぞなぞの真相を解明するのを手伝ってください。

http://www.google.com/

編集：明確にするために、私は審美的な判断をしようとしているわけではありません. Google のホームページのミニマリズムは素晴らしいと思いますが、CSS をまったく使用せずに、検索ボックスの周囲の境界線を様式化するために使用された手法を知りたいと思っています。

4

6 に答える 6

10

マックをお使いですか？ネイティブ UI 要素のすべてが丸く、光り、色が変わるわけではありませんか?

ページの UI を検出せずに変更する可能性のある Google ツールバーのようなアドオンはありますか?

編集：質問で尋ねられたテクニックは、実際にはCSSとは何の関係もなく、すべてブラウザと関係があります。Google ホームページのテキスト入力には CSS スタイルが適用されていないため、ブラウザがどのように表示されるかを決定します。Google Chrome でフィールドにフォーカスがあると、次のようになります。

無効な ImageShack リンクを削除

于 2009-02-22T09:59:12.237 に答える
2

秘密はありません。これは普通のテキスト ボックスです... Google のホームページは常にミニマリストであることで知られています。

于 2009-02-22T09:58:34.017 に答える
2

ホームページについてはわかりませんが、Gmail でも同じことを行っており、CSS が関係しています。

.mFwySd:focus
{
border:2px solid #73A6FF !important; 
margin:0 !important;
outline-color:-moz-use-text-color !important; 
outline-style:none !important; 
outline-width:0 !important; 
}

.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}
于 2009-02-22T10:50:16.747 に答える
0

Firefox などの一部のブラウザが css3 を読み取ることができるようになったので、それを使用して角の半径を設定できます。今はそれを使用しています! w3cではまだ有効ではありませんが。

于 2010-02-15T02:59:22.207 に答える
0

検索ボックスのスタイルを整えているようには見えません。しかし、必要に応じて、ネイティブの HTML タグを使用することもできますinput。CSSファイルで参照するだけです。

input {
     padding:???;
     margin:???;
     background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
     color:#??????;
     text-align:????;
     font:normal ?em/?em arial;
}

これは、検索フィールド ボックスをカバーするだけです。ボタンを隠す必要がある場合は、ボタン入力フィールドにクラスを追加するだけです。

いつも使っています.btn

input.btn {
     padding:???;
     margin:???;
     background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
     color:#??????;
     text-align:????;
     font:normal ?em/?em arial;
}

inputこれで、Web サイト全体の任意のフィールドを完全に制御できるようになります。

于 2009-03-31T16:10:22.147 に答える
0

それはすべてChromeに関するもので、このブラウザでテキストボックスに焦点を合わせると、外側のグロー効果が適用されます.

于 2009-02-22T10:40:15.850 に答える