linear-gradient

スポンサーリンク
CSS

CSSのlinear-gradientで線形グラデーションを作成し、背景デザインを豊かにする方法をわかりやすく解説

CSSのlinear-gradient()プロパティは、要素の背景に線形グラデーションを作成するために使用されます。複数の色を指定して、その間でスムーズな色の遷移を作ることができます。linear-gradient()プロパティの値とその効果の一覧 方向(デフォルト: 0度) - グラデーションの方向を指定します。角度...
HTML&CSS

徐々に文章を透明化と、すべて読む コピペで使えるHTML+CSS AMP対応

新聞や雑誌のサイトなどでよく使われている記事が下に向かって徐々に半透明になり、[全てを読む]が表示されるページ。CSSのみで実現する方法を詳しく解説します。inputとlabel、checked、~セレクタを適切な順序と階層で使用します。
HTML&CSS

リアルな蛍光マーカーを引く コピペで使えるHTML+CSS

文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現!
HTML&CSS

mark 背景色を消しアンダーラインを引く コピペで使えるHTML+CSS

mark要素のプロパティであるtext-decorationを修正してアンダーラインを引くようにし、蛍光マーカーを引いたようなデザインを実現します。ピンク、イエロー、ブルー、グリーンの蛍光マーカーを再現します。
HTML&CSS

linear-gradient 線形グラデーション コピペで使えるHTML+CSS

CSSのlinear-gradient()はグラデーションを実現します。上から下、下から上に限らず、斜めにグラデーションも。開始位置、終了位置の指定方法など具体例をあげながら解説。