美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
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
美しいグラデーション系テクスチャ100種類揃えたコレクション Free Mesh Gradients Collection
2018年にかけてよく見かけるようになったグラフィックデザインのトレンドに、グラデーションカラーの利用があります。鮮やかでポップな配色から、どこかノスタルジックでモダンレトロなパステル系色使いまで、さまざまなデザインに活用されています。 そんな美しいグラデーションカラーを100種類揃えた無料テクスチャ素材「Free Mesh Gradients Collection」が公開されていたので、今回はご紹介します。100枚というバリエーションの豊富さだけでなく、PhotoshopやIllustrator、Sketchなど幅広いデザインアプリに対応しています。 美しいグラデーション系テクスチャ100種類揃えたコレクション Free Mesh Gradients Collection には、2018年を代表する鮮やかなグラデーションカラーが一覧で揃っています。収録されているファイル形式は、Illus
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
