1

放射状グラデーションを作成するためにUltimate CSS Gradient Generatorを使用しています。background-image mixin

CSS

background: rgb(220,156,118);
background: -moz-radial-gradient(center, ellipse cover,  rgba(220,156,118,1) 0%, rgba(220,156,118,1) 49%, rgba(214,101,90,1) 92%, rgba(214,101,90,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(220,156,118,1)), color-stop(49%,rgba(220,156,118,1)), color-stop(92%,rgba(214,101,90,1)), color-stop(100%,rgba(214,101,90,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: radial-gradient(ellipse at center,  rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc9c76', endColorstr='#d6655a',GradientType=1 );

サスはこちらmixin @includes

background-color: rgb(220,156,118);
@include filter-gradient(#dc9c76, #d6655a, horizontal);
@include background-image(radial-gradient(center, ellipse cover,  rgba(220,156,118,1)     0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%));

フィルターグラデーションのミックスインを作成できました

@mixin filter-gradient($color1, $color2, $direction){
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2',GradientType=$direction);}

ただし、カラーストップのために、放射状グラデーションのミックスインの作成にちょっとこだわっています

@mixin background-image($gradient($position, $type,  $rgba1, $rgba2, $rgba3, $rgba4){
    background: rgb(220,156,118);
    background: -moz-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(220,156,118,1)), color-stop(49%,rgba(220,156,118,1)), color-stop(92%,rgba(214,101,90,1)), color-stop(100%,rgba(214,101,90,1)));
    background: -webkit-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
    background: -o-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
    background: -ms-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
    background: $gradient(ellipse at center, $rgba1, $rgba2, $rgba3, $rgba4);
};

それらをどのように書きますか？

4

1 に答える 1

2

クロスブラウザーの動作にベストプラクティスを適用する便利なミックスイン (グラデーションなど) の優れたセットである Compass を試してみてください。

radial-gradient($color-stops, $center-position, $image)

Webkit の制限により、ピクセルベースのカラー ストップを使用する場合、放射状グラデーション ミックスインが最適に機能します。

Examples:

// Defaults to a centered, 100px radius gradient
+radial-gradient(color-stops(#c00, #00c))

// 100px radius gradient in the top left corner
+radial-gradient(color-stops(#c00, #00c), top left)

// Three colors, ending at 50px and passing thru #fff at 25px
+radial-gradient(color-stops(#c00, #fff, #00c 50px))

// A background image on top of a 100px radius gradient; requires an image
// with an alpha-layer.
+radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))

サポートされているブラウザ:

  • クロム
  • サファリ
  • Firefox 3.6 オペラ
于 2013-10-20T22:41:21.340 に答える