0

私はデザイナーと協力しており、彼は私たちのウェブページの検索バー用に次のデザインを送ってくれました:

ここに画像の説明を入力

完全に必要な場合を除き、Web ページのデザインに画像を使用することには大反対です。そのため、検索バー ウィジェット全体を CSS で再作成できることを願っています。ボーダー半径、グラデーション、ボックス シャドウなどの方法を知っているので、問題ありません。

質問: CSS3 ブラウザーの互換性を前提として、実際の検索ボタン (虫眼鏡部分) を二重の湾曲したエッジと左下のわずかなドロップ シャドウで再現するにはどうすればよいですか?

感想:検索ボタンは円形で独立していて、検索入力の div に負の左マージンが重なるというのが最初の印象でしたが、ドロップ シャドウをどのように取得するかはわかりませんでした。

編集:拡大鏡に画像を使用することに完全に反対しているわけではありませんが、以前に CSS で作成された同様のアイコンを見たことがあります。画像と純粋な CSS は同じ速度で読み込まれるのでしょうか、それとも純粋な CSS でできることはすべて行うべきでしょうか?

4

2 に答える 2

1

問題を別の方法で解決するには、フォントを使用して虫眼鏡をレンダリングします。ここには、JS を介してロードするか、FontSquirrelのようなサービスで @font-face を作成することによってロードできる無料のものがあります。これには、そのために必要なすべてのファイルが付属しており、いずれかの方向を指す虫眼鏡が含まれています: http://www.tenbytwenty.com/sosa.php

そこから、CSS でスタイルを設定して、デザイナーが望むように見えるようにする必要があります。

于 2012-11-26T16:38:49.153 に答える
0

このようなものが管理されます

<style type="text/css">
form {
    background-image: url(1noty.png);
    height: 50px;
    width: 240px;
}
input {
    background-image: url(bg.png);
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-left: 17px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
</style>
于 2012-11-26T17:02:11.123 に答える