スタッフブログスタッフが日々感じた事などをつづっています。今まで特別に画像を準備していたところがどんどんCSSで設定できるようになりました。今回はお気に入りのグラデーションcssの使い方を紹介します。グラデーションの基本:linear-gradient一番簡単なグラデーションはbackgroundでを設定する方法。感覚としては、background-imageを設定するところを、色指定することです。一つを選び、そこへ2色を設定します。CodePen.ざっとこんな感じです。次は複数の色を使ってカラフルに彩ります。この場合は各色に幅がデファルトで均等になっていることにご注目ください。CodePen.暖かみもあり、注目を集めやすい:radial-gradient今度はページの真ん中へ注意を集める場合にも役立つradial-gradientです。中心点が強調されたり、色合いによっても暖かみのあるページをつくることができます。CodePen.写真に重ねるグラデーションそれでは実際にホームページのトップで使いそうな画像にグラデーションを掛けてみましょう。gradientの種類を選び、色を選択してから、background-imageのurlを設定します。CodePen.まぁ〜、かわいい。今まで別で画像を準備していたのが、CSS内で全て解決できるようになりました。CSSのグラデーションは色んな面で活用できます。今回引用した英語サイトではグラデーションのボーダー設定なども紹介していますので、ぜひご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。only)株式会社エレパは、アップル製品を中心に幅広くパソコン関連商品を販売しているパソコンショップです。パソコン販売の他にも、修理、ネットワーク構築、システム開発、ホームページ制作、ドローンの販売や安全講習、ロボットプログラミング教室、通信販売なども行っています。グリーンハウスのテレビを使ってみた。FameThemes。