次世代のCSSグラデーションツールが美しすぎる！ すべての新しい色空間を完全にサポート -CSS HD Gradients

2023/05/11 198 users プリセット CSS カスタマイズ 次世代 サポート

すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)の... 続きを読む

ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ

2022/08/10 412 users テクスチャ シェイプ グラデーション アイソメトリック 背景

WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等... 続きを読む

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

2022/01/27 576 users CSS グラデーション 中央 解説 現象

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当... 続きを読む

UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック

2021/12/02 166 users CSS 白地 テクニック UIデザイン トレンド

近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。 白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変え... 続きを読む

Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス

2016/10/24 525 users コリス Hue Apple風 スタイルシート 美しいデザイン

文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用... 続きを読む

[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS | コリス

2015/09/30 128 users コリス CSS コピペ スニペット

aqua .bg-aqua-gradient { background: rgba(127,219,255,1); background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); background: linear-gradient(to bottom, rgba(127,219... 続きを読む

Webデザイナーはチェックしておきたい、最近のUIデザインで注目されているカラーのまとめ（スウォッチ付き） | コリス

2015/03/06 299 users スウォッチ コリス 同一色相 Photoshop パステル

有名ブランドで採用されているカラーをはじめ、Material DesignやiOS 8で採用されている落ち着いたパステル、同一色相の美しいグラデーションなど。 最近注目されているカラーをまとめたPhotoshopのスウォッチを紹介します。Illustrator用のもいくつかあります。 Color palette -Material Design 2015年、多くのWebデザイナーが注目しているMa... 続きを読む

美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ | Webクリエイターボックス

2015/03/02 515 users CSS 配色 実例 実装 Webクリエイターボックス

背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear... 続きを読む

美しいグラデーションが簡単に利用できる！グラデの種類が豊富に揃ったmixinとスタイルシートのまとめ -SuperGradient | コリス

2014/12/01 126 users Mixin コリス グラデ グラデーション 放射状

垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描くmixinをまとめた「SuperGradient」を紹介します。 ↓4色を使った斜めのグラデーション、美しいですね！ SuperGradient SuperGradient -GitHub SuperGradientではグラデーションのタイプとカラー、そのカラーが始めるポイント... 続きを読む

最近のUIデザインで使われている同一色相のグラデーションなど、人気のあるカラーのまとめ | コリス

2014/09/26 476 users コリス Modern UI Material Design

落ち着いたパステル系のカラー、同一色相の繊細で美しいグラデーションなど、Material Design, iOS 8, Modern UIなどやフラットなスタイルで使われている最近人気のあるカラーを紹介します。 Phot...記事の続きを読む 続きを読む

配色はiPhoneだけでOK！WebデザイナーのためのiOS版Adobe Kuler入門 | Find Job ! Startup

2013/10/09 112 users iPhone メインカラー Startup イシジマミキ 配色

こんにちわ！ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。 みなさんはWebサイトの配色、困っていませんか？ 配色は難しい 配色は難しいものです。メインカラーをオレンジに決めた時、他の色が白やグレーばかりになってしまったり、 街で見かけた鮮やかなポスターや女性誌の配色を意識してみたけれど、何か違う気がする……という経験、ありますよね。リアリティのある美しいグラデーションを... 続きを読む

透明を使った美しいグラデーションを描くことができるPhotoshop用のグラデーション素材 | コリス

2013/09/17 113 users コリス ティザ グラデーション素材 透明 濃淡

美しいグラデーションを描くポイントは、濃淡のシマシマがでてしまうバウンディング。透明を使った美しいグラデーションを描くPhotoshop用のグラデーション素材を紹介します。 Exponential Gradient バウンディングの解決方法としてはCS6以降だとグラデーションの設定で「ディザ」にチェックをいれたり、あとはCS5以前だと「ぼかし」をいれる方法があります。 「ぼかし」を使う方法は、下記... 続きを読む

質感系オシャレ&ミニマルな無料テクスチャ、壁紙素材100枚まとめPhotoshopVIP | PhotoshopVIP

2013/05/05 213 users ぼかしエフェクト グラデーション テクスチャ素材 エントリー

海外デザインブログDesignBeep.comで、ぼかしエフェクトを加えた、美しいグラデーションの無料テクスチャ、壁紙素材を100+枚まとめたエントリー「100+ Free High Resolution Blurred Backgrounds to Showcase Your Work」が公開されていたので、今回はご紹介します。 どのテクスチャ素材も、淡い色使いの見事なグラデーションが印象的で、... 続きを読む

WEBデザインをプロっぽく仕上げるPhotoshopのグラデーションファイルの厳選まとめ | 日刊ウェブログ式

2010/06/07 940 users Photoshop 日刊ウェブログ式 GIMP 厳選まとめ

フォトショップのグラデーションファイルは作業を早めるのに役立ちますし、テンプレートだと色の参考にもなります。PhotoshopやGIMPの色合いが美しいグラデーションを厳選してまとめました。 Photoshop Gradients Nice photoshop gradient set Download Source Uber Glossy Gradients Download Source We... 続きを読む