次世代の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のconic-gradient()関数を使用した美しいグラデーションの実装方法

2022/06/08 91 users linear-gradient ブラウ CSS 関数 実装方法

CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウ... 続きを読む

シンプルで使いやすいのが登場！ UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools

2022/02/28 9 users 色相 グラデーション ツール 変換 UIデザイン

指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。 最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利... 続きを読む

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションを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のテクニックを紹介します。 白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変え... 続きを読む

UIデザインやグラフィック用の高解像度で、美しいグラデーション・グラデーションメッシュ素材をダウンロードできるサイトのまとめ | コリス

2021/09/07 8 users コリス グラデーション スマホアプリ 背景 UIデザイン

Webサイトやスマホアプリをはじめ、最近ではテレビのCMなどでも背景として使用されている、グラデーション・グラデーションメッシュ素材をダウンロードできるサイトを紹介します。 UIデザインやグラフィック用の高解像度の画像フ...記事の続きを読む 続きを読む

グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法 | コリス

2021/03/31 13 users 色相環 Photoshop コリス 真ん中 配色

グラデーションに美しい色を選んだのに、なぜかくすんでいることはありませんか？ 真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です。 美しいグラデーションを作成するためにどうすればよいのか、紹介します。 Photoshopなどのデザインツールだけでなく... 続きを読む

濁りなし！美しいグラデーションの基本ルールとCSSオンラインツール - PhotoshopVIP

2021/03/03 6 users グラデーション 見た目 PhotoshopVIP 多様性 時代

デザイントレンドは変わっていますが、グラデーションはとてもナチュラルな見た目と多様性に富んでおり、いつの時代も愛されるデザインスタイルです。 この記事では、美しいグラデーションを作成する基本ルールと、手軽に利用できるグラデーション作成オンラインツールをご紹介します。 美しいグラデーションって、なん... 続きを読む

CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法 | コリス

2020/11/10 12 users コリス 半円 グラデーション CSS ボーダー

CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves... 続きを読む

CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック | コリス

2020/01/17 32 users コリス UIデザイン スマホアプリ プラグイン スタイルシート

WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。 このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。 Using easing for mor... 続きを読む

これでもう、グラデーションにできてしまう濃淡の縞に困らない！バンディングをおさえるJavaScriptライブラリ | コリス

2019/09/17 61 users ハンティング コリス ビジター 濃淡 グラデーション

制作時の最適なモニターや最適な照明環境で美しいグラデーションを作成しても、ビジターの環境ではバンディングと呼ばれる濃淡の縞ができてしまうかもしれません。 Webページの背景などに使用するグラデーションにできてしまうバンディングをおさえ、滑らかに表示するためのJavaScriptライブラリを紹介します。 js-noisy... 続きを読む

【Figure-riseLABO】初音ミクV4X ～グラデーションによる色彩の表現～ - ホビー事業部の開発ブログ

2019/08/26 17 users Figure-riseLABO Labo プラモデル 全貌

みなさま、こんにちは。 昨年から何度か研究成果が展示されておりました Figure-riseLABO第2弾 「グラデーションによる色彩の表現」 C3AFA TOKYOにて ついにその全貌が明かされました！ プラモデルの成形色のみで再現された 美しいグラデーションの髪をなびかせ LABOの舞台に立ったのは 電子の歌姫 初音ミクV4Xです！ Fi... 続きを読む

制作者はなんと15歳のイケメン！今風の美しいCSSグラデーションがコピペで簡単に利用できる -Gradient Hunt | コリス

2018/07/23 60 users コリス 色相 コピペ CSS 美しいCSSグラデーション

Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者（@fmaldonadoy）は15歳のデザイナー兼We...記事の続きを読む 続きを読む

背景のデザインに困った時に！Webデザイン、ソーシャルメディア、イラストなどに利用できる背景素材生成ツール | コリス

2018/05/25 51 users パーティクルアニメーション 壁紙 コリス 背景素材 コンテンツ

