ホームページ > 記事 > ウェブフロントエンド > ss3のグラデーションの使い方
ss3のグラデーションの使い方
- php中世界最好的语言オリジナル
- 2018-03-16 13:39:072073ブラウズ
今回はss3のグラデーションの使い方と、ss3のグラデーションを使用する際の注意点を紹介します。実際の事例を見てみましょう。
『CSS Revealed』は、有益な情報と驚きに満ちた、とても良い本です。以下は主に、グラデーションを使用して作成されたいくつかの効果についてのメモです。最新のブラウザを使用してご覧ください。
まず次の CSS ステートメントを確認する必要があります:
linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
これは線形グラデーションです。最初のパラメーターはグラデーションの方向であり、これはオプションです。角度を指定することもできます。角度の値は 45 度、90 度などの度です。たとえば、左へ (右から左へ)、下へ (上から下へ) を使用することもできます。したがって、これを記述する最も簡単な方法は次のようになります。
background: linear-gradient(aquamarine,orange)
デフォルトは上から下へのグラデーションです。しかし、グラデーションが必要ない場合は、カラーバーが必要です。コツは、2 つの色の間に隙間を残さないことです。隙間を空けると、グラデーション トランジション効果 が表示されます。したがって、それぞれ 50% を設定できます。この 50% は色の位置を表します。長さの単位にすることもできます。
background: linear-gradient(aquamarine 50%,orange 50%)
青、白、赤など、複数の色が必要な場合はどうすればよいでしょうか。
background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%,crimson 0 ,crimson )
3 つの 0 と最後の紅色にはカラー スケールがないことに注意してください。 1枚目のアクア0、アクア33％ということはアクアが33％、2枚目のホワイトは白0、白67％ということで67％を占めているように見えますが、実際は33％から始まります。
特定のカラーマークの位置が前の位置よりも小さい場合、そのカラーマークの位置は、以前のすべてのカラーマークの位置の最大値に設定されます。
つまり、2 番目の 0 は 33% を表し、3 番目の 0 は 67% を表します。 0 をこれら 2 つの値より小さい値に変更しても、効果は同じです。最後の色はカラー スケールなしで自動的に塗りつぶされます。したがって、単に線を描きたい場合は、グラデーション カラーを透明色にすることができます:
linear-gradient(white 2px, transparent 0)
しかし、繰り返し効果を実現したい場合は、background-size の協力も必要です。デフォルトの背景サイズは 100% 100% です。ただし、サイズが定義されている場合、領域全体を繰り返し小さな部分に分割することと同じになります。
グリッド 1:
<br>
.grid {
width: 225px;
height: 225px;
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0);
background-size: 75px 75px, 75px, 75px;
}
最初のグラデーションは、225px を水平方向に 3 等分することです。次に、2 番目のグラデーションが垂直に 3 等分されます。これは肉眼で見える効果ですが、実際には 75px*75px の正方形を 9 つ並べた結果です。
グリッド 2:
<br>
background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0),linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0); background-size: 75px 75px, 75px 75px,15px 15px,15px 15px;
このグリッドの実装は簡単です。次に、グラデーションを重ね合わせ、各 75 を 5 つの 15 に分割します。効果はセラミックタイルのように見えます。
チェス盤
<br>
でも、チェス盤を描くにはどうすればいいでしょうか？線が連続していないことに注意してください。上の図に示すように、上記の背景サイズの考え方に基づいて、そのようなチェス盤は複数のそのような正方形で構成されていることがわかります。
そして、この 2 つの正方形は 4 つの三角形 で構成されています。 線形グラデーションの特徴の 1 つは、背景サイズの領域の 1 つの線に 1 つの色しか存在しないことです。
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,#bbb 0),linear-gradient(45deg, #ffbb33 25%, transparent 0),linear-gradient(45deg, transparent 75%,#ffbb33 0); background-size: 30px 30px; background-position: 0 0, 15px 15px,15px 15px, 30px 30px;最初の #bbb カラーが 45 度方向の 25% を占め、2 番目の #bbb カラーが 45 度方向の最後の 25% を占めることに注意してください。 2 番目の三角形を赤に変更すると、0,0 から始まる位置が一目瞭然になります。
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,red 0); background-size: 30px 30px; background-position: 0 0, 0px 0px,15px 15px, 30px 30px;
background-image: linear-gradient(45deg, red 0, red 25%,transparent 0), linear-gradient(135deg, orange 0, orange 25%,transparent 0),linear-gradient(225deg, yellow 0, yellow 25%,transparent 0),linear-gradient(315deg, green 0, green 25%,transparent 0)rree斜めグリッド上記の積み重ねにより、斜めグリッドを描くのは簡単です:
background-image: linear-gradient(45deg,transparent 49% ,black 0,black 51% ,transparent 0), linear-gradient(135deg,transparent 49% ,black 0,black 51% ,transparent 0); background-size: 30px 30px;
相当于是每个单元就渐变了两条斜线。
斜格子
一直去拼这种单元可能让你有点烦，于是出来了repeating-linear-gradient。
background: repeating-linear-gradient( 45deg, transparent, transparent 1em, moccasin 0, moccasin 2em, transparent 0, transparent 3em, powderblue 0, powderblue 4em, transparent 0, transparent 5em, lavender 0, lavender 6em, transparent 0, transparent 7em, beige 0, beige 8em), repeating-linear-gradient( -45deg, transparent, transparent 1em, khaki 0, khaki 2em, transparent 0, transparent 3em, beige 0, beige 4em, transparent 0, transparent 5em, peachpuff 0, peachpuff 6em );
注意到颜色都是成对出现。这样才会出现我们的色条。注意这里使用了background-blend-mode: multiply; 混合模式。不然效果没有这么好看。
圆点:
思路和上面一样，使用径向渐变叠加和错位
background-image:radial-gradient(#fff 5px,transparent 0),radial-gradient(#fff 10px, transparent 0); background-size: 40px; background-position: 0 0, 20px 20px;
沙发
沙发这个效果比较复杂，使用了径向渐变制作圆点和阴影，线性渐变勾勒出线条。
background: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0 ; background-color: #300; background-size: 100px 100px;
radial-gradient语法：
radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
at <position> ,
]?
<color-stop> [ , <color-stop> ]+
)
看上去有点复杂，[]表示一个参数，[]?表示这个参数可选，| 表示这两个参数二选一，||表示这两个参数可以同时存在，'，'号表示这个参数结束。包含形状，中心点位置，扩展关键字和颜色。形状分圆形(circle)和椭圆(ellipse)，位置可以是长度/百分比/简写的left、center等。颜色和线性渐变一样，比如渐变一个太阳：
background:radial-gradient(at 45px 45px,rgb(248, 242, 209),gold,#FFF);
<br>
不过这里的at不仅影响着渐变的中心点而且还影响着渐变的形状。 如果加上background-size我们可以得到一块饼干：想吃么 (*^^*) ……
而扩展关键字主要有下面几种情况
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
background:radial-gradient(circle closest-side ,aqua,gold);
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
background:radial-gradient(circle closest-corner ,aqua,gold);
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
background:radial-gradient(circle farthest-side at 30% 30% ,aqua,gold);
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角
background:radial-gradient(circle farthest-corner at 30% 30% ,aqua,gold);
如果我们想画出色圈呢，这就要用到线性渐变中的技巧。
background:radial-gradient(white 0,white 10%,red 0, red 20%,white 0,white 30%,red 0,red 40%,white 0,white 50%,red 0,red 60%,white 0,white 100%);
小结：这些效果还是蛮有意思的，这一篇主要是学习了 linear-gradient，repeating-linear-gradient以及background-size、background-position来实现网格效果，最后还用到了radial-gradient，径向渐变的花样更多，所有的效果基本都是基于渐变叠加和重复，更多的效果可以参考下面的链接。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
jQuery、Angular、node中的Promise详解<br>
以上がss3のグラデーションの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。