美しいグラデーションを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
【Photoshop】ボタンデザイン時に使える10の効果まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ボタンをデザインするときに使いがちなデザイン効果をまとめました。 詳しいやり方は記述しませんが、ほとんどがPhotoshopのレイヤー効果でなんとかなります。 コツは、色々と組み合わせて使うため、ひとつひとつを「やりすぎない」ことです。 ボタンデザインのご参考になれば… 01.Gradation グラデーション 02.Texture 模様 03.Border ボーダー 04.Dent へこみ 05.Shadow シャドウ 06.Text Shadow テキストシャドウ 07.Text Brightness 文字光彩 08.Reflection 反射 09.Highlights ハイライト 10.Shine てかり サンプル 作成例です。 01 + 03 + 04 + 06 + 09 + 10 を組み合わせています。 いろいろとお試しください〜。 LIGはWebサイト制作を支援しています。ご
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ultimate CSS Gradient Generator from ColorZilla
CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor
