16

私はCSS3グラデーション（特に放射状のグラデーション）に頭を正しく向けようとしている最中です。そうすることで、私は自分自身を比較的難しい挑戦に設定したと思います。

Adobe Illustratorで、次の「ボタン」スタイルを作成しました。

ボタンスタイルのスクリーンショット

この画像を作成するために、背景色がrgb(63,64,63)またはの長方形を作成し#3F403F、境界線の半径が15pxになるように「定型化」しました。

次に、不透明度25％、ぼかし8ピクセル、中央から白の「内部グロー」を適用しました。最後に、3ポイントの白いストロークを適用しました。（上の画像では不十分な場合に、再現したい場合に備えて、これらすべてをお伝えします。）

したがって、私の質問は次のとおりです。

画像を必要とせずにCSSを使用してこの「ボタン」を再作成することは可能ですか？

私はInternetExplorerの「制限」を知っています（そしてこの実験のために、私はサルを与えることができませんでした）。また、Webkitの小さな「バグ」が、背景色、境界線の半径、および境界線（背景色とは異なる色）の要素を誤ってレンダリングすることにも気づいています。これにより、曲線上で背景色がにじみ出てきます。コーナー。

これまでの私の最善の試みはかなり哀れですが、参考のためにここにコードがあります：

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 3px solid rgb(255,255,255);
    background: rgb(98,99,100);

    background: -moz-radial-gradient(
        50% 50%, 
        farthest-side, 
        #626364, 
        #545454
    );
    background: -webkit-gradient(
        radial, 
        50% 50%,
        1px,
        50% 50%,
        5px,
        from(rgb(98,99,100)),
        to(rgb(84,84,84))
    );
}

基本的に、ひどい。ヒントやコツはありがたく受け入れてくれて、よろしくお願いします！

4

4 に答える 4

38

これを再現するためにグラデーションを作成しようとしているようです。

「次に、不透明度25％、ぼかし8ピクセル、中央から白の「内部グロー」を適用しました。」

はめ込みボックスシャドウを使用して、まさにそれを行うことができます。例えば：

-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
于 2010-04-04T00:26:10.653 に答える
2

追加のマークアップなし:

放射状グラデーションは制御が非常に難しく、線形グラデーションよりもブラウザ間で動作が大きく異なります。また、内側のグローとは異なり、ボックスのほぼ長方形の輪郭に一致するのではなく、実際には円形になります。

ボックスの影を許可するすべてのブラウザーは、rgba と複数の背景も許可するため、2 つの線形グラデーションを組み合わせて使用​​し、積み上げて rgba 色を使用します (1 つは水平方向、もう 1 つは垂直方向)。これらの行に沿ったもの（私の色を必要なものに置き換えます）：

section#featured footer p a {
  background-color: #000;
  background-image: -moz-linear-gradient(
    left, 
    rgba(255,255,255,.5), 
    rgba(255,255,255,0) 10%, 
    rgba(255,255,255,0) 90%, 
    rgba(255,255,255,.5)
  ), -moz-linear-gradient(
    top, 
    rgba(255,255,255,.5), 
    rgba(255,255,255,0) 10%, 
    rgba(255,255,255,0) 90%, 
    rgba(255,255,255,.5)
  );
  background-image: -webkit-gradient(
    /* webkit's syntax for the same horizontal gradient */
    ), -webkit-gradient(
    /* webkit's syntax for the same vertical gradient */
    );
}
于 2010-04-03T23:56:13.127 に答える
1

オーバーレイされた div で白から透明になる放射状グラデーションを作成することもできます。私はこのすばらしい css3 生成ツールを使用しました。このツールは、ブラウザー間の互換性のために必要なすべての css3 を提供します。

http://www.colorzilla.com/gradient-editor/

これが誰かに役立つことを願っています!

于 2012-05-01T00:44:49.403 に答える
0

さて、私は言わなければなりません...あなたの質問は私に非常に興味を持ったので、私はそれに行きました.

<span>私は解決策を見つけましたが、それは少し不格好なネストされたタグを使用していますが、実際にはあなたの画像と同じです.

HTML は次のようになります。

<a href="/" class="dark-button"><span>Carry on reading&nbsp;&nbsp;&rarr;</span></a>

のネストされた<span>内部に注意してください<a>。分割されていないスペースは、写真にあるのと同じ量のスペースを矢印に与えるためのものです.

CSS は次のとおりです。

a.dark-button { 
    font: 11pt/11pt "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 100; 
    color: white; 
    text-decoration: none; 
    background-color: #555; 
    border: 3px solid white; 
    -moz-border-radius: 15px; padding: 5px 3px; 
    text-shadow: 1px 1px 2px #111;
}
    a.dark-button span { 
        background-color: #666; 
        padding: 2px 12px; 
        -moz-border-radius: 15px;
        -moz-box-shadow: 0 0 1px #666, 0 0 2px #666, 0 0 3px #666, 0 0 4px #666, 0 0 5px #666, 0 0 7px #666; 
    }

基本的に内側のグロー効果を得るために、内側の要素から外側のグロー (ドロップ シャドウの形) を作成しました。それが理にかなっていることを願っています。

ライブで見るには: http://ianstormtaylor.com/experiments/css-buttons

楽しむ！

于 2010-04-03T23:43:58.570 に答える