0

unfuddle.comのボタンがノイズの層を使用していることに気づきました。これの目的は何なのか疑問に思っていました。違いは目に見えませんが、おそらくこれはクロスブラウザハックですか？

とにかくノイズ画像をロードするためだけに画像を使用しないような素晴らしいCSS3ボタンを作成するのはばかげているようです。

これが問題のボタンに対応するCSSです。gnoise.png？cbv-1346878364に注意してください。

.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    display: inline-block;
    font-family: "Lato","Arial",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 34px;
    margin-right: 1px;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
    background-color: #A5C416;
    background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #90D900;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
    background-color: #7EBD00;
    border-color: #7FBF00;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    display: inline-block;
    font-family: "Lato","Arial",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 34px;
    margin-right: 1px;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
    background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
    background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
    background-color: #7EBD00;
    border-color: #90D900;
}
4

2 に答える 2

1

gnoise.png背景色（放射状のグラデーションとともに）の上に配置して、フラットな画像に視覚的な複雑さを追加します。効果はほとんど表示されませんa.gp_buttonが、Photoshopを使用してスクリーンショットを拡大するか、スポイトを使用してピクセルの色を比較すると、効果を確認できます。<footer>背景色が暗いため、効果は要素でより目立ちます。

単色の上に1つの画像を再利用することで、ページの読み込みが遅くなる可能性のある複数のHTTPリクエストを回避しながら、さまざまな色を取得できます。

これは単なる推測ですが、getパラメーター（?cbv=1346878364）を使用して、イメージファイルの更新後に、ブラウザーでキャッシュされたバージョンを使用する代わりに、新しいイメージファイルが実際にサーバーからプルされるようにすることができます。

于 2013-01-30T22:13:23.557 に答える
1

私の推測では、CSS3をサポートしていないブラウザの場合はそこにあった可能性があります。しかし、クロームでボタンを調べると、別の画像で上書きされているので、そうではないと思います。

古いブラウザにはない場合は、コーディングエラーである可能性があります。多分彼らはある時点でそれを使用し、それを取り出すのを忘れました。

しかし、あなたの質問に答えるために。この画像で上書きされているため、何にも使用されていません。そして、あなたが彼らがしていることを複製しようとしているなら、私はそれを削除するでしょう。

background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');
于 2013-01-30T22:04:07.453 に答える