2012-03-31 6 views
1

私はZurb Foundationフレームワークを使用していますが、テキスト、グラデーショングラデーション、および右のサイズの動的なコール - アクションボタンを作成しようとしています指す矢印。私はこれを行うための3つの方法を考えることができグラデーションと矢印付きのCSS動的サイズボタンのベストプラクティス

  1. は要素の両方の背景には、1つの勾配を持ち、もう一方が右側に位置矢印を持っている別の要素とスタイルをラップを持っています。

  2. グラデーションの背景を持つ要素だけを持ち、矢印をimgとしてHTMLに配置します。

  3. 全体の勾配と矢印を含む1つの背景画像で1つの要素を使用します。

これらの各オプションは、いくつかの方法で間違って感じている -

  1. 私はスタイルのために純粋に非セマンティックのdivを持っています。

  2. 純粋に文体ですが、私は自分のHTMLにimgを持っています。

  3. 特に、ボタンがスケーラブルである場合、汚れたソリューションのように感じます。

これらのオプションのベストプラクティスは何ですか、または私が考慮していない方法はありますか?また、Zurb Columnsスケールの適切な場所にあるテキストと矢印を使用して、ボタンがうまくスケールされるようにするにはどうすればよいですか?

Muchos gracias! :)

答えて

0

FirefoxとWebkitの場合、CSS3の複数の背景構文を使用して、CSSを介してグラデーションと背景イメージの両方を適用できます。

.gradAndImg { 
    background-image: url(image.png), -moz-linear-gradient(top, #ffcc00, #ffffff); 
    background-image: url(image.png), -webkit-gradient(linear, left-top, left-bottom, from(#ffcc00), to(#ffffff)); 
} 
+0

答えていただきありがとうございますが、確かにそれらのブラウザだけを対象にするのは良い解決策ではありませんか?私はベストプラクティスを探していた... – marc

1

あなたが財団を使用している場合、私は、あなたが試してみました、私は正確にあなたの質問を理解していないが、:

<div class="side-buttons"> 
    <button id="someid" class="nice [red:green:blue:black] button" onclick="someEvent();"/> 
</div> 

を素敵なクラスは、私はあなたが話していると考えているものと同様の勾配を追加します。サイドボタンクラスは、正しく覚えていれば、ボタンの幅を継承します。つまり、クラス「2列」のネストされたdivから、高さはテキストに応じて調整されます。

私は助けてくれました。多分あなたはあなたが持っているものといくつかのコードを投稿することができました。

関連する問題