Webデザイン、ソーシャルメディア、ブログをはじめ、イラストや壁紙など、さまざまなデザインに利用できる背景素材を生成するオンラインツールを紹介します。 昨日リリースされたばかりですが、すでに豊富なデザインが揃っており、今後さらに追加されていくとのことです。コンテンツが映える美しいグラデーション、パーティクルアニメーション、高品質な写真など、さまざまな背景が無料でダウンロードできます。 Cool B... 続きを読む

[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック | コリス

2018/03/27 64 users コリス 矩形 box-shadow シャドウ CSS

ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。 2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。 Gradient shadow in pure CSS デモ 実装 デモ まずは、実際の動作から見てましょう。 2色の美しいグラデーションを伴ったシ... 続きを読む

UIデザインに適した美しいグラデーションを簡単に作成できる無料ツール・無料素材のまとめ | コリス

2018/03/05 50 users コリス UIデザイン まとめ

Webデザインやスマホアプリに使用されるグラデーションも最近では進化しています。一昔前までは、パステル系のグラデーションが人気でしたが、最近では2色を使用した鮮やかなグラデーションや同一色相のグラデーションが注目されてい ...記事の続きを読む 続きを読む

最近のデザインでよく見かける色相を変化させた美しいグラデーションがまとめられた無料素材 -coolHue | コリス

2017/06/30 69 users Sketch コリス 色相 Photoshop スマホアプリ

最近のWebサイトやスマホアプリのデザインで人気が高い、色相を変化させた美しいグラデーション素材を紹介します。 Photoshop, Sketchのグラデーション素材として、またコードベースで利用することもできます。 c ...記事の続きを読む 続きを読む

[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック | コリス

2017/03/08 71 users コリス transform CSS アニメー アニメーション

レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。 スライドは単にそう見えるだけで、transformでサイドバーを変形させています。 滑らかなアニメーション、美しいグラデーション、スライドするにつれて透明度が変化するのも美しいですね。 サイドバーをアニメーションでスライドさせるデモ 実装 サイドバーをアニメー... 続きを読む

コピペ自由！美しいグラデーションを180種類揃えた WebGradients - PhotoshopVIP

2017/02/21 67 users PhotoshopVIP グラデーションカラー 配色 ボタン

最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフロー... 続きを読む

指定したカラーをベースに、Webデザインやイラストで使えるカラーパレットや美しいグラデーションを生成できるテンプレート -Color Creator Templates | コリス

2017/01/18 61 users BSDライセンス コリス バリエーション テンプレート ベース

指定したカラーをベースに、そのカラーからバリエーションを調査し、Webデザインやイラストで使えるカラーパレットや美しいグラデーションを生成できるテンプレートを紹介します。 Color Creator Templates -GitHub Color Creator Templatesは BSDライセンス で利用でき、3つのアプリ用にカラーテンプレートが用意されています。 Photoshop Sket... 続きを読む

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

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

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

背景素材に困った時に！コンテンツをしっかり見せる49種類の背景画像の無料フリー素材 -Hue | コリス

2015/11/16 92 users Hue コリス Sketch PowerPoint ごく一部

PhotoshopやSketchをはじめ、PowerPointなどのさまざまなソフトウェアで、そのまま簡単に利用できる繊細で美しいグラデーションの背景素材を紹介します。 下はごく一部ですが、めちゃくちゃかっこよくないですか？ いざという時に備えておくと便利ですね。 Hue: Free Promo Backdrops and Gradients Hueを使ったサンプル Hue 背景素材: 49種類 ... 続きを読む

[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サイトデザイン20個まとめ - PhotoshopVIP

2015/07/16 82 users PhotoshopVIP 参考

海外デザインブログDesignmodoで公開された「20 Websites that Prove Gradients are Making a Comback」より許可をもらい、日本語抄訳しています。 フラットデザインの時代が終わりを迎えています。すべて一緒になくなるわけではないですが、すこしずつ始まっているようです。もっとも大きな証拠として、グラデーションを使った新しいデザイントレンドが生まれて... 続きを読む