CSS3で線形グラデーションを使用する方法

今回はCSS3のlinear-gradientリニアグラデーションの使い方についてお届けします。CSS3のlinear-gradientリニアグラデーションを使う際の注意点についていくつか実践例を見てみましょう。 ショッピングモールプロジェクトにおいて、ショッピングカートは非常に重要な機能です。最も一般的なのは、スナップ購入を含むショッピング カート内の在庫に対する「+-」操作です。これには多くのアルゴリズムが背後にあります。ただし、フロントエンドとして、ショッピング カートの決済における +- は単なる計算です。従来の実装方法は画像を通して+-ボタンを実装することですが、この記事ではCSS3のlinear-gradient線形グラデーションを使用してショッピングカートの加算と減算の操作を実装します。

マイナス記号効果を実装するのは非常に簡単です。たとえば、10px*2px のマイナス記号グラフィックを実装したい場合、CSS は次のとおりです。

.minus {
    background-image: linear-gradient(to top, #666, #666);
    background-size: 10px 2px;
}

原理は次のとおりです。まず、グラデーションを使用して単色を生成します。 #666) 要素の背景全体を覆うグラデーション画像を作成し、background-size 属性を使用して希望のサイズに制御すると、効果が得られます。

プラス記号の効果は同様ですが、線形勾配の累積の追加層が必要である点が異なります。

最後に、下の図のような効果を実現できます:

background-color

またはボーダーを使用した従来の::before、::afetr擬似要素と比較して、グラデーション背景生成の使用には非常に重要な点があります。利点は、中央配置が非常に便利であるということです。ただし、従来の実装では、通常、絶対配置が必要であり、これは非常に冗長です。 この例のコード全体を以下に示します。 CSS コードは次のとおりです。

.btn {
    display: inline-block;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px; height: 24px;   
    border-radius: 2px;
    box-shadow: 0 1px rgba(100,100,100,.1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

主要な HTML コードは次のとおりです。

<a></a>
<input>
<a></a>

最終的な操作効果は上記のテクスチャと同じです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ホバーセレクターの使い方

CSSのmask-image属性の詳細な説明

以上がCSS3で線形グラデーションを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。