1

最近、すばらしい記事http://www.tripwiremagazine.com/2012/01/how-to-create-a-seach-bar-in-photoshop.htmlを見つけました。レスポンシブ グリッド内で背景画像を処理する方法がわかりません。Zurb Foundation グリッドを使用してそのような検索バーを作成するにはどうすればよいですか? 出来ますか？

ありがとう！

4

1 に答える 1

1

デザインの検索バーは CSS で完全にスタイル設定でき、背景画像をまったく使用する必要はありません。これを機能させるコードの主なポイントを次に示します。

HTML:

<div class="input-container">
     <input type="text" />
     <button>Search</button>
</div>

テキスト入力:

input[type="text"] {
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
    border-radius: 5px;
    background-color: #fff;
}

ボタン:

button {
    margin-left: -10%;
    background-image: -webkit-linear-gradient(top, #117a03 0%,#287c15 100%);
    border-radius: 0 5px 5px 0;
    height: 32px;
    padding: 0 5px;
    border: 1px solid #bbb;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #fff;
    color: #074F03;
    text-shadow: 0px 1px #ccc;
    font-weight: bold;
}

CSS3 プロパティのベンダー プレフィックスを追加する必要がありますが、これは非常に基本的な出発点であり、必要なものはすべて揃っているはずです。これが機能するフィドルです：http://jsfiddle.net/J6Dvz/

于 2013-02-08T14:18:05.050 に答える