グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator

2024/10/29 334 users グラデーション デッドゾーン 原因 無料ツール グレー

美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Gene... 続きを読む

次世代の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を除く、すべてのブラウ... 続きを読む

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

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

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

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

制作者はなんと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」より許可をもらい、日本語抄訳しています。 フラットデザインの時代が終わりを迎えています。すべて一緒になくなるわけではないですが、すこしずつ始まっているようです。もっとも大きな証拠として、グラデーションを使った新しいデザイントレンドが生まれて... 続きを読む

[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト | コリス

2015/06/10 69 users コリス しぐさ div要素 キャプション ホバーエフェクト

シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。 イラストは、以前紹介した「Girls Design Materials」です。 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材 実装 Step 1: HTML 画像とキャプション（見出しとテキスト）をセットに、a要素で括り、全体をdiv要素で内包します。 <... 続きを読む

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サイトの配色、困っていませんか？ 配色は難しい 配色は難しいものです。メインカラーをオレンジに決めた時、他の色が白やグレーばかりになってしまったり、 街で見かけた鮮やかなポスターや女性誌の配色を意識してみたけれど、何か違う気がする……という経験、ありますよね。リアリティのある美しいグラデーションを... 続きを読む