web-dev-qa-db-ja.com

ボーダー半径を適用してIllustratorから「内部グロー」効果を再現するCSS3グラデーション

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

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

Button style screenshot

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

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

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

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

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

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

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))
    );
}

基本的に、ひどいです。ヒントやヒントはありがたく受け入れられ、事前に感謝します！

cssgradientradial-gradients
16
RichardTape

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

「次に、不透明度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);
38
Dan

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

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

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

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 */
    );
}
2
Miriam Suzanne

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

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

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

1
mymex1

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

解決策を見つけましたが、ネストされた<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

楽しんで！

0
Ian Storm Taylor