JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する

2021/11/11 17 users Intersection Observer スクロール

2021年11月11日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ... 続きを読む

グラデーションカラーをデザインに取り入れる理由とその効果的な利用方法 | アドビUX道場 #UXDojo | Adobe Blog

2020/10/26 6 users UXDojo アドビUX道場 コンセプト フラットデザイン

グラデーションカラーは特に新しいデザインコンセプトではありませんが、最近になって注目される存在になりつつあります。90年代の終わりから2000年代の初めにデザイントレンドとしてよく使われていたグラデーションカラーは、2005年前後から広がり始めたフラットデザインのコンセプトの陰にいつしか隠れた存在になって... 続きを読む

リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする | かちびと.net

2019/06/10 8 users padding Flex center box-sizing

Result CSSカウンターで加えた数字をグラデーションに、というもの スクロールしても色が変わらず維持できます だからどうしたと言われたらまぁ言い返す言葉も無いんですが css /* リストのスタイル*/ li { counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box; } ... 続きを読む

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

2017/02/21 67 users PhotoshopVIP ウェブデザイン ワークフロー 配色

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

CSS & JavaScript】HLS(カラーコード)を活用して美しくアニメーションするグラデーションカラーを作ってみる

2015/10/26 47 users CSS カラーコード JavaScript

DEMO 2 – 色相のみを変化させてトーンの揃ったカラーパターンを作ってみる 彩度と輝度を固定して色相を変化させるだけで同じトーンのカラーパターンを量産することが出来ます。例えば iOS は実に多彩な色を持ったトーンマナーにも関わらず統一感が失われていないのは、この彩度と輝度が一定に保たれているからです2)実際は微妙に調整されているのですが、それでも殆ど同じだったりします。。そういったカラーパタ... 続きを読む

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

2015/03/02 515 users CSS 配色 実例 実装 美しいグラデーション

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

配色の参考！美しいCSSグラデーションカラーを集めたギャラリーサイトuiGradients - Photoshop VIP

2014/09/09 63 users 配色 Photoshop Vip スライダー 参考 画面左下

カラーリング、配色の参考にしたい美しいCSSグラデーションカラーをあつめたギャラリーサイトuiGradientsが、個人的にデザイン制作で役に立ったので、備忘録的エントリーとしてご紹介します。 画面いっぱいに表示されるスライダーから、お気に入りのグラデーションカラーを見つけたら、画面左下に表示されている「Get CSS Code」をクリック（Enterキーを叩くキーボード操作も可能）。CSSコード... 続きを読む

2014春は黒髪ブーム！？黒髪にする前に抑えておきたいメリット・デメリット | nanapi [ナナピ]

2014/04/02 9 users nanapi ブリーチ ゆえ ナナピ 勇気

ここしばらくブリーチレベルのハイトーンやグラデーションカラーが人気でしたが、2014年の春は黒髪が流行ると言われています。 ですが黒髪は印象が極端ゆえに、「一旦黒くしたら、明るくするのは大変かも？」「やってみて似合わなかったらどうしよう…」などと、なかなか勇気が出ないと思います。 ところが、実は黒髪には色々な種類があるので、後に響かない＆一時的に楽しむようにすることもできるのです。 そこでここでは... 続きを読む