Comment utiliser le dégradé de ss3

Cette fois, je vais vous montrer comment utiliser le dégradé de ss3, et quelles sont les précautions lors de l'utilisation du dégradé de ss3. Ce qui suit est un cas pratique, jetons un coup d'œil.

"CSS Revealed" est un très bon livre, plein d'informations utiles et de surprises. Ce qui suit sont principalement des notes sur certains effets créés à l'aide de dégradés. Veuillez utiliser le dernier navigateur moderne pour visualiser.

Tout d'abord, examinez l'instruction CSS suivante :

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

Il s'agit d'un dégradé linéaire. Le premier paramètre est la direction du dégradé, qui est facultatif. Il peut s'agir d'un angle, et la valeur de l'angle est un degré, par exemple 45 degrés, 90 degrés. Vous pouvez également utiliser vers le côté ou vers le coin, par exemple vers la gauche (de droite à gauche), vers le bas (de haut en bas) ; les deuxième et troisième paramètres sont des couleurs dégradées. Ainsi, la façon la plus simple de l'écrire peut être :

background: linear-gradient(aquamarine,orange)

La valeur par défaut est de faire un dégradé de haut en bas. Mais si nous ne voulons pas de dégradés, nous voulons des barres de couleurs. L'astuce est de ne pas laisser d'espace entre les deux couleurs, car si vous laissez un espace, un dégradé effet de transition apparaîtra. Nous pouvons donc fixer 50 % chacun. Ces 50 % représentent la position de la couleur. Peut également être une unité de longueur.

background: linear-gradient(aquamarine 50%,orange 50%)

Et si nous avons besoin de plusieurs couleurs, comme le bleu, le blanc et le rouge.

 background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%,crimson 0 ,crimson )

Notez que les trois zéros et la dernière couleur cramoisi n'ont pas d'échelle de couleurs. Le premier aqua 0, aqua 33% signifie que l'aqua représente 33%, tandis que le deuxième blanc est blanc 0, blanc 67%. Cela semble représenter 67%, mais cela commence en fait à partir de 33%.

Si la position d'une marque de couleur est plus petite que sa position précédente, la position de la marque de couleur sera réglée à la valeur maximale des positions de marque de couleur précédentes .

Donc le deuxième 0 représente 33%, et le troisième 0 représente 67%. Vous pouvez remplacer 0 par une valeur inférieure à ces deux valeurs et l'effet sera le même. La dernière couleur sera remplie automatiquement sans échelle de couleurs. Donc si nous voulons juste tracer une ligne, la couleur dégradée peut utiliser une couleur transparente :

 linear-gradient(white 2px, transparent 0)

Mais si nous voulons obtenir un effet répétitif, nous avons également besoin de la coopération de background-size . La taille d'arrière-plan par défaut est 100 % 100 %. Mais si la taille est définie, cela équivaut à diviser la zone entière en petits morceaux répétés.

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

Le premier dégradé divise 225px en tiers horizontalement. Ensuite, le deuxième dégradé est divisé en tiers verticalement. C'est l'effet visible à l'œil nu, mais c'est en réalité le résultat de neuf carrés de 75 px*75 px.

Grille 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;

Ensuite la mise en place de cette grille est simple. Superposez ensuite le dégradé, et divisez chaque 75 en 5 15. L'effet ressemble à celui des carreaux de céramique.

Échiquier

<br>

Mais comment dessiner un échiquier ? Notez que les lignes ne sont pas continues. Comme le montre l'image ci-dessus, sur la base de l'idée de taille d'arrière-plan ci-dessus, nous savons qu'un tel échiquier est composé de plusieurs de ces carrés.

Et ces deux carrés sont composés de quatre triangles. Une caractéristique du dégradé linéaire est qu'il n'y aura qu'une seule couleur sur une ligne dans la zone de taille d'arrière-plan .

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;

Notez qu'un ensemble de positions d'arrière-plan est également utilisé. La première couleur #bbb occupe 25 % de la direction de 45 degrés, et la deuxième couleur #bbb occupe la dernière dans la direction de 45 degrés. direction du degré 25%. Si vous changez le deuxième triangle en rouge, la position à partir de 0,0 sera claire en un coup d'œil.

 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;

Changez la position du triangle rouge à 15px, et 15px formera un carré. De la même manière, superposez un carré pour obtenir le format échiquier. De la même manière, on peut constituer une grille de repos.

Laissez le triangle tourner de 90 degrés à chaque fois sans bouger sa position.

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)

<br>

Grille oblique

Avec l'accumulation ci-dessus, dessiner une grille inclinée est simple :

 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>

H5的视频播放库video.js详解<br>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!