2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
CSS-Tricksにhr要素の表示をCSSを使ってカスタマイズする興味深いサンプルが掲載されている。グラデーション効果、破線効果、影付き効果、両端にデザインの追加、二重線と記号の配置などだ。注目したいのは画像などの要素を追加することなく、CSSのみでデザインを実施している点にある。手軽にデザインを変更する方法として興味深い。 グラデーションはbackground-imageにlinear-gradientを指定することで実現している。破線はborder-bottumにdashedの指定。影付き効果はbox-shadowが指定されている。興味深いのは両端にめくれ上がった線が2本記述されている7つ目のサンプルだ。基本的にはborder-radiusによる指定だが、height、border-width、margin-topなどをうまく組み合わせることでこれを実現している。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
