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

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

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

コピペ自由！美しいグラデーションを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コード... 続きを読む